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...
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>