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

Question

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 ?

Answer 1

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.

Answer 2

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