Do not render chart when no data is found or display a message or something similar

I'm using the drilldown pie chart to drill down into children of a node, etc. The problem is that at some point, the children do not contain any data. Is there a way to display a message or something similar inside the chart instead of a white area (because of no series data) that informs the user that there is no more data to display?

Solution

Very good question! Inside of your JSON configuration you can define the nodata attribute.

var myConfig = {
 	type: "bar", 
 	noData:{
 	  text:"Empty Series",
 	  backgroundColor: "#20b2db"
 	},
 	series:[
      {
        values:[]
      }
    ]
};
 
zingchart.render({ 
	id : 'myChart', 
	data : myConfig, 
	height: 400, 
	width: 600 
});

<!DOCTYPE html>
<html>
	<head>
		<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
    </head>
	<body>
		<div id='myChart'></div>
	</body>
</html>

You can even use background image like a loading screen. In the following example I'm displaying spongebob while I'm waiting for chart data to come in. So I initially render a chart with no series values and nodata defined. The image is displayed while the Ajax call happens asynchronously.

demo