How to Customize the tooltip being displayed in Google Vislization charts - google-visualization

Question

Please see this jsfiddle , where i am displaying Candle stick Charts for a particular Stock .
The only change i need is that i want to customize the tool tip being shown .
I just want to display the close value of the particular day .
From google i found out that i need to add something like this to achive the behaviour needed
data.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});
But i dont see anything like data.addColumn in my code
Could you please tell me how to achieve this ??
http://jsfiddle.net/ovog4njt/5/

Answer 1

You're using arrayToDataTable(), so you're not individually adding the columns and rows, which is why your example doesn't make sense to you.
You can just do this:
var mydata = [
['13-Oct', 1097.95, 1113.45, 1109.95, 1132, 'tooltip'],
['14-Oct', 1095.6, 1101.15, 1113.45, 1117, 'content'],
['15-Oct', 1092.1, 1129.2, 1116, 1132, 'goes'],
['16-Oct', 1130, 1170.3, 1130, 1182.4, 'in'],
['19-Oct', 1144.5, 1162.15, 1174, 1182.2, 'here']
];
var data = google.visualization.arrayToDataTable(mydata, true);
data.setColumnProperty(5, 'role', 'tooltip');
JSFiddle
If you weren't using arrayToDataTable(), your code would look like this, which is where your example comes from.
var mydata = [
['13-Oct', 1097.95, 1113.45, 1109.95, 1132, 'tooltip'],
['14-Oct', 1095.6, 1101.15, 1113.45, 1117, 'content'],
['15-Oct', 1092.1, 1129.2, 1116, 1132, 'goes'],
['16-Oct', 1130, 1170.3, 1130, 1182.4, 'in'],
['19-Oct', 1144.5, 1162.15, 1174, 1182.2, 'here']
];
var data = new google.visualization.DataTable();
data.addColumn('string', 'Date');
data.addColumn('number', 'Low Err');
data.addColumn('number', 'Low');
data.addColumn('number', 'High');
data.addColumn('number', 'High Err');
data.addColumn({
type: 'string',
role: 'tooltip'
});
data.addRows(mydata);