How to handle No Data in pie chart? - amcharts

Question

I am currently working with pie charts in amCharts plugin. Sometimes I had to face no data in pie chart. In this scenario, amCharts loads no graph.
How can I handle no data in pie chart? Is there any method to display inactive pie chart (disabled pie chart or something)?

Answer 1

You can use AmCharts.addInitHandler function to set custom function to call before chart is drawn. You can use it to check if dataProvider is empty and make all kinds of modifications to the chart.
I.e.:
/**
* amCharts Plugin: handle empty pie chart
*/
AmCharts.addInitHandler(function(chart) {
// check if data is mepty
if (chart.dataProvider === undefined || chart.dataProvider.length === 0) {
// add some bogus data
var dp = {};
dp[chart.titleField] = "";
dp[chart.valueField] = 1;
chart.dataProvider.push(dp)
var dp = {};
dp[chart.titleField] = "";
dp[chart.valueField] = 1;
chart.dataProvider.push(dp)
var dp = {};
dp[chart.titleField] = "";
dp[chart.valueField] = 1;
chart.dataProvider.push(dp)
// disable slice labels and balloons
chart.labelsEnabled = false;
chart.balloonText = "";
// add label to let users know the chart is empty
chart.addLabel("50%", "50%", "The chart contains no data", "middle", 15);
// dim the whole chart
chart.alpha = 0.3;
}
}, ["pie"]);
var chart = AmCharts.makeChart("chartdiv", {
"type": "pie",
"theme": "light",
"dataProvider": [],
"valueField": "value",
"titleField": "title"
});
<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/pie.js"></script>
<script src="http://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv" style="width: 100%; height: 400px;"></div>