With Google Charts, it is possible to have text annotations. I however require an image to be displayed.
Here's a JS fiddle (adapted from someone else's code) showing what I'm trying to do. /
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Value');
data.addColumn({type: 'string', role: 'annotation'});
data.addColumn({type: 'string', role: 'annotationText'});
data.addRows([
['Foo', 53, '<img src="bar.png"> Foo text', 'Foo description'],
['Bar', 71, 'Bar text', 'Bar description'],
['Baz', 36, 'Baz text', 'Baz description'],
['Cad', 42, 'Cad text', 'Cad description'],
['Qud', 87, 'Qud text', 'Qud description'],
['Pif', 64, 'Pif text', 'Pif description']
]);
Is this possible through annotations, or by other means? I need to use the line chart, so other methods would have to take this into account.
With Google Charts, it is possible to have text annotations. I however require an image to be displayed.
Here's a JS fiddle (adapted from someone else's code) showing what I'm trying to do. http://jsfiddle/Lgn4T/
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Value');
data.addColumn({type: 'string', role: 'annotation'});
data.addColumn({type: 'string', role: 'annotationText'});
data.addRows([
['Foo', 53, '<img src="bar.png"> Foo text', 'Foo description'],
['Bar', 71, 'Bar text', 'Bar description'],
['Baz', 36, 'Baz text', 'Baz description'],
['Cad', 42, 'Cad text', 'Cad description'],
['Qud', 87, 'Qud text', 'Qud description'],
['Pif', 64, 'Pif text', 'Pif description']
]);
Is this possible through annotations, or by other means? I need to use the line chart, so other methods would have to take this into account.
Share Improve this question asked Mar 20, 2014 at 10:24 user2964500user2964500 4-
Check
tooltip.isHtml
and enabling html tooltip... – Anto Jurković Commented Mar 20, 2014 at 10:35 - 1 A tooltip is only displayed when the user hovers over. I need annotations that are displayed all the time. – user2964500 Commented Mar 20, 2014 at 14:47
- 1 No, you cannot use images in the annotations. – asgallant Commented Mar 20, 2014 at 16:56
- My apologies, I spoke too soon. It seems that HTML support was added relatively recently, but is not yet documented. I will post an answer with an example shortly. – asgallant Commented Mar 20, 2014 at 18:54
1 Answer
Reset to default 6After some experimentation, I determined that you can add images to the annotations, but only to the annotationText
column.
In order to make the HTML annotations work, you must do two things: first, set the annotationText
column's html
property to true
, and then set the chart's tooltip.isHtml
property to true
, like this:
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Value');
data.addColumn({type: 'string', role: 'annotation'});
data.addColumn({type: 'string', role: 'annotationText', p: {html: true}});
data.addRows([
['Foo', 53, 'Foo text', '<img src="bar.png"> Foo description'],
['Bar', 71, 'Bar text', 'Bar description'],
['Baz', 36, 'Baz text', 'Baz description'],
['Cad', 42, 'Cad text', 'Cad description'],
['Qud', 87, 'Qud text', 'Qud description'],
['Pif', 64, 'Pif text', 'Pif description']
]);
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, {
height: 400,
width: 600,
tooltip: {
isHtml: true
}
});
See working example here: http://jsfiddle/asgallant/7w2Hz/