Adding additional information to tooltip on line chart

Brian Cleere

unread,

Sep 4, 2014, 9:37:53 AM9/4/14

to google-visua...@googlegroups.com

Hi guys,

I'm new to the visualization API and I've searched for information on this prior to posting.

I'm plotting the graph below, but am looking to add additional information to the tooltip that is shown when a user hovers over a point.

So for example, instead of the tooltip just showing:

"Jan
2011: 104.0"

I would like the tooltip to display something like:

"Jan
2011: 104.0

Notes:
The reason why the figure is 104.0 is because of X, Y, Z..."

Any help or guidance is very much appreciated.

Thanks

Brian

CODE

<html>

<head>

google.load("visualization", "1", {packages:["corechart"]});

google.setOnLoadCallback(drawChart);

function drawChart() {

var data = google.visualization.arrayToDataTable([

['Month', '2011', '2012', '2013', '2014'],

['Jan', 104.0, 107.6, 111.0, 133.6],

['Feb', 109.7, 106.3, 111.0, 133.5],

['Mar', 108.8, 106.0, 114.5, 131.5],

['Apr', 110.4, 96.7, 120.6, 128.7],

['May', 109.7, 95.1, 124.7, 123.9],

['Jun', 109.7, 94.9, 126.6, 121.5],

['Jul', 109.0, 91.8, 130.3, null],

['Aug', 106.9, 98.0, 133.5, null],

['Sep', 107.0, 104.9, 133.7, null],

['Oct', 107.6, 106.4, 131.1, null],

['Nov', 108.3, 109.1, 131.9, null],

['Dec', 107.6, 111.1, 133.6, null]

]);

var options = {

title: 'Draft Graph'

};

var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

chart.draw(data, options);

}

</script>

</head>

<body>

</body>

</html>

Sergey Grabkovsky

unread,

Sep 4, 2014, 10:06:06 AM9/4/14

to google-visua...@googlegroups.com

Hi Brian, unfortunately there's no automated way to do this. You only option is to use HTML tooltips and create the entire tooltip as an HTML string.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

Brian Cleere

unread,

Sep 8, 2014, 10:24:41 AM9/8/14

to google-visua...@googlegroups.com

Hi Sergey,

Thanks for getting back to me. Would you be able to direct me to a sample of these type of tooltips if possible that I could adapt?

Thanks again,

Brian

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.

Sergey Grabkovsky

unread,

Sep 8, 2014, 10:30:39 AM9/8/14

to google-visua...@googlegroups.com

Here is a simple example: http://jsfiddle.net/aSRUx/346/

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.

Brian Cleere

unread,

Sep 8, 2014, 10:38:40 AM9/8/14

to google-visua...@googlegroups.com

Hi Sergey

Thanks a million for the help. Really appreciate it - will use this to amend my graph.

Thanks again

Brian

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/R0Arw0LlqN8/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

Andrew Bailey

unread,

Dec 11, 2014, 11:12:24 AM12/11/14

to google-visua...@googlegroups.com

I was seeking an answer to this question but I wasn't expecting having to manually put the value in the tooltip. In the example here (https://google-developers.appspot.com/chart/interactive/docs/customizing_tooltip_content#custom_html_content) for custom HTML content they seem to have created variables totalGold, totalSilver and totalBronze that allows the showing of the total within the tooltip but I don't understand how they are getting it to pass the value to those variables.

Sergey Grabkovsky

unread,

Dec 11, 2014, 11:26:50 AM12/11/14

to google-visua...@googlegroups.com

Hi Andrew,

Google Charts don't support functions in our options, which means that we can't just provide a mechanism where you specify a function to calculate the tooltip text. This in turn means that you need to precalculate your tooltips, and put them in your DataTable.

In the example you gave, the values are passed to the function createCustomHTMLContent, but those values aren't based off of any data. The values are hardcoded into the function call, which isn't ideal and doesn't really apply to real world use cases. In reality, if you wanted to use a function like createCustomHTMLContent, you would probably do so with a DataView and a calculated column. It's primarily used as an example, and our examples assume that you understand how function declarations and calls work. I put one of the rows below and bolded the values being passed to the function. If you'll notice, the values are listed twice: once to show up on the chart, and another time to pass to the tooltip.

['USA', createCustomHTMLContent('http://upload.wikimedia.org/wikipedia/commons/2/28/Flag_of_the_USA.svg', 46, 29, 29), 46, 29, 29],

Hopefully this helps you.

On Thu Dec 11 2014 at 11:12:27 AM Andrew Bailey <rcba...@fallenturtle.com> wrote:

I was seeking an answer to this question but I wasn't expecting having to manually put the value in the tooltip. In the example here (https://google-developers.appspot.com/chart/interactive/docs/customizing_tooltip_content#custom_html_content) for custom HTML content they seem to have created variables totalGold, totalSilver and totalBronze that allows the showing of the total within the tooltip but I don't understand how they are getting it to pass the value to those variables.

--

Reply all

Reply to author

Forward