Google Charts - empty bar chart message

60 views
Skip to first unread message

Roslyn O'Shea

unread,
Oct 31, 2018, 6:06:58 AM10/31/18
to Google Visualization API

New to google charts and my chart works as expected using JSONdata and a datatable. Is it possible if no data exists in the record set to display a message in the bar chart.

Using google example is it possible to add a 'No Data' message when there is no data at 12pm?


google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawMultSeries);

function drawMultSeries() {
      var data = new google.visualization.DataTable();
      data.addColumn('timeofday', 'Time of Day');
      data.addColumn('number', 'Motivation Level');
      data.addColumn('number', 'Energy Level');

      data.addRows([
        [{v: [8, 0, 0], f: '8 am'}, 1, .25],
        [{v: [9, 0, 0], f: '9 am'}, 2, .5],
        [{v: [10, 0, 0], f:'10 am'}, 3, 1],
        [{v: [11, 0, 0], f: '11 am'}, 4, 2.25],
        [{v: [12, 0, 0], f: '12 pm'}, 0, 0],
        [{v: [13, 0, 0], f: '1 pm'}, 6, 3],
        [{v: [14, 0, 0], f: '2 pm'}, 7, 4],
        [{v: [15, 0, 0], f: '3 pm'}, 8, 5.25],
        [{v: [16, 0, 0], f: '4 pm'}, 9, 7.5],
        [{v: [17, 0, 0], f: '5 pm'}, 10, 10],
      ]);

      var options = {
        title: 'Motivation and Energy Level Throughout the Day',
        hAxis: {
          title: 'Time of Day',
          format: 'h:mm a',
          viewWindow: {
            min: [7, 30, 0],
            max: [17, 30, 0]
          }
        },
        vAxis: {
          title: 'Rating (scale of 1-10)'
        }
      };

      var chart = new google.visualization.ColumnChart(
        document.getElementById('chart_div'));

      chart.draw(data, options);
    }
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <div id="chart_div"></div>


Rockabilly Dames

unread,
Nov 1, 2018, 7:48:35 AM11/1/18
to google-visua...@googlegroups.com
You could dynamically generate the message when you build/output the data to the page... in php it woul dbe something like:

if(sizeof($data)==0)
{
 build chart with title "No data available yet...."
}
else
{

}

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/9342e3e2-c77e-4d96-a731-61a3fd8e162b%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.


--
Sid Young
Sales & Marketing
Rockabilly Dames
E: sa...@rockabillydames.com
W: https://rockabillydames.com

PO Box 611 
Ashgrove 4060
Brisbane  Queesnland
Australia
Reply all
Reply to author
Forward
0 new messages