Amcharts add Euro symbol to value in balloon - amcharts

Question

This is my Json response, I can't figure out how I can add Euro symbol to my values. Ofcourse this is an idea of response and not the actual array that is being sent.
{"graphAxis":[{"valueAxis":"v0","lineColor":"#00969e","bullet":"round","bulletBorderAlpha":1,"bulletSize":"8","bulletBorderThickness":1,"bulletColor":"#FFFFFF","lineThickness":"2","hideBulletsCount":"50","title":"Prolongatie brandstoftermijn","valueField":"Prolongatie brandstoftermijn","costTypeId":15,"useLineColorForBulletBorder":true}],"dataProvider":[{"Prolongatie brandstoftermijn":4163.82,"date":"2016-01-01"},{"Prolongatie brandstoftermijn":7297.77,"date":"2016-02-01"},{"Prolongatie brandstoftermijn":7297.77,"date":"2016-03-01"},{"Prolongatie brandstoftermijn":162.43,"date":"2016-04-01"}]}
Can anyone provide any inputs on how to add Eur symbol to balloon text
This is my code in js file
//ajax request to show graph
$("#diaplayGraph").click(function(event) {
event.preventDefault();
$.ajax
({
url: $("#frmCostViewGraph").attr('action'),
data: $("#frmCostViewGraph").serialize(),
type: 'post',
beforeSend: function( xhr ) {
var message = '';
var selectedCostAllocations = $("#costAllocations").val();
var selectedCostTypes = $("#costTypes").val();
if(selectedCostAllocations == null) {
errorMessage($("#costAllocationError").html());
return false;
}
if(selectedCostTypes == null) {
errorMessage($("#costTypeError").html());
return false;
}
if($('input[name=reportType]:checked').length<=0)
{
errorMessage($("#reportTypeError").html());
return false
}
showLoading();
},
dataType:"JSON",
success: function(result)
{
hideMessage();
chartData = result.dataProvider;
graphAxis = result.graphAxis;
if(chartData == '') {
$("#chartdiv").html($("#noRecordFound").html());
hideLoading();
return false;
}
var chart = AmCharts.makeChart("chartdiv", {
"fontFamily": "Helvetica Neue,Helvetica,Arial,Open Sans,sans-serif",
"fontSize":12,
"type": "serial",
"theme": "default",
"mouseWheelZoomEnabled":true,
"dataDateFormat": "YYYY-MM-DD",
"valueAxes": [{
"id": "v1",
"axisAlpha": 0,
"position": "left",
"ignoreAxisWidth":true
}],
"balloon": {
"borderThickness": 1,
"shadowAlpha": 0
},
"legend": {
"useGraphSettings": false,
},
"dataProvider": chartData,
"graphs":graphAxis,
"chartScrollbar": {
"graph": "g1",
"oppositeAxis":false,
"offset":30,
"scrollbarHeight": 20,
"backgroundAlpha": 0,
"selectedBackgroundAlpha": 0.1,
"selectedBackgroundColor": "#888888",
"graphFillAlpha": 0,
"graphLineAlpha": 0.5,
"selectedGraphFillAlpha": 0,
"selectedGraphLineAlpha": 1,
"autoGridCount":true,
"color":"#AAAAAA",
"autoGridCount": true,
"resizeEnabled":true
},
"chartCursor": {
"valueLineEnabled": true,
"valueLineBalloonEnabled": true,
"cursorAlpha":1,
"cursorColor":"#258cbb",
"limitToGraph":"g1",
"valueLineAlpha":0.2,
"valueZoomable":true,
"cursorPosition": "mouse",
"oneBalloonOnly": true,
"categoryBalloonDateFormat": "DD-MMM-YYYY"
},
"valueScrollbar":{
"oppositeAxis":false,
"offset":75,
"scrollbarHeight":10,
"backgroundAlpha":1,
},
"valueAxes": [{
"axisColor": "#23272D",
"axisAlpha": 1,
"position": "left",
"unit": "$",
"unitPosition": "left"
}],
"categoryField": "date",
"categoryAxis": {
"parseDates": true,
"dashLength": 1,
"minorGridEnabled": true,
"minPeriod":"MM",
"axisColor": "#23272D"
},
"export": {
"enabled": true,
},
"numberFormatter": {
"precision": -1,
"decimalSeparator": ",",
"thousandsSeparator": "."
},
});
chart.addListener("clickGraphItem", handleClick);
zoomChart();
function zoomChart() {
chart.zoomToIndexes(chart.dataProvider.length - 40, chart.dataProvider.length - 1);
}
hideLoading();
}
});
})

Answer 1

This should be done with the graphs array, within your graphAxis.
If for instance you have an graph implementation like this, you can add the euro sign to the balloonText property:
success: function(result) {
hideMessage();
chartData = result.dataProvider;
graphAxis = result.graphAxis;
if(graphAxis && graphAxis[0]) {
graphAxis[0].balloonText = "<b>€ [[Prolongatie brandstoftermijn]]</b>";
}
//...
}