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

I am using Google Visualization Bar Chart and I would like to custom开发者_运维知识库ize 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 ?

You can change the way the number is formatted by using the google.visualization.NumberFormat class.

var formatter = new google.visualization.NumberFormat({
    fractionDigits: 0,
    prefix: '$'
});

formatter.format(data, 1); // Apply formatter to second column.

If you need more flexibility, have a look at the PatternFormat class.

Here's the API reference.

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

I was trying to do a similar thing with a Google pie chart. With the original code, on mouseover, the tooltip was showing the label, the raw number, and the percentage.

The orignal code was:

data.setValue(0, 0, 'Christmas trees');

data.setValue(0, 1, 410000000);

And the tooltip would show "Christmas trees 410000000 4.4%."

To format the text, I added a line to the code, so it was:

data.setValue(0, 0, 'Christmas trees');

data.setValue(0, 1, 410000000);

data.setFormattedValue(0, 1, "$410 million");

The result was a tooltip that read, "Christmas trees $410 million 4.4%"

I hope this helps!

Google Chart not support format html tooltip LineChart, BarChart. I use:

google.visualization.events.addListener(chart, 'onmouseover', function(rowColumn){
                                myFunction();
                            });

in myFunction(): you can use popup to show more information.

There is a very easy way to do it, you just have to use one of the Formatters for the data:

// Set chart options
var options = {
hAxis: {format: 'MMM dd, y'}
};

// Format the data
var formatter = new google.visualization.DateFormat({pattern:'EEEE, MMMM d, y'});
formatter.format(data,0);

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

You simply format the axis differently from data format, since the data format will only show up when you mouseOver.

Looks like you are now able to customize tooltip text by adding a special column that has role: 'tooltip': https://developers.google.com/chart/interactive/docs/customizing_tooltip_content

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});
}

FYI, All:

Google added custom HTML/CSS tooltips in September 2012: https://google-developers.appspot.com/chart/interactive/docs/customizing_tooltip_content

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

The only way I found to disable it was to traverse the DOM in the hover handler (for pie charts anyway):

$(pie.Ac.firstElementChild.contentDocument.childNodes[0].childNodes[2].childNodes[1].firstChild.childNodes[2]).remove();

Which is hideous and subject to Google maintaining the structure that exists... is there a better way?

Take a look at DataTable Roles and the tooltip example: https://developers.google.com/chart/interactive/docs/roles

label: 'Year',   'Sales',         null,   'Expenses',         null
`role: domain,     data,       tooltip,         data,      tooltip`
     '2004',       1000,    '1M$ sales,          400,    '$0.4M expenses
                       in 2004'                     in 2004'
     '2005',       1170, '1.17M$ sales,          460,    '$0.46M expenses
                        in 2005'                    in 2005'
     '2006',        660,  '.66M$ sales,         1120,    '$1.12M expenses
                        in 2006'                    in 2006'
     '2007',       1030, '1.03M$ sales,          540,    '$0.54M expenses
                        in 2007'                    in 2007'

The null labels are used as tooltip for 'Sales' and 'Expenses' respectively.