Wednesday, April 18, 2012

Tooltips for a Google Visualization API stacked chart?

I'd like to add some custom text to the tooltips on a Google Visualization API. I'm using a stacked chart for percentages, and I'd like to add some extra values for raw numbers that will only be displayed in the tooltips, without affecting the chart itself.



This is my current code:



  var dt = new google.visualization.DataTable(
{
cols: [{id: 'Year', label: 'year', type: 'string'},
{id: 'Golf', label: '% time on golf', type: 'number'},
{id: 'Soccer', label: '% time on soccer', type: 'number'},
],
rows: [{c:[{v: '1996'}, {v: 11}, { v: 10} ]},
{c:[{v: '1997'}, {v: 2}, { v: 10} ]},
{c:[{v: '1998'}, {v: 2}, { v: 10} ]},
{c:[{v: '1999'}, {v:2}, { v: 10} ]},
{c:[{v: '2000'}, {v:7, f:'7.000'}, { v: 10} ]}
]
},
0.6
)
var ac = new google.visualization.AreaChart(document.getElementById('visualization'));
ac.draw(dt, {
isStacked: true,
width: 600,
height: 400,
vAxis: {title: "% of time"},
hAxis: {title: "Year"}
});


How can I add raw data numbers and extra tooltips, so that when I mouseover golf for 1996 (say), it will show me another number as well?



I was hoping I could change the rows to be something like this:



rows: [{c:[{v: '1996'}, {v: 11, raw_value: 17}, { v: 10, raw_value: 16} ]},


And then specify the content of the tooltip to include raw_value as well.





No comments:

Post a Comment