How to customize tooltips(text and Format) in Google Vizualization Bar Charts?

user_144012 0
Viewed 31611

I am using Google Visualization Bar Chart and I would like to customize or change the tooltip text and format that appears when clicking on a bar.

I have been through documentation but I didn't find a way to implement this. Do you know:

  1. Is it even possible?
  2. If so, could you provide some code examples ?
google-visualization charts ajax
11 Answers

Create a new data type for what you want in the tool tip:

var data = new google.visualization.DataTable();
data.addColumn('string', 'Game');
data.addColumn('number', 'Transactions');
data.addColumn({type:'string', role:'tooltip'}); // here is the tooltip line

Now add the info that you want in your tooltip to you data:

['$FormatedWeekday', $SalesAll,'$ToolTip']
['$FormatedWeekday', $SalesAll,'$ToolTip']
['$FormatedWeekday', $SalesAll,'$ToolTip']

You will loose all the default data in your toll tip so you might want you re-package it:

$ToolTip = ''.$FormatedWeekday.' \u000D\u000A '.$SalesAll.' \u000D\u000A '."Red Cross  Event";

the "\u000D\u000A" forces a line break

user_12535660

Another way to do it is by adding another column to your data that will act as the tooltip.

function drawVisualization() {
    data = new google.visualization.DataTable()
    data.addColumn('string', 'Date');
    data.addColumn('number');
    data.addColumn({type:'string',role:'tooltip'});
    data.addRow();
    base = 10;
    data.setValue(0, 0, 'Datapoint1');
    data.setValue(0, 1, base++);
    data.setValue(0, 2, " This is my tooltip1 ");

    data.addRow();
    data.setValue(1, 0, 'Datapoint2');
    data.setValue(1, 1, base++);
    data.setValue(1, 2, "This is my second tooltip2");

    // Draw the chart.
    var chart = new google.visualization.BarChart(document.getElementById('visualization'));
    chart.draw(data, {legend:'none', width:600, height:400});
}
user_6068740

I was also looking for the same option. Seems like there isn't any direct way. But we can disable the default tooltip and popup our own version using SelectHandler. Do let us know if you have figured out a more better/direct way. Thanks

user_2595850
Related