Google Chart Tooltip Not Working

Question

I am currently working on Google Chart using ASP.NET and connecting it to the database (SQL Server). But I have a problem when trying to customize the tool tip.

Here

Answer 1

Adding to note.

note 5:

You can only modify tooltip if you use google.visualization like so:

new google.visualization.LineChart(divChart).draw(dataTable,options);

Not google.charts:

new google.charts.Line(divChart).draw(dataTable,options);

But, make sure to include theme: 'material' in the options of google.visualization to modernize the theme.

Answer 2

I need to give credit to Catherine Manzo on the Google Charts Form for figuring this out. Remove focusTarget from the chart Options and bingo!!

Catherine Manzo said: I finally went back and compared the html code for my new charts with ones made over the summer, when the tooltip worked. I realized there was an extra attribute in the newer code (focusTarget) and when I deleted it, the tooltip function began working again! The attribute to delete is highlighted in the code below:

chart.opts = {title:"Company Performance",titlePosition:"out",focusTarget:"default",colors:['#66CDAA','#E0FFFF'],pointShape:"circle",hAxis: {format:"$ #,###.##",textPosition:"default",title:"In Thousands",slantedText:true,viewWindowMode:"default"},tooltip:{isHtml:false}};

Answer 3

unfortunately, Column Roles, including tooltips, don't work with Material charts, only Core

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

Core --> packages: ['corechart'] + google.visualization.BarChart

you can use the following configuration option to get Core close to the look & feel of Material

theme: 'material'

note 1: when using a tooltip column, all of the tooltip content must be provided, it doesn't append anything to the default tooltip

see following working snippet...

google.charts.load('current', {
  callback: function () {
    // simulate data
    dataValues = [
      {
        customer: 'Customer A',
        percent_submitted: 10
      },
      {
        customer: 'Customer B',
        percent_submitted: 20
      },
      {
        customer: 'Customer C',
        percent_submitted: 30
      },
    ];

    drawchart(dataValues);
  },
  packages: ['corechart']
});

function drawchart(dataValues) {
    // Callback that creates and populates a data table,
    // instantiates the pie chart, passes in the data and
    // draws it.

    // Instantiate and draw our chart, passing in some options
    var chart = new google.visualization.BarChart(document.getElementById('BarChartsDIV'));
    var data = new google.visualization.DataTable();

    data.addColumn('string', 'customer');
    data.addColumn('number', 'percent_submitted')
    data.addColumn({type: 'string', role: 'tooltip'});


    for (var i = 0; i < dataValues.length; i++) {
        data.addRow([dataValues[i].customer,
        { v: dataValues[i].percent_submitted, f: dataValues[i].percent_submitted + '%'},
        dataValues[i].customer + '\nTEST TOOL TIP\n' + dataValues[i].percent_submitted + '%']);
    }

    var view = new google.visualization.DataView(data);
    view.setColumns([0, 1, 2]);

    chart.draw(view,
      {
          theme: 'material',
          tooltip: { isHtml: true},
          title: "",
          legend: { position: 'none' },
          bars: 'horizontal', // Required for Material Bar Charts.
          axes: {
              x: {
                  0: { side: 'top', label: '' }, // Top x-axis.
              },
              y: {
                  0: { label: '' } //Side y-axis
              }

          },
          bar: { groupWidth: '70%' },

      });
}

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

note 2: for HTML tooltips to work, you must include a column property

data.addColumn({type: 'string', role: 'tooltip', p: {html: true}});

see following working snippet...

google.charts.load('current', {
  callback: function () {
    // simulate data
    dataValues = [
      {
        customer: 'Customer A',
        percent_submitted: 10
      },
      {
        customer: 'Customer B',
        percent_submitted: 20
      },
      {
        customer: 'Customer C',
        percent_submitted: 30
      },
    ];

    drawchart(dataValues);
  },
  packages: ['corechart']
});

function drawchart(dataValues) {
    // Callback that creates and populates a data table,
    // instantiates the pie chart, passes in the data and
    // draws it.

    // Instantiate and draw our chart, passing in some options
    var chart = new google.visualization.BarChart(document.getElementById('BarChartsDIV'));
    var data = new google.visualization.DataTable();

    data.addColumn('string', 'customer');
    data.addColumn('number', 'percent_submitted')
    // include column property for html tooltips
    data.addColumn({type: 'string', role: 'tooltip', p: {html: true}});


    for (var i = 0; i < dataValues.length; i++) {
        data.addRow([dataValues[i].customer,
        { v: dataValues[i].percent_submitted, f: dataValues[i].percent_submitted + '%'},
        // need to include own styling as well
        '<div class="ggl-tooltip">' + dataValues[i].customer + '<div>TEST TOOL TIP</div><div>' + dataValues[i].percent_submitted + '%</div></div>']);
    }

    var view = new google.visualization.DataView(data);
    view.setColumns([0, 1, 2]);

    chart.draw(view,
      {
          theme: 'material',
          tooltip: { isHtml: true},
          title: "",
          legend: { position: 'none' },
          bars: 'horizontal', // Required for Material Bar Charts.
          axes: {
              x: {
                  0: { side: 'top', label: '' }, // Top x-axis.
              },
              y: {
                  0: { label: '' } //Side y-axis
              }

          },
          bar: { groupWidth: '70%' },

      });
}

.ggl-tooltip {
  border: 1px solid #E0E0E0;
  font-family: Arial, Helvetica;
  font-size: 12pt;
  padding: 12px 12px 12px 12px;
}

.ggl-tooltip div {
  padding-top: 6px;
}

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

note 3: as for Material charts, they show the formatted value (f:) by default, so you could add a bit of text there, or at the end of the column headings, which would be for all rows

see following working snippet...

google.charts.load('current', {
  callback: function () {
    // simulate data
    dataValues = [
      {
        customer: 'Customer A',
        percent_submitted: 10
      },
      {
        customer: 'Customer B',
        percent_submitted: 20
      },
      {
        customer: 'Customer C',
        percent_submitted: 30
      },
    ];

    drawchart(dataValues);
  },
  packages: ['bar']
});

function drawchart(dataValues) {
    // Callback that creates and populates a data table,
    // instantiates the pie chart, passes in the data and
    // draws it.

    // Instantiate and draw our chart, passing in some options
    var chart = new google.charts.Bar(document.getElementById('BarChartsDIV'));
    var data = new google.visualization.DataTable();

    data.addColumn('string', 'customer');
    data.addColumn('number', 'percent_submitted \n OTHER TOOLTIP TEXT FOR ALL ROWS')

    for (var i = 0; i < dataValues.length; i++) {
        data.addRow([dataValues[i].customer,
        { v: dataValues[i].percent_submitted, f: dataValues[i].percent_submitted + '% TEST TOOL TIP'}]);
    }

    var view = new google.visualization.DataView(data);
    view.setColumns([0, 1]);

    chart.draw(view,
      {
          tooltip: { isHtml: true},
          title: "",
          legend: { position: 'none' },
          bars: 'horizontal', // Required for Material Bar Charts.
          axes: {
              x: {
                  0: { side: 'top', label: '' }, // Top x-axis.
              },
              y: {
                  0: { label: '' } //Side y-axis
              }

          },
          bar: { groupWidth: '70%' },

      });
}

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

note 4: although not recommended, it is possible to modify the tooltip manually via SVG DOM, when the chart's 'ready' event fires...