Google Column Chart Tooltip with ArrayToDataTable

Question

I am trying to show some texts for each series in a Google Bar Type chart.

The data I am using to create the chart is presented as below (perfectly working):

['Months', 'XXX', {type: 'string', role: 'tooltip'}, 'YYY', {type: 'string', role: 'tooltip'}, 'ZZZ', {type: 'string', role: 'tooltip'}, 'TTT', {type: 'string', role: 'tooltip'}], 
['Sep', 0, '00 h 00 m', 0, '00 h 00 m', 0, '00 h 00 m', 0, '00 h 00 m']
['Oct', 0, '00 h 00 m', 0, '00 h 00 m', 0, '00 h 00 m', 0, '00 h 00 m']
...

However, I can not manage to show the tooltip (or annotation, it doesn't matter).

I tried to load a lot of versions of Google packages. I currently use the following:

google.charts.load('visualization', '1',  {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {      
    var data = google.visualization.arrayToDataTable([
      ...
    ]);

    var options = {             
        height: 300,
        hAxis: {
          title: 'Time'
        },
        vAxis: {
          title: 'Flight Hours (min)'
        },
        title: 'Annual Statistics',                       
        bar: { groupWidth: '90%' },
    };


    var chart = new google.charts.Bar(document.getElementById('myPieChart'));
    chart.draw(data, google.charts.Bar.convertOptions(options));
  }

Could you please help me?

WhiteHat WhiteHat · Accepted Answer · 2018-08-13T19:01:52

Material charts do not support Column Roles

in order to provide annotations or custom tooltips, you must use a Classic chart

Material = google.charts.Bar -- packages: ['bar']

Classic = google.visualization.ColumnChart -- packages: ['corechart']

there is an option for making Classic look similar to Material...

theme: 'material'

see following working snippet...

google.charts.load('current', {
  packages:['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Months', 'XXX', {type: 'string', role: 'tooltip'}, 'YYY', {type: 'string', role: 'tooltip'}, 'ZZZ', {type: 'string', role: 'tooltip'}, 'TTT', {type: 'string', role: 'tooltip'}],
    ['Sep', 5, '00 h 00 m', 6, '00 h 00 m', 7, '00 h 00 m', 8, '00 h 00 m'],
    ['Oct', 5, '00 h 00 m', 6, '00 h 00 m', 7, '00 h 00 m', 8, '00 h 00 m']
  ]);

  var options = {
    height: 300,
    hAxis: {
      title: 'Time'
    },
    vAxis: {
      title: 'Flight Hours (min)'
    },
    title: 'Annual Statistics',
    bar: {groupWidth: '90%'},
    theme: 'material'
  };

  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  chart.draw(data, options);
});

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

note: jsapi should no longer be used to load the charts library,
according to the release notes...

The version of Google Charts that remains available via the jsapi loader is no longer being updated consistently. The last update, for security purposes, was with a pre-release of v45. Please use the new gstatic loader.js from now on.

this will only change the load statement, see above snippet...

Google Column Chart Tooltip with ArrayToDataTable

1 Answers