Guruprasad Rao - 1 year ago 95

jQuery Question

**Problem Fiddle**

Below is the code am using to construct

`serial graph`

`demo`

`sum text`

`demo`

`rotate=true`

`horizontal graph`

`sum text`

`sum text`

`bar`

`sum text`

`0`

`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 Source

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