Showing No Data Found Message - CanvasJS JavaScript Charts

Showing No Data Found Message when all y values are zero or null or no data present- CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/>
<!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {
  theme: "light2",
  title: {
    text: "Gaming Consoles Sold in 2012"
  },
  data: [{
    type: "pie",
    showInLegend: true,
    toolTipContent: "{y} – #percent %",
    yValueFormatString: "#,##0,,.## Million",
    legendText: "{indexLabel}",
    dataPoints: [
      { y: 0, indexLabel: "PlayStation 3" },
      { y: 0, indexLabel: "Wii" },
      { y: 0, indexLabel: "Xbox 360" },
      { y: 0, indexLabel: "Nintendo DS"},
      { y: 0, indexLabel: "PSP" },
      { y: 0, indexLabel: "Nintendo 3DS"},
      { y: 0, indexLabel: "PS Vita"}
    ]
  }]
});


showDefaultText(chart, "No Data Found!");
chart.render();

function showDefaultText(chart, text) {
  var dataPoints = chart.options.data[0].dataPoints;
  var isEmpty = !(dataPoints && dataPoints.length > 0);

  if (!isEmpty) {
    for (var i = 0; i < dataPoints.length; i++) {
      isEmpty = !dataPoints[i].y;
      if (!isEmpty)
        break;
    }
  }

  if (!chart.options.subtitles)
    chart.options.subtitles = [];
  if (isEmpty) {
    chart.options.subtitles.push({
      text: text,
      verticalAlign: 'center',
    });
    chart.options.data[0].showInLegend = false;
  } else {
    chart.options.subtitles = [];
    chart.options.data[0].showInLegend = true;
  }
}