CODEWITHSUNDEEP
javascriptchartsgoogle-visualization
user5671367
user5671367

Reputation:

Tooltip customization not working for Google Charts

I'm trying to create custom tooltips for a Google Charts timeline chart, but I can't get my custom string to show up. The chart still displays the default tooltip.

  google.charts.load('current', {'packages':['timeline']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Team');
  data.addColumn('date', 'Season Start Date');
  data.addColumn('date', 'Season End Date');
  data.addColumn({type: 'string', role: 'tooltip'});

  data.addRows([
    ['Baltimore Ravens',     new Date(2000, 8, 5), new Date(2001, 1, 5), 'my tooltip'],
    ['New England Patriots', new Date(2001, 8, 5), new Date(2002, 1, 5), 'my tooltip'],
  ]);

  var options = {
    height: 450,
    timeline: {
      groupByRowLabel: true
    }
  };

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

  chart.draw(data, options);
}

Here is the Google Charts documentation: https://developers.google.com/chart/interactive/docs/customizing_tooltip_content

JSFiddle: https://jsfiddle.net/nt12ev9h/

What am I doing wrong?

Upvotes: 0

Views: 1176

Answers (1)

user5671367
user5671367

Reputation:

As mentioned by WhiteHat, my columns were out of order.

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Team');
  data.addColumn('string', 'Time');
  data.addColumn({type: 'string', role: 'tooltip'});
  data.addColumn('date', 'Season Start Date');
  data.addColumn('date', 'Season End Date');

  data.addRows([
    ['Baltimore Ravens',  '', 'my tooltip',   new Date(2000, 8, 5), new Date(2001, 1, 5)],
    ['New England Patriots', '', 'my tooltip', new Date(2001, 8, 5), new Date(2002, 1, 5)],
  ]);

Updated JSFiddle: https://jsfiddle.net/nt12ev9h/2/

Upvotes: 2

Related Questions