Guruprasad Rao Guruprasad Rao - 3 months ago 23
Javascript Question

amcharts numberFormatter doesn't apply for serial chart

I have below setting done for my

amcharts serial-graph
.



var data = [{
"name": "Test Name 1",
"count": 31,
"amount": 30562,
"amount1": 8241,
"amount2": 4463,
"amount3": 3125,
"amount4": 14733,
"count1": 4,
"count2": 11,
"count3": 8,
"count4": 8,
"color1": "#fdaa29",
"color2": "#45aeea",
"color3": "#8fc842",
"color4": "#d43a43"
}, {
"name": "Test Name 2",
"count": 40,
"amount": 30413,
"amount1": 12874,
"amount2": 5014,
"amount3": 4915,
"amount4": 7610,
"count1": 20,
"count2": 7,
"count3": 9,
"count4": 4,
"color1": "#fdaa29",
"color2": "#45aeea",
"color3": "#8fc842",
"color4": "#d43a43"
}, {
"name": "Test Name 3",
"count": 166,
"amount": 228353.6,
"amount1": 109492,
"amount2": 53268,
"amount3": 52860.6,
"amount4": 12733,
"count1": 51,
"count2": 57,
"count3": 46,
"count4": 12,
"color1": "#fdaa29",
"color2": "#45aeea",
"color3": "#8fc842",
"color4": "#d43a43"
}, {
"name": "Test Name 4",
"count": 15,
"amount": 61801,
"amount1": 31656,
"amount2": 15853,
"amount3": 8033,
"amount4": 6259,
"count1": 1,
"count2": 9,
"count3": 2,
"count4": 3,
"color1": "#fdaa29",
"color2": "#45aeea",
"color3": "#8fc842",
"color4": "#d43a43"
}, {
"name": "Test Name 5",
"count": 81,
"amount": 69988,
"amount1": 23040,
"amount2": 26333,
"amount3": 10791,
"amount4": 9824,
"count1": 21,
"count2": 32,
"count3": 19,
"count4": 9,
"color1": "#fdaa29",
"color2": "#45aeea",
"color3": "#8fc842",
"color4": "#d43a43"
}, {
"name": "Test Name 6",
"count": 30,
"amount": 113027,
"amount1": 56511,
"amount2": 9750,
"amount3": 34014,
"amount4": 12752,
"count1": 15,
"count2": 4,
"count3": 8,
"count4": 3,
"color1": "#fdaa29",
"color2": "#45aeea",
"color3": "#8fc842",
"color4": "#d43a43"
}, {
"name": "Test Name 7",
"count": 2,
"amount": 812,
"amount1": 0,
"amount2": 562,
"amount3": 0,
"amount4": 250,
"count1": 0,
"count2": 1,
"count3": 0,
"count4": 1,
"color1": "#fdaa29",
"color2": "#45aeea",
"color3": "#8fc842",
"color4": "#d43a43"
}, {
"name": "Test Name 8",
"count": 92,
"amount": 103502.005,
"amount1": 42177,
"amount2": 38629,
"amount3": 11338,
"amount4": 11358,
"count1": 24,
"count2": 37,
"count3": 22,
"count4": 9,
"color1": "#fdaa29",
"color2": "#45aeea",
"color3": "#8fc842",
"color4": "#d43a43"
}, {
"name": "Test Name 9",
"count": 0,
"amount": 0,
"amount1": 0,
"amount2": 0,
"amount3": 0,
"amount4": 0,
"count1": 0,
"count2": 0,
"count3": 0,
"count4": 0,
"color1": "#fdaa29",
"color2": "#45aeea",
"color3": "#8fc842",
"color4": "#d43a43",
}, {
"name": "Test Name 10",
"count": 2,
"amount": 1642.521,
"amount1": 1432.5263541,
"amount2": 210,
"amount3": 0,
"amount4": 0,
"count1": 1,
"count2": 1,
"count3": 0,
"count4": 0,
"color1": "#fdaa29",
"color2": "#45aeea",
"color3": "#8fc842",
"color4": "#d43a43",
}]

var labelText, valueField, balloonText1, balloonText2, balloonText3, balloonText4, valueField1, valueField2, valueField3, valueField4;

