javascript - How to display "No Data" message in the middle of chart area in column chart

Question

I am using ng-google-charts.js library to display a column chart.

If we have data then the column chart will render like this.Column Chart with data

If we don't have any data to display then the column chart should be rendered like this. Columns Chart with out data

I spent lot of time to find out the solution. But endup with no solution.

Can someone please help me on how to achieve this?

Answer 1

you could use an annotation to display No Data Copy

basically, check if the data table is empty
if so, add a row for the annotation
use an empty string so no label appears on the x-axis
use 0 as the value, so there is something to 'annotate'

if (emptyData.getNumberOfRows() === 0) {
  emptyData.addRows([
    ['', 0, null, 'No Data Copy']
  ]);
}

then change the annotation.stem to be 'transparent'
and increase the length so that it appears in the middle of the chart

annotations: {
  stem: {
    color: 'transparent',
    length: 120
  }
}

if you don't want annotations when data is present,
set the annotation column value to null

see following working snippet, two charts are drawn to show the chart both with and without data

google.charts.load('current', {
  callback: function () {
    // create empty data table
    var emptyData = new google.visualization.DataTable({
      cols: [
        {label: 'Element', type: 'string'},
        {label: 'Density', type: 'number'},
        {role: 'style', type: 'string'},
        {role: 'annotation', type: 'string'}
      ]
    });
    var withData = emptyData.clone();

    var options = {
      // set annotation for -- No Data Copy
      annotations: {
        // remove annotation stem and push to middle of chart
        stem: {
          color: 'transparent',
          length: 120
        },
        textStyle: {
          color: '#9E9E9E',
          fontSize: 18
        }
      },
      bar: {groupWidth: '95%'},
      height: 400,
      legend: {position: 'none'},
      vAxis: {
        viewWindow: {
          min: 0,
          max: 30
        }
      },
      width: 600
    };

    // if no data add row for annotation -- No Data Copy
    if (emptyData.getNumberOfRows() === 0) {
      emptyData.addRows([
        ['', 0, null, 'No Data Copy']
      ]);
    }

    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div_0'));
    chart.draw(emptyData, options);

    withData.addRows([
      ['Copper', 8.94, '#b87333', null],
      ['Silver', 10.49, 'silver', null],
      ['Gold', 19.30, 'gold', null],
      ['Platinum', 21.45, 'color: #e5e4e2', null]
    ]);

    chart = new google.visualization.ColumnChart(document.getElementById('chart_div_1'));
    chart.draw(withData, options);
  },
  packages: ['corechart']
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div_0"></div>
<div id="chart_div_1"></div>