I wrote a hack that shows/hides series by clicking on legend labels (hidden series are greyed out in the legend): http://jsfiddle.net/asgallant/6gz2Q/.
On Tuesday, June 4, 2013 11:01:32 AM UTC-4, A. Farber wrote: > > Hello! > > Is there please a possibility to blend out (hide) a line in Google Line > Chart<https://developers.google.com/chart/interactive/docs/gallery/linechart> > ? > > We have many line charts with multiple series of close data values and my > boss asks me to add a way to hide a series (preferably by clicking the line > or the legend with a mouse). > > I have added a *select *event listener to my very simple test case below > (just open it in a browser and it will work), but I'm not sure what to do > next: > > > > <https://lh3.googleusercontent.com/-Vt9Cze5OXKY/Ua4AyzixYiI/AAAAAAAAC-4/-XxLv5er0PA/s1600/hide.png> > > <!DOCTYPE HTML> > <html> > <head> > <script type="text/javascript" > src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js";></script> > <script type="text/javascript" > src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script> > <script type="text/javascript"> > > var data = {"L_B8_ACLR_50_0_QPSK_1_H":{"rows":[ > > {"c":[{"v":"UTRA_1_DOWN"},{"v":-42.9},{"v":-42.4},{"v":-80},{"v":-35}]}, > > {"c":[{"v":"E-UTRA_1_DOWN"},{"v":-49.4},{"v":-39.9},{"v":-80},{"v":-32}]}, > > {"c":[{"v":"E-UTRA_1_UP"},{"v":-48.9},{"v":-48.6},{"v":-80},{"v":-32}]}, > {"c":[{"v":"UTRA_1_UP"},{"v":-49.5},{"v":-49.4},{"v":-80},{"v":-35}]}, > > {"c":[{"v":"UTRA_2_UP"},{"v":-58.9},{"v":-58.9},{"v":-80},{"v":-38}]}], > > "cols":[{"p":{"role":"domain"},"label":"MEASUREMENT","type":"string"}, > {"p":{"role":"data"},"label":"Row A","type":"number"}, > {"p":{"role":"data"},"label":"Row B","type":"number"}, > {"p":{"role":"interval"},"label":"LSL","type":"number"}, > {"p":{"role":"interval"},"label":"USL","type":"number"}]}}; > > function drawCharts() { > for (var csv in data) { > var x = new google.visualization.DataTable(data[csv]); > > var options = { > title: csv, > width: 800, > height: 600 > }; > > var chart = new > google.visualization.LineChart(document.getElementById(csv)); > google.visualization.events.addListener(chart, 'select', > selectHandler); chart.draw(x, options); > } > } > function selectHandler(e) { > alert('How to hide a row in the chart?'); > } > > > $(function() { > google.setOnLoadCallback(drawCharts); > }); > > </script> > </head> > <body> > <div id="L_B8_ACLR_50_0_QPSK_1_H"></div> > </body> > </html> > > Regards > Alex > > PS: I've also asked this question at the > > http://stackoverflow.com/questions/16921097/hide-a-row-aka-series-in-google-chart > -- You received this message because you are subscribed to the Google Groups "Google Visualization API" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/google-visualization-api?hl=en. For more options, visit https://groups.google.com/groups/opt_out.
