Tooltips for multiple lines Google Line Chart
I am wondering if anyone knows how you would go about adding tooltips to multiple lines of data with Google Line Charts using DataTable, addColumn and addRow?
I've seen it done using other methods, but that is quite hard in my project and I feel like dumbass for not figuring this out. Anyways, I've dumbed down my code to present the essentials of my problem.
As you see, the tooltip shows for Line 2, but not for Line 1. My question is this: How do I add a tooltip to Line 1 using this method? My code: http://jsfiddle.net/Qquse/550/
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'y');
data.addColumn('number', 'Line 1');
data.addColumn('number', 'Line 2');
data.addColumn({type: 'string', role: 'tooltip'});
data.addRow([1, 1, 2, "Some fancy tooltip"]);
data.addRow([2, 2, 4, "Some fancy tooltip"]);
data.addRow([3, 3, 6, "Some fancy tooltip"]);
data.addRow([4, 4, 8, "Some fancy tooltip"]);
data.addRow([5, 5, 10, "Some fancy tooltip"]);
var options = {
title: 'Graph'
};
var chart = new google.visualization.LineChart(document.getElementById('chart'));
chart.draw(data, options);
}
google.load("visualization", "1", {packages: ["corechart"]});
google.setOnLoadCallback(drawChart);
</script>
</head>
<body>
<div id="chart"></div>
</body>
</html>
Answer
I tried adding both DataColumns first, then the tooltips. Turns out it had to be in this order:
data.addColumn('number', 'y');
data.addColumn('number', 'Line 1');
data.addColumn({type: 'string', role: 'tooltip'});
data.addColumn('number', 'Line 2');
data.addColumn({type: 'string', role: 'tooltip'});
instead of
data.addColumn('number', 'y');
data.addColumn('number', 'Line 1');
data.addColumn('number', 'Line 2');
data.addColumn({type: 'string', role: 'tooltip'});
data.addColumn({type: 'string', role: 'tooltip'});
Updated working fiddle: http://jsfiddle.net/Qquse/1207/