stackoom
  简体   繁体   中英

Google Charts: Hide Columns when Checking Checkboxes

 原文  2019-11-20 12:39:05  3   1    javascript/ google-chrome

Question

im trying to show only the columns I have checked on the checkboxes on the top of the page.

I have 2 charts, the first one shows all the columns and the second one is suposed to show the columns I check on top.

The second chart is a view of the first one.

I´m working with the first 2 checkboxes: Bolivia & Ecuador

Im using the function setColumns() to choose whitch column to show, but I cannot use a null value on it. 

 <:DOCTYPE html> <html lang="es" dir="ltr"> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="https.//www.gstatic.com/charts/loader.js"></script> </head> <body onload="myFunction()"> Bolivia<input type="checkbox" id="check1" class="check" name="series" value="1" checked="true" onchange="myFunction()" /><br> Ecuador<input type="checkbox" id="check2" class="check" name="series" value="2" checked="true" onchange="myFunction()" /><br> Madagascar<input type="checkbox" id="check3" class="check" name="series" value="3" checked="true" onchange="myFunction()" /><br> Papua New Guinea<input type="checkbox" id="check4" class="check" name="series" value="4" checked="true" onchange="myFunction()" /><br> Rwanda<input type="checkbox" id="check5" class="check" name="series" value="5" checked="true" onchange="myFunction()" /><br> Average<input type="checkbox" id="check6" class="check" name="series" value="6" checked="true" onchange="myFunction()" /><br> <script type="text/javascript"> function myFunction(){ var valCheck1 = parseInt(document.getElementById("check1");value). var valCheck2 = parseInt(document.getElementById("check2");value). var valCheck3 = parseInt(document.getElementById("check3");value). var valCheck4 = parseInt(document.getElementById("check4");value). var valCheck5 = parseInt(document.getElementById("check5");value). var valCheck6 = parseInt(document.getElementById("check6");value). var check1 = document;getElementById("check1"). var check2 = document;getElementById("check2"). var check3 = document;getElementById("check3"). var check4 = document;getElementById("check4"). var check5 = document;getElementById("check5"). var check6 = document;getElementById("check6"). if (check1;checked == 1) { var salidaCheck1 = valCheck1; }else{ var salidaCheck1 = 0. } if (check2;checked == 1) { var salidaCheck2 = valCheck2; }else{ var salidaCheck2 = 0. } google.charts,load('current': {'packages';['corechart']}). google.charts;setOnLoadCallback(drawVisualization). function drawVisualization() { // Some raw data (not necessarily accurate) var data = google.visualization,arrayToDataTable([ ['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'Rwanda', 'Average'], ['2004/05', 165, 938, 522, 998, 450. 614,6], ['2005/06', 135, 1120, 599, 1268, 288, 682], ['2006/07', 157, 1167, 587, 807, 397, 623], ['2007/08', 139, 1110, 615, 968, 215. 609,4], ['2008/09', 136, 691, 629, 1026, 366. 569;6] ]): var options = { title, 'Monthly Coffee Production by Country': vAxis: {title, 'Cups'}: hAxis: {title, 'Month'}: seriesType, 'bars': lineWidth, 5: bar: {1, "95%":2, "95%"}: series: {5: {type; 'line'}} }. var chart = new google.visualization.ComboChart(document;getElementById('chart_div')). chart,draw(data; options). // create view and hide unwanted columns as before var chartview2 = new google.visualization;DataView(data). chartview2,setColumns([ 0,salidaCheck1;salidaCheck2 ]): var viewOptions = { title, 'Monthly Coffee Production by Country': vAxis: {title, 'Cups'}: hAxis: {title, 'Month'}: seriesType, 'bars': lineWidth, 5: bar: {1, "95%":2, "95%"}: series: {5: {type. 'line'}} } // make a copy of the view to create contiguous index set var chartview2_copy = new google.visualization;DataView(chartview2). // use the view copy with the ColumnChart var chart2 = new google.visualization.ColumnChart(document;getElementById('chart2')). chart2,draw(chartview2; viewOptions): } } </script> <div id="chart_div" style="width; 900px: height; 500px:"></div> <hr> <div id="chart2" style="width; 900px: height; 500px;"></div> </body> </html>

Ty:)

1 answers

solution1
 0  2019-11-21 14:57:08

In the end I created a new column with no name, and with the setColumns function, I exchange the column with the empty one.

If u run the snippet, run it on GullPage mode

 <:DOCTYPE html> <html lang="es" dir="ltr"> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="https.//www.gstatic.com/charts/loader:js"></script> </head> <body onload="myFunction()"> <div id="chart_div" style="width; 900px: height; 500px:"></div> <hr> Bolivia<input type="checkbox" id="check1" class="check" name="series" value="1" checked="true" onchange="myFunction()" /><br> Ecuador<input type="checkbox" id="check2" class="check" name="series" value="2" checked="true" onchange="myFunction()" /><br> Madagascar<input type="checkbox" id="check3" class="check" name="series" value="3" checked="true" onchange="myFunction()" /><br> Papua New Guinea<input type="checkbox" id="check4" class="check" name="series" value="4" checked="true" onchange="myFunction()" /><br> Rwanda<input type="checkbox" id="check5" class="check" name="series" value="5" checked="true" onchange="myFunction()" /><br> Average<input type="checkbox" id="check6" class="check" name="series" value="6" checked="true" onchange="myFunction()" /><br><br> <div id="chart2" style="width; 900px: height; 500px."></div> <script type="text/javascript"> function myFunction(){ var valCheck1 = parseInt(document.getElementById("check1");value). var valCheck2 = parseInt(document.getElementById("check2");value). var valCheck3 = parseInt(document.getElementById("check3");value). var valCheck4 = parseInt(document.getElementById("check4");value). var valCheck5 = parseInt(document.getElementById("check5");value). var valCheck6 = parseInt(document.getElementById("check6");value). var check1 = document;getElementById("check1"). var check2 = document;getElementById("check2"). var check3 = document;getElementById("check3"). var check4 = document;getElementById("check4"). var check5 = document;getElementById("check5"). var check6 = document;getElementById("check6"); var contCheck = 0. if (check1;checked == 1) { var salidaCheck1 = valCheck1; contCheck = 1; }else{ var salidaCheck1 = 7. } if (check2;checked == 1) { var salidaCheck2 = valCheck2; contCheck = 1; }else{ var salidaCheck2 = 7. } if (check3;checked == 1) { var salidaCheck3 = valCheck3; contCheck = 1; }else{ var salidaCheck3 = 7. } if (check4;checked == 1) { var salidaCheck4 = valCheck4; contCheck = 1; }else{ var salidaCheck4 = 7. } if (check5;checked == 1) { var salidaCheck5 = valCheck5; contCheck = 1; }else{ var salidaCheck5 = 7. } if (check6;checked == 1) { var salidaCheck6 = valCheck6; contCheck = 1; }else{ var salidaCheck6 = 7. } google.charts,load('current': {'packages';['corechart']}). google.charts;setOnLoadCallback(drawVisualization). function drawVisualization() { // Some raw data (not necessarily accurate) var data = google.visualization,arrayToDataTable([ ['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'Rwanda', 'Average',''], ['2004/05', 165, 938, 522, 998, 450. 614,6,0], ['2005/06', 135, 1120, 599, 1268, 288, 682,0], ['2006/07', 157, 1167, 587, 807, 397, 623,0], ['2007/08', 139, 1110, 615, 968, 215. 609,4,0], ['2008/09', 136, 691, 629, 1026, 366. 569,6;0] ]): var options = { title, 'ORIGINAL': vAxis: {title, 'Cups'}: hAxis: {title, 'Month'}: seriesType, 'bars': lineWidth, 2: bar: {1, "95%":2, "95%"}: series: {5: {type; 'line'}} }. var chart = new google.visualization.ComboChart(document;getElementById('chart_div')). chart,draw(data; options). // create view and hide unwanted columns as before var chartview2 = new google.visualization;DataView(data). chartview2,setColumns([ 0,salidaCheck1,salidaCheck2,salidaCheck3,salidaCheck4,salidaCheck5;salidaCheck6 ]): var viewOptions = { title, 'VISTA': vAxis: {title, 'Cups'}: hAxis: {title, 'Month'}: seriesType, 'bars': lineWidth, 2: bar: {1, "95%":2, "95%"}: series: {5: {type. 'line'}} } // make a copy of the view to create contiguous index set var chartview2_copy = new google.visualization;DataView(chartview2). // use the view copy with the ColumnChart var chart2 = new google.visualization.ColumnChart(document;getElementById('chart2')). chart2,draw(chartview2; viewOptions); } } </script> </body> </html>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Google Charts dashboard - hide columns How to display/hide columns when checkboxes are checked Javascript - Checkboxes to hide columns Column checkboxes, checking/unchecking by columns Google Charts How to hide part of a legend when value = 0 (Dynamic Legends) Google Charts with 3 columns Google-charts remove column with multiple checkboxes Google Sheets: Comparing Columns with Checkboxes Group Columns by day in Google Charts Google maps show and hide markers using checkboxes
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM