Hide a row (aka series) in Google chart

A. Farber

unread,

Jun 4, 2013, 11:01:32 AM6/4/13

to google-visua...@googlegroups.com

Hello!

Is there please a possibility to blend out (hide) a line in Google Line Chart?

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:

<!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

asgallant

unread,

Jun 4, 2013, 1:13:45 PM6/4/13

to google-visua...@googlegroups.com

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/.

Alexander Farber

unread,

Jun 4, 2013, 5:01:26 PM6/4/13

to google-visua...@googlegroups.com

It seems to work great, thank you!

I will try to understand your code tomorrow morning

Greetings from Germany

Alexander Farber

unread,

Jun 6, 2013, 9:47:41 AM6/6/13

to google-visua...@googlegroups.com

Hello Andrew,

On Tue, Jun 4, 2013 at 7:13 PM, asgallant <drew_g...@abtassoc.com> wrote:

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/.

thank you for the code!

Because I have multiple charts at my Perl-generated web pages I'd like to move the var columns=[], var series={} part into the "select" listener.

My problem is: how to access the currently selected chart and esp. its data?

Is a ref to it passed within "select" event?

I've added argument to the listener:

google.visualization.events.addListener(chart, 'select', function (event) {

console.dir(event);

but it prints: null

Regards

Alex

asgallant

unread,

Jun 6, 2013, 12:11:59 PM6/6/13

to google-visua...@googlegroups.com

Event handlers don't contain a reference to the chart they are attached to. If you want to create a generic event handler that can handle multiple charts, give the function a chart parameter and then pass the current chart to the function inside the event handler:

function eventHandler (chartObj) {

// do something with chartObj

}

google.visualization.events.addListener(chart, 'select', function () {

eventHandler(chart);

});

Don't make the columns and series options generic, as they contain data that is unique to the chart which they are assigned to. You can make objects that contain references to the (distinct) series and columns of multiple charts, but don't use one set of columns and series for all charts, eg:

var series = {

chart_1: {...},

chart_2: {...}

Damien HYPOLITE

unread,

Sep 3, 2013, 8:11:13 AM9/3/13

to google-visua...@googlegroups.com

Hello Andrew,

I'm working from your example,

but I didn't succed in intialy hide a particular serie.

I've 15 series, and at the begining I want only one or to to be displayed.

Any hint on how to do that ?

thanks

Damien

A. Farber

unread,

Sep 3, 2013, 8:25:25 AM9/3/13

to google-visua...@googlegroups.com

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>

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>

...........

Regards
Alex

Damien HYPOLITE

unread,

Sep 3, 2013, 8:48:44 AM9/3/13

to google-visua...@googlegroups.com

Thanks Alex,

unfortunately I was not able to manage any solution with your example (too complex for what I need)

I'm just looking for how to identy a specific serie, and hide it.

That's all :(

Alexander Farber

unread,

Sep 3, 2013, 9:22:53 AM9/3/13

to google-visua...@googlegroups.com

That's done by the hideColumn() in my code, where i is a series number.

asgallant

unread,

Sep 3, 2013, 9:32:56 AM9/3/13

to google-visua...@googlegroups.com

I updated my example code so that you can set an array of columns to display by default (the rest will be hidden): http://jsfiddle.net/asgallant/6gz2Q/

Damien HYPOLITE

unread,

Sep 3, 2013, 9:39:45 AM9/3/13

to google-visua...@googlegroups.com

All right, but I don't catch the 'csv' parameter

Bob Delgreco

unread,

Apr 18, 2017, 11:15:10 AM4/18/17

to Google Visualization API

Andrew, would you please contact me about licensing this code for commercial, non-attributed use? bob at seibertsystems dot com

Thanks,

Reply all

Reply to author

Forward