Dalton2 Dalton2 - 1 month ago 7
jQuery Question

Handle Empty bars in column chart in AmCharts

I am populating the data in a column chart using AmCharts like below -
enter image description here

As the picture shows, there 2 columns for which the bar is not there because there is no data. For handling these two bars, can we show some gray color or any other custom bar to signify there`s no data for that distribution

Answer Source

There isn't a built-in feature within AmCharts that does this, however you can process your data and use a graph object for cases where no data is in that particular category. You can create an init handler that sets the flag for you on chart initialization like so (adding a check for a custom flag so that it only runs on the relevant charts instead of all series charts):

AmCharts.addInitHandler(function(chart) { 
  if (!chart.fillEmptyCategories) { 
    //use a custom flag to determine whether to activate this on a particular chart
    return;
  }
  //collect all the valueFields
  var dataFields = chart.graphs.map(function(graph) {
    return graph.valueField;
  });
  //update the dataProvider, setting the noData property on
  //any array element that does not have any data for a particular category
  chart.dataProvider.forEach(function(dataItem) {
    var allEmpty = dataFields.every(function(dataField) {
      return dataItem[dataField] === undefined;
    });
    if (allEmpty) {
      dataItem.noData = 1; 
    } 
  });
}, ["serial"]);

Your empty data column object would look like this:

  graphs: [
    // other graphs omitted
    {
      //hide from legend and disable balloon if desired
      "visibleInLegend": false, 
      "showBalloon": false,
      "labelText": "No data",
      "type": "column",
      "fillAlphas": 1,
      "lineAlphas": 0,
      "lineThickness": 0,
      "fillColors": "#ececec",
      "valueField": "noData"
    }]

Demo below, one chart with a custom flag enabled to run the init handler and one without:

AmCharts.addInitHandler(function(chart) {
  if (!chart.fillEmptyCategories) {
    //use a custom property to make this init handler only fire on specific charts
    //that have it set to true.
    return;
  }
  //collect all the valueFields
  var dataFields = chart.graphs.map(function(graph) {
    return graph.valueField;
  });
  //update the dataProvider, setting the noData property on
  //any array element that does not have any data for a particular category
  chart.dataProvider.forEach(function(dataItem) {
    var allEmpty = dataFields.every(function(dataField) {
      return dataItem[dataField] === undefined;
    });
    if (allEmpty) {
      dataItem.noData = 1;
    }
  });
}, ["serial"]);

var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "theme": "light",
  "fillEmptyCategories": true,
  "legend": {
    "position": "right",
    "borderAlpha": 0.2,
    "equalWidths": true,
    "horizontalGap": 10,
    "markerSize": 10,
    "useGraphSettings": true,
    "valueWidth": 0
  },
  "dataProvider": [{
    "year": "2002",
    "europe": 2.5,
    "namerica": 2.5,
    "asia": 2.1,
    "lamerica": 0.3,
    "meast": 0.2,
    "africa": 0.1
  }, {
    "year": "2003",
    "europe": 2.6,
    "namerica": 2.7,
    "asia": 2.2,
    "lamerica": 0.3,
    "meast": 0.3,
    "africa": 0.1
  }, {
    "year": "2004"
  }, {
    "year": "2005"
  }, {
    "year": "2006",
    "europe": 2.8,
    "namerica": 2.9,
    "asia": 2.4,
    "lamerica": 0.3,
    "meast": 0.3,
    "africa": 0.1
  }],
  "valueAxes": [{
    "stackType": "100%",
    "axisAlpha": 0,
    "gridAlpha": 0,
    "labelsEnabled": false,
    "position": "left"
  }],
  "graphs": [{
    "balloonText": "[[title]], [[category]]<br><span style='font-size:14px;'><b>[[value]]</b> ([[percents]]%)</span>",
    "fillAlphas": 0.9,
    "fontSize": 11,
    "labelText": "[[percents]]%",
    "lineAlpha": 0.5,
    "title": "Europe",
    "type": "column",
    "valueField": "europe"
  }, {
    "balloonText": "[[title]], [[category]]<br><span style='font-size:14px;'><b>[[value]]</b> ([[percents]]%)</span>",
    "fillAlphas": 0.9,
    "fontSize": 11,
    "labelText": "[[percents]]%",
    "lineAlpha": 0.5,
    "title": "North America",
    "type": "column",
    "valueField": "namerica"
  }, {
    "balloonText": "[[title]], [[category]]<br><span style='font-size:14px;'><b>[[value]]</b> ([[percents]]%)</span>",
    "fillAlphas": 0.9,
    "fontSize": 11,
    "labelText": "[[percents]]%",
    "lineAlpha": 0.5,
    "title": "Asia-Pacific",
    "type": "column",
    "valueField": "asia"
  }, {
    "balloonText": "[[title]], [[category]]<br><span style='font-size:14px;'><b>[[value]]</b> ([[percents]]%)</span>",
    "fillAlphas": 0.9,
    "fontSize": 11,
    "labelText": "[[percents]]%",
    "lineAlpha": 0.5,
    "title": "Latin America",
    "type": "column",
    "valueField": "lamerica"
  }, {
    "balloonText": "[[title]], [[category]]<br><span style='font-size:14px;'><b>[[value]]</b> ([[percents]]%)</span>",
    "fillAlphas": 0.9,
    "fontSize": 11,
    "labelText": "[[percents]]%",
    "lineAlpha": 0.5,
    "title": "Middle-East",
    "type": "column",
    "valueField": "meast"
  }, {
    "balloonText": "[[title]], [[category]]<br><span style='font-size:14px;'><b>[[value]]</b> ([[percents]]%)</span>",
    "fillAlphas": 0.9,
    "fontSize": 11,
    "labelText": "[[percents]]%",
    "lineAlpha": 0.5,
    "title": "Africa",
    "type": "column",
    "valueField": "africa"
  }, {
    //hide from legend and disable balloon if desired
    "visibleInLegend": false,
    "showBalloon": false,
    "labelText": "No data",
    "type": "column",
    "fillAlphas": 1,
    "lineAlphas": 0,
    "lineThickness": 0,
    "fillColors": "#ececec",
    "valueField": "noData"
  }],
  "marginTop": 30,
  "marginRight": 0,
  "marginLeft": 0,
  "marginBottom": 40,
  "autoMargins": false,
  "categoryField": "year",
  "categoryAxis": {
    "gridPosition": "start",
    "axisAlpha": 0,
    "gridAlpha": 0
  }
});

//second one to demonstrate the handler not firing.
var chart = AmCharts.makeChart("chartdiv2", {
  "type": "serial",
  "theme": "light",
  "legend": {
    "position": "right",
    "borderAlpha": 0.2,
    "equalWidths": true,
    "horizontalGap": 10,
    "markerSize": 10,
    "useGraphSettings": true,
    "valueWidth": 0
  },
  "dataProvider": [{
    "year": "2002",
    "europe": 2.5,
    "namerica": 2.5,
    "asia": 2.1,
    "lamerica": 0.3,
    "meast": 0.2,
    "africa": 0.1
  }, {
    "year": "2003",
    "europe": 2.6,
    "namerica": 2.7,
    "asia": 2.2,
    "lamerica": 0.3,
    "meast": 0.3,
    "africa": 0.1
  }, {
    "year": "2004"
  }, {
    "year": "2005"
  }, {
    "year": "2006",
    "europe": 2.8,
    "namerica": 2.9,
    "asia": 2.4,
    "lamerica": 0.3,
    "meast": 0.3,
    "africa": 0.1
  }],
  "valueAxes": [{
    "stackType": "100%",
    "axisAlpha": 0,
    "gridAlpha": 0,
    "labelsEnabled": false,
    "position": "left"
  }],
  "graphs": [{
    "balloonText": "[[title]], [[category]]<br><span style='font-size:14px;'><b>[[value]]</b> ([[percents]]%)</span>",
    "fillAlphas": 0.9,
    "fontSize": 11,
    "labelText": "[[percents]]%",
    "lineAlpha": 0.5,
    "title": "Europe",
    "type": "column",
    "valueField": "europe"
  }, {
    "balloonText": "[[title]], [[category]]<br><span style='font-size:14px;'><b>[[value]]</b> ([[percents]]%)</span>",
    "fillAlphas": 0.9,
    "fontSize": 11,
    "labelText": "[[percents]]%",
    "lineAlpha": 0.5,
    "title": "North America",
    "type": "column",
    "valueField": "namerica"
  }, {
    "balloonText": "[[title]], [[category]]<br><span style='font-size:14px;'><b>[[value]]</b> ([[percents]]%)</span>",
    "fillAlphas": 0.9,
    "fontSize": 11,
    "labelText": "[[percents]]%",
    "lineAlpha": 0.5,
    "title": "Asia-Pacific",
    "type": "column",
    "valueField": "asia"
  }, {
    "balloonText": "[[title]], [[category]]<br><span style='font-size:14px;'><b>[[value]]</b> ([[percents]]%)</span>",
    "fillAlphas": 0.9,
    "fontSize": 11,
    "labelText": "[[percents]]%",
    "lineAlpha": 0.5,
    "title": "Latin America",
    "type": "column",
    "valueField": "lamerica"
  }, {
    "balloonText": "[[title]], [[category]]<br><span style='font-size:14px;'><b>[[value]]</b> ([[percents]]%)</span>",
    "fillAlphas": 0.9,
    "fontSize": 11,
    "labelText": "[[percents]]%",
    "lineAlpha": 0.5,
    "title": "Middle-East",
    "type": "column",
    "valueField": "meast"
  }, {
    "balloonText": "[[title]], [[category]]<br><span style='font-size:14px;'><b>[[value]]</b> ([[percents]]%)</span>",
    "fillAlphas": 0.9,
    "fontSize": 11,
    "labelText": "[[percents]]%",
    "lineAlpha": 0.5,
    "title": "Africa",
    "type": "column",
    "valueField": "africa"
  }, {
    //hide from legend and disable balloon if desired
    "visibleInLegend": false,
    "showBalloon": false,
    "labelText": "No data",
    "type": "column",
    "fillAlphas": 1,
    "lineAlphas": 0,
    "lineThickness": 0,
    "fillColors": "#ececec",
    "valueField": "noData"
  }],
  "marginTop": 30,
  "marginRight": 0,
  "marginLeft": 0,
  "marginBottom": 40,
  "autoMargins": false,
  "categoryField": "year",
  "categoryAxis": {
    "gridPosition": "start",
    "axisAlpha": 0,
    "gridAlpha": 0
  }
});
#chartdiv, #chartdiv2 {
  width: 100%;
  height: 500px;
  font-size: 11px;
}
<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>
<h3>Chart with custom fillEmptyCategories flag set</h3>
<div id="chartdiv"></div>
<h3>Chart without custom flag enabled</h3>
<div id="chartdiv2"></div>