Use column as metadata in Google Charts - google-visualization

Question

Given the following data (from Google Charts example page):
var data = ['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
How can I render just a line chart that shows sales, but on hover I get this tooltip?
2006
Sales: 660
Expenses: 540
Here is the jsbin:
http://jsbin.com/fefod/1/edit?html,js,output
Essentially I would like to use the third column as extra data for that specific data point, rather than a whole new series. I've read that I cold use "annotation" columns but unsure how I could use them. Thanks in advance.

Answer 1

The way to achieve what you want is to use custom tooltips. You can create a DataView that constructs these automatically for you, eg:
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
var options = {
title: 'Company Performance',
tooltip: {
isHtml: true
}
};
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
type: 'string',
role: 'tooltip',
properties: {
html: true
},
calc: function (dt, row) {
var year = dt.getFormattedValue(row, 0),
sales = dt.getFormattedValue(row, 1),
expenses = dt.getFormattedValue(row, 2);
return '<div class="tooltip"><span class="tooltipHeader">Year</span>: ' + year + '<br /><span class="tooltipHeader">Sales</span>: ' + sales + '<br /><span class="tooltipHeader">Expenses</span>: ' + expenses + '</div>';
}
}]);
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(view, options);
}
You can use any HTML you want in the tooltips, and you'll probably want to style them as well to pretty them up.
As an alternative solution, you can draw the chart with both series, but set the options to hide the second one. Then you can set the focusTarget option to 'category' to show both series in the tooltips at the same time:
series: {
1: {
// hide this series
pointSize: 0,
lineWidth: 0,
displayInLegend: false
}
},
focusTarget: 'category'

Answer 2

Multiple data selections can be rolled up into tooltips using 'aggregationtarget'
an example is given below
var options = {
// Allow multiple simultaneous selections.
selectionMode: 'multiple',
// Trigger tooltips on selections.
tooltip: { trigger: 'selection' },
// Group selections by x-value.
aggregationTarget: 'category',
};
More details: https://developers.google.com/chart/interactive/docs/gallery/linechart#Configuration_Options