Menu
I'm trying to make a google line chart with 2 lines in it.
You should be able to turn them on and off(show/hide) by two checkboxes..
Anyone got any idea show to make this, og just give some pointers?
My guess would be some onClick jQuery stuff?
<html> <head> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("visualization", "1", {packages:["corechart"]}); google.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Year', 'Sales', 'Expenses'], ['2004', 1000, 400], ['2005', 1170, 460], ['2006', 660, 1120], ['2007', 1030, 540] ]); var options = { title: 'Company Performance' }; var chart = new google.visualization.LineChart(document.getElementById('chart_div')); chart.draw(data, options); } </script> </head> <body> <div id="chart_div" style="width: 900px; height: 500px;"></div> </body> </html> 
480
To hide the legend in Google Chart with JavaScript, we set the legend property to 'none' . const options = { //... legend: "none", }; to set legend to 'none' in the options object to hide the legend.
try this
Mark up:
<body> <div id="chart_div" style="width: 900px; height: 500px;"></div> <button type="button" id="hideSales" >Hide Sales</button> <button type="button" id="hideExpenses" >Hide Expence</button> </body> Script:
<script type="text/javascript"> google.load("visualization", "1", {packages:["corechart"]}); google.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Year', 'Sales', 'Expenses'], ['2004', 1000, 400], ['2005', 1170, 460], ['2006', 660, 1120], ['2007', 1030, 540] ]); var options = { title: 'Company Performance' }; var chart = new google.visualization.LineChart(document.getElementById('chart_div')); chart.draw(data, options); var hideSal = document.getElementById("hideSales"); hideSal.onclick = function() { view = new google.visualization.DataView(data); view.hideColumns([1]); chart.draw(view, options); } var hideExp = document.getElementById("hideExpenses"); hideExp.onclick = function() { view = new google.visualization.DataView(data); view.hideColumns([2]); chart.draw(view, options); } } </script> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