labelText = "$ [[amount]]";
valueField = "amount";
pieLabel = "$ [[value]]";
balloonText1 = "$ [[amount1]]";
balloonText2 = "$ [[amount2]]";
balloonText3 = "$ [[amount3]]";
balloonText4 = "$ [[amount4]]";
valueField1 = "amount1";
valueField2 = "amount2";
valueField3 = "amount3";
valueField4 = "amount4";
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"dataProvider": data,
"valueAxes": [{
"stackType": "regular",
"axisAlpha": 0,
"gridAlpha": 0.1,
"unit": "$ ",
"unitPosition": "left"
}],
"startDuration": 1,
"graphs": [{
valueField: valueField,
labelText: labelText,
labelOffset: 20,
labelPosition: "right",
labelFunction: function(item, label) {
return label == "$ 0" ? "" : label;
},
visibleInLegend: false,
lineAlpha: 0,
showBalloon: false,
fontSize: 13,
"numberFormatter": {
"precision": 2,
"decimalSeparator": ".",
"thousandsSeparator": ","
}
}, {
"balloonText": "<b>" + balloonText1 + "</b>",
"fillAlphas": 0.9,
"lineAlpha": 0,
"type": "column",
"colorField": "color1",
"valueField": valueField1,
"numberFormatter": {
"precision": 2,
"decimalSeparator": ".",
"thousandsSeparator": ","
}
}, {
"balloonText": "<b>" + balloonText2 + "</b>",
"fillAlphas": 0.9,
"lineAlpha": 0,
"type": "column",
"colorField": "color2",
"valueField": valueField2,
"numberFormatter": {
"precision": 2,
"decimalSeparator": ".",
"thousandsSeparator": ","
}
}, {
"balloonText": "<b>" + balloonText3 + "</b>",
"fillAlphas": 0.9,
"lineAlpha": 0,
"type": "column",
"colorField": "color3",
"valueField": valueField3,
"numberFormatter": {
"precision": 2,
"decimalSeparator": ".",
"thousandsSeparator": ","
}
}, {
"balloonText": "<b>" + balloonText4 + "</b>",
"fillAlphas": 0.9,
"lineAlpha": 0,
"type": "column",
"colorField": "color4",
"valueField": valueField4,
"numberFormatter": {
"precision": 2,
"decimalSeparator": ".",
"thousandsSeparator": ","
}
}],

"depth3D": 15,
"fontFamily": '"Roboto",sans-serif',
"fontSize": 12,
"angle": 25,
"rotate": true,
"columnWidth": 0.7,
"categoryField": "name",
"categoryAxis": {
"gridPosition": "start",
"axisAlpha": 0,
"gridAlpha": 0,
"position": "left"
}
});

#chartdiv {
width: 100%;
height: 400px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>





As can be seen from above code, I've applied
numberFormmater
for all the
graphs
field. I have assigned value through variable as in
var labelText, valueField, balloonText1, balloonText2,
etc, in the actual
UI
because, this graph can be changed from
amount
display to
count
display as taken from the
data
So the above setting. But in spite of all these, the
amount
is not getting formatted. Any suggestions or help on this would be really appreciable.

Answer

The chart applies number formatting only to known metacodes like [[value]]. You are using direct references to fields in data such as [[amount]], [[amount1]], etc.

The chart does not know if those are supposed to be numeric values, hence no formatting is applied - they are displayed as they are.

The same goes with balloonText and labelText.

To fix this, simply replace all occurrences of thos meta codes to the built-in [[value]]. The chart will replace it with a formatted value, for each graph individually:

var data = [ {
  "name": "Test Name 1",
  "count": 31,
  "amount": 30562,
  "amount1": 8241,
  "amount2": 4463,
  "amount3": 3125,
  "amount4": 14733,
  "count1": 4,
  "count2": 11,
  "count3": 8,
  "count4": 8,
  "color1": "#fdaa29",
  "color2": "#45aeea",
  "color3": "#8fc842",
  "color4": "#d43a43"
}, {
  "name": "Test Name 2",
  "count": 40,
  "amount": 30413,
  "amount1": 12874,
  "amount2": 5014,
  "amount3": 4915,
  "amount4": 7610,
  "count1": 20,
  "count2": 7,
  "count3": 9,
  "count4": 4,
  "color1": "#fdaa29",
  "color2": "#45aeea",
  "color3": "#8fc842",
  "color4": "#d43a43"
}, {
  "name": "Test Name 3",
  "count": 166,
  "amount": 228353.6,
  "amount1": 109492,
  "amount2": 53268,
  "amount3": 52860.6,
  "amount4": 12733,
  "count1": 51,
  "count2": 57,
  "count3": 46,
  "count4": 12,
  "color1": "#fdaa29",
  "color2": "#45aeea",
  "color3": "#8fc842",
  "color4": "#d43a43"
}, {
  "name": "Test Name 4",
  "count": 15,
  "amount": 61801,
  "amount1": 31656,
  "amount2": 15853,
  "amount3": 8033,
  "amount4": 6259,
  "count1": 1,
  "count2": 9,
  "count3": 2,
  "count4": 3,
  "color1": "#fdaa29",
  "color2": "#45aeea",
  "color3": "#8fc842",
  "color4": "#d43a43"
}, {
  "name": "Test Name 5",
  "count": 81,
  "amount": 69988,
  "amount1": 23040,
  "amount2": 26333,
  "amount3": 10791,
  "amount4": 9824,
  "count1": 21,
  "count2": 32,
  "count3": 19,
  "count4": 9,
  "color1": "#fdaa29",
  "color2": "#45aeea",
  "color3": "#8fc842",
  "color4": "#d43a43"
}, {
  "name": "Test Name 6",
  "count": 30,
  "amount": 113027,
  "amount1": 56511,
  "amount2": 9750,
  "amount3": 34014,
  "amount4": 12752,
  "count1": 15,
  "count2": 4,
  "count3": 8,
  "count4": 3,
  "color1": "#fdaa29",
  "color2": "#45aeea",
  "color3": "#8fc842",
  "color4": "#d43a43"
}, {
  "name": "Test Name 7",
  "count": 2,
  "amount": 812,
  "amount1": 0,
  "amount2": 562,
  "amount3": 0,
  "amount4": 250,
  "count1": 0,
  "count2": 1,
  "count3": 0,
  "count4": 1,
  "color1": "#fdaa29",
  "color2": "#45aeea",
  "color3": "#8fc842",
  "color4": "#d43a43"
}, {
  "name": "Test Name 8",
  "count": 92,
  "amount": 103502.005,
  "amount1": 42177,
  "amount2": 38629,
  "amount3": 11338,
  "amount4": 11358,
  "count1": 24,
  "count2": 37,
  "count3": 22,
  "count4": 9,
  "color1": "#fdaa29",
  "color2": "#45aeea",
  "color3": "#8fc842",
  "color4": "#d43a43"
}, {
  "name": "Test Name 9",
  "count": 0,
  "amount": 0,
  "amount1": 0,
  "amount2": 0,
  "amount3": 0,
  "amount4": 0,
  "count1": 0,
  "count2": 0,
  "count3": 0,
  "count4": 0,
  "color1": "#fdaa29",
  "color2": "#45aeea",
  "color3": "#8fc842",
  "color4": "#d43a43",
}, {
  "name": "Test Name 10",
  "count": 2,
  "amount": 1642.521,
  "amount1": 1432.5263541,
  "amount2": 210,
  "amount3": 0,
  "amount4": 0,
  "count1": 1,
  "count2": 1,
  "count3": 0,
  "count4": 0,
  "color1": "#fdaa29",
  "color2": "#45aeea",
  "color3": "#8fc842",
  "color4": "#d43a43",
} ]

