[visualization-api] Re: Hide a row (aka series) in Google chart

Tue, 03 Sep 2013 05:26:02 -0700 

Hello Damien,

Andrews code has worked well for me
(I usually have 20 - 2000 series) and
I even added buttons to hide/show all series.

I don't have a nice compact test case for you,
but will just share snippets of my production code:

<!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','table']}]}"></script>
<script type="text/javascript">

        var data = { ........... };
        var charts = {};
        var columns = {};
        var series = {};
        var tables = {};
        var options = {};

        function createColumn(csv, i) {
                var d = data[csv];
                var c = columns[csv];
                var s = series[csv];

                // show the column
                c[i] = i;

                if (i > 0) {
                        var label = d['cols'][i]['label'];
                        s[i - 1] = (label === 'LSL' || 
                                    label === 'USL' ? { color: '#999999' } 
: {});
                }
        }

        function showColumn(csv, i) {
                var d = data[csv];
                var c = columns[csv];
                var s = series[csv];

                // show the column
                c[i] = i;
                var label = d['cols'][i]['label'];
                s[i - 1].color = (label === 'LSL' || 
                                  label === 'USL' ? '#999999' : null);
        }

        function hideColumn(csv, i) {
                var d = data[csv];
                var c = columns[csv];
                var s = series[csv];
                var t = tables[csv];

                // hide the column
                c[i] = {
                        label: '[X] ' + t.getColumnLabel(i),
                        type: t.getColumnType(i),
                        calc: function () {
                                return null;
                        }
                };
                
                // grey out the legend entry
                s[i - 1].color = '#CCCCCC';
        }

        function drawCharts() {
                for (var csv in data) {
                        var d = data[csv];
                        var c = columns[csv] = [];
                        var s = series[csv] = {};
                        var t = tables[csv] = new 
google.visualization.DataTable(d);

                        for (var i = 0; i < t.getNumberOfColumns(); i++) {
                                createColumn(csv, i);
                        }

                        var ps = (d.rows.length <= 2 ? 4 : 0);
                        var o = options[csv] = {
                                title: csv,
                                width: 1000,
                                height: 800,
                                series: s,
                                pointSize: ps,
                                legend: { textStyle: { fontSize: 10 }},
                                chartArea: { width:"50%" }
                        };

                        var chartDiv = csv + '_chart';
                        var chart = charts[csv] = new 
google.visualization.LineChart(document.getElementById(chartDiv));
                        chart.draw(t, o);

                        google.visualization.events.addListener(chart, 
'select', (function(x) {
                                return function() {
                                        var d = data[x];
                                        var c = columns[x];
                                        var s = series[x];
                                        var t = tables[x];
                                        var o = options[x];
                                        var chart = charts[x];

                                        var sel = chart.getSelection();
                                        // if selection length is 0, we 
deselected an element
                                        if (sel.length > 0) {
                                                // if row is undefined, we 
clicked on the legend
                                                if (typeof sel[0].row === 
'undefined') {
                                                        var i = 
sel[0].column;
                                                        if (c[i] == i) {
                                                                
hideColumn(x, i);
                                                        } else {
                                                                
showColumn(x, i);
                                                        }

                                                        var view = new 
google.visualization.DataView(t);
                                                        view.setColumns(c);
                                                        chart.draw(view, o);
                                                }
                                        }
                                };
                        })(csv));

                        var tabDiv = csv + '_table';
                        var table = new 
google.visualization.Table(document.getElementById(tabDiv));
                        table.draw(t, { width: 1000 });
                        $('#' + tabDiv).hide();

                        (function(csv){
                                $('#' + csv + '_toggle').click(function() {
                                        $('#' + csv + '_table').toggle();
                                });

                                $('#' + csv + '_all').click(function() {
                                        var d = data[csv];
                                        var c = columns[csv];
                                        var s = series[csv];
                                        var t = tables[csv];
                                        var o = options[csv];
                                        var chart = charts[csv];

                                        for (var i = 1; i < 
t.getNumberOfColumns(); i++) {
                                                showColumn(csv, i);
                                        }

                                        var view = new 
google.visualization.DataView(t);
                                        view.setColumns(c);
                                        chart.draw(view, o);
                                });

                                $('#' + csv + '_none').click(function() {
                                        var d = data[csv];
                                        var c = columns[csv];
                                        var s = series[csv];
                                        var t = tables[csv];
                                        var o = options[csv];
                                        var chart = charts[csv];

                                        for (var i = 1; i < 
t.getNumberOfColumns(); i++) {
                                                hideColumn(csv, i);
                                        }

                                        var view = new 
google.visualization.DataView(t);
                                        view.setColumns(c);
                                        chart.draw(view, o);
                                });
                        })(csv);
                }
        }

        $(function() {
                google.setOnLoadCallback(drawCharts);
        });

</script>

...........

<div id="GPS_PHASE_NOISE_MODULATION_chart"></div>
<input type="button" value="Toggle table" 
id="GPS_PHASE_NOISE_MODULATION_toggle">
<input type="button" value="Select all" id="GPS_PHASE_NOISE_MODULATION_all">
<input type="button" value="Select none" 
id="GPS_PHASE_NOISE_MODULATION_none">
<div id="GPS_PHASE_NOISE_MODULATION_table"></div>

Regards
Alex

-- 
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.
For more options, visit https://groups.google.com/groups/opt_out.

Reply via email to