Google Charts - full html in tooltips

Question

I am trying to make Google Charts Display custom tooltips with full HTML in them.

I know how to enable tooltips and pass appropriate data - the problem is - even when allowHTML option is enabled, the tooltips are rendered as plain text, so for example I can't show a picture in the tooltip.

Here is a little example of what I am going for:

What I have now:

What I want:

One way to solve this problem is to disable tooltips, capture onmouseover events and use another library (like cluetip) to display tooltips at cursor, but I was wondering if there is a cleaner, native way to enable this kind of functionality in Google Charts.

Also please check out my other question about images as point markers in google charts.

Edit:

In the meantime I found a very good and quite inexpensive (60$ per website license) library that covers this functionality : Highcharts library

As you can see in the example it is possible to pass a function that will format the tooltips - easily enough we could add a special property to each datapoint containig an url that could be used to dynammically load the tooltips content. The tooltips can then be cached by adding an extra property to each data point in a serie. I've implemented it this way and it works perfectly.

Hope the latest edit will help someone.

Peddada

Answer 1

Google gives an example here.

You will need to designate the column to be html tooltip:

data.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});

You will also need to pass the correct option to your chart:

tooltip: {isHtml: true}

I have tested this with line chart, and it works.

Edit: It also looks like (at least for line chart) you have to use the chart wrapper for this to work. I couldn't get it to obey the options without the wrapper.

Duisburg

This feature, HTML Tooltip, was recently released on 9/24/2012. (developers.google.com/chart/interactive/docs/…) – Varrian

Answer 2

This feature was incredibly obscure! The key for me, as noted earlier, was adding ", 'p': {'html': true}" when using 'addColumn()' to define a tooltip; the 'draw()' option 'tooltip: {isHtml: true}' alone is not enough.

It's very handy to use a function call to return the HTML string when creating the array of 'graphItems' that gets passed to 'addRows()':

function myToolTip(row) {
    return '<div style="white-space: nowrap; padding:5px;"><b>' + row.name + '</b><br>' +
        '$' + row.worth + ' B, <b>' + _scope.sortBy + '</b>: ' + row[_scope.sortBy] + '</div>';
}

var graphItems = [];
angular.forEach(_scope.ForbesList, function(row, key) {
    graphItems.push([key, row.worth, myToolTip(row)]);
});

var data = new google.visualization.DataTable();
data.addColumn('number', 'Rank');
data.addColumn('number', 'Worth');
data.addColumn({type: 'string', role: 'tooltip', 'p': {'html': true}});
data.addRows(graphItems);

More here: https://developers.google.com/chart/interactive/docs/customizing_tooltip_content#custom_html_content

Densitometer

Answer 3

This is currently working for me:

Step 1: be certain BOTH of these settings are in your chart options:

// This line makes the entire category's tooltip active.
focusTarget: 'category',
// Use an HTML tooltip.
tooltip: { isHtml: true }

Step 2: add your tooltip one of the chart columns:

dataTable.addColumn({'type': 'string', 'role': 'tooltip' , 'p': {'html': true}});

Step 3: In your data, add the HTML for your tooltip at the appropriate column:

chartReading.push(chartSensorTooltip(obsDate, reading[1]));

The method "chartSensorTooltip( date, number)" is a JS method I wrote myself to properly format the HTML for each values' tool tip. You don't need to write this sort of method, but as someone above suggested, doing so makes it very easy to format all the tooltips the same way.

The FocusTarget thing is what tripped me up. HTH someone!

Kropp

Wow! The "focusTarget" wasn't even on the horizon for me. It's just what i needed. – Emaciated

Answer 4

I had to add {p: {html: true}} to each row data instead of column, as well as isHtml option for the whole chart.

Stereograph