javascript - Tooltips for multiple lines Google Line Chart -
i wondering if knows how go adding tooltips multiple lines of data google line charts using datatable, addcolumn , addrow?
i've seen done using other methods, quite hard in project , feel dumbass not figuring out. anyways, i've dumbed down code present essentials of problem.
as see, tooltip shows line 2, not line 1. question this: how add tooltip line 1 using method? 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>
i tried adding both datacolumns first, tooltips. turns out had in 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/
Comments
Post a Comment