CODEWITHSUNDEEP
javascriptamcharts
John
John

Reputation: 305

Showing percentage on bar graph in amcharts

I am newbie in Amcharts and I am trying to show the percentage of the data in the column graph.

var amc=AmCharts.makeChart("pickup_bar",
        {
    "type": "serial",
    "dataLoader": {
        "url": "the data url"
      },
    "categoryField": "distance",
    "startDuration": 1,
    "categoryAxis": {
        "gridPosition": "start"
    },
    "trendLines": [],
    "graphs": [
        {
        "valueField": "taxi",
        "fillColors":"#1E90FF",
        "type": "column",
        "balloonText": "[[title]] of [[category]]:[[value]]",
        "fillAlphas": 0.8,
        "lineAlpha": 0.2,
        "id": "AmGraph-1",
        "title": "Distance Traveled",

        "labelText": " ",
        "labelPosition": "inside",

        "labelFunction": function( item ) {
            var total = 0;
            for ( var i = 0; i < chart.dataLoader.length; i++ ) {
              total += chart.dataLoader[ i ][ item.graph.valueField ];
            }

            var percent = Math.round( ( item.values.value / total ) * 1000 ) / 10;
            return percent + "%";
          }
    }],
"guides": [],
"valueAxes": [
    {
        "id": "ValueAxis-1",
        "title": "Milage",
        "gridColor": "#FFFFFF",
        "gridAlpha": 0.2
    }
],
"categoryAxis": {
    "title": "(in Kilometers)"
  },
"gridAboveGraphs": true,
"allLabels": [],
"balloon": {},
"legend": {
    "enabled": true,
    "useGraphSettings": true
},
"titles": [
    {
        "id": "Title-1",
        "size": 15,
        "text": "Taxis Driving Distance "
    }
]
});

The data format is json and will be as 

> [{"distance":"<50","taxi":309,"day":1},{"distance":"50-100","taxi":100,"day":1},{"distance":"100-200","taxi":300,"day":1},...]

The chart is load even loading but when I remove the line 

"labelPosition": "inside",

The graph appears but not the percentage.

Can Anyone help in this?

Upvotes: 0

Views: 2314

Answers (1)

xorspark
xorspark

Reputation: 16012

There are a couple of issues in your code.

Firstly, you're accessing an undefined chart variable. Your code is assigning the chart object to amc. You'll want to change your code to match, or access the chart instance through item.graph.chart.

Secondly, you're looping through the dataLoader in your labelFunction instead of the dataProvider. The dataLoader object doesn't store your chart data, it just loads data into your chart's dataLoader after it retrieves it from the specified URL. Here's your fixed labelFunction:

    "labelFunction": function(item) { 
      var total = 0;
      var chart = item.graph.chart;
      for (var i = 0; i < chart.dataProvider.length; i++) {
        total += chart.dataProvider[i][item.graph.valueField];
      }

      var percent = Math.round((item.values.value / total) * 1000) / 10;
      return percent + "%";
    }

The labels display for me with your data after I made these changes. If you're still not seeing the labels, perhaps you have a lot of data in a limited space. By default, the chart won't render graph value labels if it can't fit them. If you want to override this behavior, set the graph's showAllValueLabels property to true.

Demo

Upvotes: 1

Related Questions