var labelText, valueField, balloonText1, balloonText2, balloonText3, balloonText4, valueField1, valueField2, valueField3, valueField4;

labelText = "$ [[value]]";
valueField = "amount";
pieLabel = "$ [[value]]";
balloonText = "$ [[value]]";
valueField1 = "amount1";
valueField2 = "amount2";
valueField3 = "amount3";
valueField4 = "amount4";
var chart = AmCharts.makeChart( "chartdiv", {
  "type": "serial",
  "dataProvider": data,
  "valueAxes": [ {
    "stackType": "regular",
    "axisAlpha": 0,
    "gridAlpha": 0.1,
    "unit": "$ ",
    "unitPosition": "left"
  } ],
  "startDuration": 1,
  "graphs": [ {
    valueField: valueField,
    labelText: labelText,
    labelOffset: 20,
    labelPosition: "right",
    labelFunction: function( item, label ) {
      return label == "$ 0" ? "" : label;
    },
    visibleInLegend: false,
    lineAlpha: 0,
    showBalloon: false,
    fontSize: 13,
    "precision": 2,
    "decimalSeparator": ".",
    "thousandsSeparator": ","
  }, {
    "balloonText": "<b>" + balloonText + "</b>",
    "fillAlphas": 0.9,
    "lineAlpha": 0,
    "type": "column",
    "colorField": "color1",
    "valueField": valueField1,
    "precision": 2,
    "decimalSeparator": ".",
    "thousandsSeparator": ","
  }, {
    "balloonText": "<b>" + balloonText + "</b>",
    "fillAlphas": 0.9,
    "lineAlpha": 0,
    "type": "column",
    "colorField": "color2",
    "valueField": valueField2,
    "precision": 2,
    "decimalSeparator": ".",
    "thousandsSeparator": ","
  }, {
    "balloonText": "<b>" + balloonText + "</b>",
    "fillAlphas": 0.9,
    "lineAlpha": 0,
    "type": "column",
    "colorField": "color3",
    "valueField": valueField3,
    "precision": 2,
    "decimalSeparator": ".",
    "thousandsSeparator": ","
  }, {
    "balloonText": "<b>" + balloonText + "</b>",
    "fillAlphas": 0.9,
    "lineAlpha": 0,
    "type": "column",
    "colorField": "color4",
    "valueField": valueField4,
    "precision": 2,
    "decimalSeparator": ".",
    "thousandsSeparator": ","
  } ],

  "depth3D": 15,
  "fontFamily": '"Roboto",sans-serif',
  "fontSize": 12,
  "angle": 25,
  "rotate": true,
  "columnWidth": 0.7,
  "categoryField": "name",
  "categoryAxis": {
    "gridPosition": "start",
    "axisAlpha": 0,
    "gridAlpha": 0,
    "position": "left"
  }
} );
#chartdiv {
    width: 100%;
    height: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>

Comments