Google visualization API - Bar Chart / Line Chart - Custom Tooltip - charts

Question

How to format the tooltip text of Google Visualization Api based Line and Bar Charts.
I want custom text and images in the tooltip.
Thanks

Answer 1

Just drop this code into Google's Visualization playground as an example I'm using bar chart and editing the text of 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});
}

Answer 2

There seems to be some details on how to do this here
http://code.google.com/apis/chart/interactive/docs/examples.html
Scroll down to the bottom, its the last example.

Answer 3

Paste this at: https://code.google.com/apis/ajax/playground/?type=visualization#simple_dashboard
function drawVisualization() {
// Prepare the data
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Donuts eaten');
data.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});
data.addRows([
['Sven', 16, createCustomHTMLContent('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRnV6emFCNN90Nt-HQcd_x5umqdoSpagUp5fwOqc5QYnVpEHHF8', 16)],
['Kurt', 46, createCustomHTMLContent('http://173.199.167.192/customavatars/avatar296423_1.gif', 46)],
['Sofie', 27, createCustomHTMLContent('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSbv9ijKCwG3eJS9uUTxPzJ5F8zqYRAA5uRkyfz5lniC7TN8t96', 27)],
['Lisa', 29, createCustomHTMLContent('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQLZSgX1oDVc5psdBdqzG8oU-1vqTEIMXw-FDvoSLOg0oJ-0VLv', 29)],
['Lajla', 19, createCustomHTMLContent('http://static3.depositphotos.com/1001992/155/i/950/depositphotos_1550168-Portrait-of-a-beauty-young-female-face.jpg', 19)],
['Elsa', 38, createCustomHTMLContent('http://os1.i.ua/3/2/10725917_2535e604.jpg', 38)],
]);
function createCustomHTMLContent(flagURL, totalEaten) {
return '<div style="padding:5px 5px 5px 5px;">' +
'<img src="' + flagURL + '" style="width:75px;height:50px"/><br/>' +
'<table>' +
'<tr>' +
'<td><img src="http://2.bp.blogspot.com/-hPs6JLOBj4I/UTBQWNhHFaI/AAAAAAAABOQ/LROTO_TAYRQ/s72-c/donat-makanan-lemak-trans.jpg" style="width:25px;height:25px"/><td/>' +
'<td><b>' + totalEaten + '<b/><td/>' +
'<tr/>' +
'<table/>' +
'<div/>';
}
// Define a slider control for the 'Donuts eaten' column
var slider = new google.visualization.ControlWrapper({
'controlType': 'NumberRangeFilter',
'containerId': 'control1',
'options': {
'filterColumnLabel': 'Donuts eaten',
'ui': {'labelStacking': 'vertical'}
}
});
// Define a pie chart
var piechart = new google.visualization.ChartWrapper({
'chartType': 'ColumnChart',
'containerId': 'chart1',
'options': {
'width': 600,
'height': 300,
'legend': 'bottom',
'tooltip': {
'isHtml': true
},
'pieSliceText': 'value'
}
});
// Create the dashboard.
new google.visualization.Dashboard(document.getElementById('dashboard')).
// Configure the slider to affect the piechart
bind(slider, piechart).
// Draw the dashboard
draw(data);
}

Answer 4

Here you have some examples with tooltips
Link
So there is example with column chart:
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string', 'Country');
// Use custom HTML content for the domain tooltip.
dataTable.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});
dataTable.addColumn('number', 'Gold');
dataTable.addColumn('number', 'Silver');
dataTable.addColumn('number', 'Bronze');
dataTable.addRows([
['USA', createCustomHTMLContent('http://upload.wikimedia.org/wikipedia/commons/2/28/Flag_of_the_USA.svg', 46, 29, 29), 46, 29, 29],
['China', createCustomHTMLContent('http://upload.wikimedia.org/wikipedia/commons/f/fa/Flag_of_the_People%27s_Republic_of_China.svg', 38, 27, 23), 38, 27, 23],
['UK', createCustomHTMLContent('http://upload.wikimedia.org/wikipedia/commons/a/ae/Flag_of_the_United_Kingdom.svg', 29, 17, 19), 29, 17, 19]
]);
var options = {
title: 'London Olympics Medals',
colors: ['#FFD700', '#C0C0C0', '#8C7853'],
// This line makes the entire category's tooltip active.
focusTarget: 'category',
// Use an HTML tooltip.
tooltip: { isHtml: true }
};
// Create and draw the visualization.
new google.visualization.ColumnChart(document.getElementById('custom_html_content_div')).draw(dataTable, options);
}
function createCustomHTMLContent(flagURL, totalGold, totalSilver, totalBronze) {
return '<div style="padding:5px 5px 5px 5px;">' +
'<img src="' + flagURL + '" style="width:75px;height:50px"><br/>' +
'<table id="medals_layout">' + '<tr>' +
'<td><img src="http://upload.wikimedia.org/wikipedia/commons/1/15/Gold_medal.svg" style="width:25px;height:25px"/></td>' +
'<td><b>' + totalGold + '</b></td>' + '</tr>' + '<tr>' +
'<td><img src="http://upload.wikimedia.org/wikipedia/commons/0/03/Silver_medal.svg" style="width:25px;height:25px"/></td>' +
'<td><b>' + totalSilver + '</b></td>' + '</tr>' + '<tr>' +
'<td><img src="http://upload.wikimedia.org/wikipedia/commons/5/52/Bronze_medal.svg" style="width:25px;height:25px"/></td>' +
'<td><b>' + totalBronze + '</b></td>' + '</tr>' + '</table>' + '</div>';
}e