Guruprasad Rao Guruprasad Rao - 4 months ago 28
jQuery Question

Moving sum text to the extreme right in amcharts serial graph

Problem Fiddle

Below is the code am using to construct

serial graph
with amcharts plugin. I have referred this
demo
to add
sum text
, but the only difference is that in
demo
it is vertical graph and I've used
rotate=true
option to make it
horizontal graph
. In demo mentioned above, the
sum text
will be at top, but the issue am facing here is the
sum text
, comes within label. I would like to append it to extreme right after the last
bar
. Also, I would like to hide the
sum text
if its
0
. But I did not find any suitable option for this anywhere in the docs or SO. Could anyone guide me in the right path?

var data = [{
"name": "Test1",
"firstAmount": 0,
"secondAmount": 0,
"thirdAmount": 0,
"forthAmount": 0,
"total": 0
}, {
"name": "Test2",
"firstAmount": 4164,
"secondAmount": 1232,
"thirdAmount": 0,
"forthAmount": 0,
"total": 5396
}, {
"name": "Test3",
"firstAmount": 2509,
"secondAmount": 0,
"thirdAmount": 0,
"forthAmount": 0,
"total": 2509
}, {
"name": "Test4",
"firstAmount": 9909,
"secondAmount": 200,
"thirdAmount": 330,
"forthAmount": 222,
"total": 10661
}]
AmCharts.addInitHandler(function(chart) {
// iterate through data
for (var i = 0; i < chart.dataProvider.length; i++) {
var dp = chart.dataProvider[i];

dp.total = 0;
dp.totalText = 0;
for (var x = 0; x < chart.graphs.length; x++) {
var g = chart.graphs[x];
dp.totalText += dp[g.valueField];
console.log(dp[g.valueField])
if (dp[g.valueField] > 0)
dp.total += dp[g.valueField];
if (dp.total == 0) dp.total = "";
}
}
var graph = new AmCharts.AmGraph();
graph.valueField = "total";
graph.labelText = "$ [[totalText]]";
graph.visibleInLegend = false;
graph.lineAlpha = 0;
graph.showBalloon = false;
graph.fontSize = 13;
chart.addGraph(graph);
}, ["serial"]);
var chart = AmCharts.makeChart("chartdiv", {
//"theme": "light",
"type": "serial",
"dataProvider": data,
"startDuration": 1,
"graphs": [{
"balloonText": "<b>$ [[firstAmount]]</b>",
"fillAlphas": 1,
"lineAlpha": 0,
"type": "column",
"color": "#fdaa29",
"valueField": "firstAmount"
}, {
"balloonText": "<b>$ [[secondAmount]]</b>",
"fillAlphas": 1,
"lineAlpha": 0,
"type": "column",
"color": "#45aeea",
"valueField": "secondAmount"
}, {
"balloonText": "<b>$ [[thirdAmount]]</b>",
"fillAlphas": 0.8,
"lineAlpha": 0,
"type": "column",
"color": "#8fc842",
"valueField": "thirdAmount"
}, {
"balloonText": "<b>$ [[forthAmount]]</b>",
"fillAlphas": 0.8,
"lineAlpha": 0,
"type": "column",
"color": "#d43a43",
"valueField": "forthAmount"
}],
"valueAxes": [{
"stackType": "regular",
"axisAlpha": 0.3,
"gridAlpha": 0
}],
"rotate": true,
"columnWidth": 0.8,
"categoryField": "name",
"categoryAxis": {
"gridPosition": "start",
"axisAlpha": 0,
"gridAlpha": 0,
"position": "left"
},
"export": {
"enabled": true
}
});

Answer

Here is a demo:

https://jsfiddle.net/ry1dsoLa/

You have to use:

graph.labelOffset = 5;
graph.labelPosition = "right";

To position it on the right side.

To remove the 0 label, you can use the graph.labelFunction

graph.labelFunction = function(item, label) {
    return label == "$ 0" ? "" : label;
};

You do not need the for loop, because you already have a total in your data set