Question

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.

Answer 1

Just found the answer to my own question, I’ll write it up here in case anyone else has the same problem (and to save others the bother).

The answer is close to what I was hoping: use f in rows to supply a formatted value for the tooltip. Like this:

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