Use column as metadata in Google Charts -

Use column as metadata in Google Charts -

given next info (from google charts illustration page):

var info = ['year', 'sales', 'expenses'], ['2004', 1000, 400], ['2005', 1170, 460], ['2006', 660, 1120], ['2007', 1030, 540]

how can render line chart shows sales, on hover tooltip?

2006 sales: 660 expenses: 540

here jsbin:

http://jsbin.com/fefod/1/edit?html,js,output

essentially utilize 3rd column info specific info point, rather whole new series. i've read cold utilize "annotation" columns unsure how utilize them. in advance.

the way accomplish want utilize custom tooltips. can create dataview constructs these automatically you, eg:

function drawchart() { var info = 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); homecoming '<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 utilize html want in tooltips, , you'll want style them pretty them up.

as alternative solution, can draw chart both series, set options hide sec one. can set focustarget alternative 'category' show both series in tooltips @ same time:

series: { 1: { // hide series pointsize: 0, linewidth: 0, displayinlegend: false } }, focustarget: 'category'

google-visualization