javascriptchartsgoogle-visualization

adding tooltips to google visualization bar chart


I'm trying to add custom tooltips to a Google Bar Chart, but I can't figure out how to do this. Google provides a nice tutorial (at https://developers.google.com/chart/interactive/docs/customizing_tooltip_content), but it only discusses ColumnCharts, rather than Bar Charts.

Here's what my code looks like:

<div id="top_x_div" style="width: 900px; height: 500px;"></div>
google.load("visualization", "1.1",{packages:["bar"]});
google.setOnLoadCallback(drawStuff0);

function drawStuff0() {
   var data = new google.visualization.arrayToDataTable([$data]);
   var options = {
       title: 'Categories',
       width: 900,
       legend: { position: 'none' },
       chart: { title: 'popularity by number of queries',
                subtitle: 'Number of times a category was queried' },
       bars: 'horizontal', // Required for Material Bar Charts.
       axes: {
                x: {
                    0: { side: 'top', label: 'Number of times a category was queried'} // Top x-axis.
                }
             },
       bar: { groupWidth: "90%" }
   };

   var chart = new google.charts.Bar(document.getElementById('top_x_div0'));

   // Convert the Classic options to Material options.
   chart.draw(data, google.charts.Bar.convertOptions(options));
};

$data is simply a PHP variable containing the rows of the chart.

Could someone explain how to add a custom tooltip to this chart? I've looked all over the web for a solution, I haven't been able to find one...


Solution

  • Add a new column to the DataTable object with the role tooltip :

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

    Then loop through data and add whatever tooltip you want (example from the one column bar chart fiddle below) for each row :

    for (var i=0; i<data.getNumberOfRows(); i++) {
       data.setValue(i, 2, 'Tooltip #'+i);
    }
    

    demo -> http://jsfiddle.net/pc3zmb8w/

    I cannot guide you more exactly since we dont know what your PHP $data is or how your chart looks like. But this is basically how you should do it, in all cases, when you want to add custom tooltips to a chart dynamically ...


    Update - styling the tooltip

    As for "is there a way to have the tool-tips appear as a rectangle, rather than a speech blurb", in the options - set tooltip as isHtml :

    var options = {
        tooltip: {isHtml: true} 
    }
    

    Then the tooltip appears as a rectangle like normal HTML-element tooltips. You can also specify that you want to use HTML inside the tooltip itself :

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

    For example to show the tooltip with the colors of a normal tooltip, but using a larger fontsize and a certain font :

    div.tooltip {
        background-color: #ffffca;
        color: #000023;
        padding: 10px;
        font-size: 20px;
        font-family : 'arial';
    }
    

    Set the tooltip as in original answer :

    data.setValue(i, 2, '<div class="tooltip">Tooltip #'+i+'</div>');
    

    function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['x', 'Cats'],
        ['A', 1],
        ['B', 2],
        ['C', 4],
        ['D', 8],
        ['E', 7],
        ['F', 7],
        ['G', 8],
        ['H', 4]
      ]);
    
      data.addColumn({
        type: 'string',
        role: 'tooltip',
        p: {
          'html': true
        }
      });
      for (var i = 0; i < data.getNumberOfRows(); i++) {
        data.setValue(i, 2, '<div class="tooltip">Tooltip #' + i + '</div>');
      }
    
      var options = {
        title: 'Test chart',
        tooltip: {
          isHtml: true
        }
      };
    
      var chart = new google.visualization.BarChart(document.getElementById('chart'));
      chart.draw(data, options);
    
    }
    
    google.load("visualization", "1", {
      packages: ["corechart"]
    });
    google.setOnLoadCallback(drawChart);
    #chart {
      width: 500px;
      height: 500px;
    }
    
    div.tooltip {
      background-color: #ffffca;
      color: #000023;
      padding: 10px;
      font-size: 20px;
      font-family: 'arial';
    }
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <div id="chart"></div>