Google Charts API: show / hide a series on a legal click. How?

Question

I found the following code online and would like to adapt it to existing code.

Here's the code to show / hide a series of data on click I found:

http://jsfiddle.net/asgallant/6gz2Q/

Here is my adaptation:

function drawChart() { var data = new google.visualization.arrayToDataTable([ ['Draw', '1997', '1998'], ['1', 1236777, 1408007], ['2', 834427, 572882], ['3', 2164890, 1614181], ['4', 1893574, 3897171], ['5', 2851881, 673906], ['6', 359504, 630853] ]); // Instantiate and draw our chart, passing in some options. var chart = new google.visualization.LineChart(document.getElementById('chart_div')); // create columns array var columns = []; // display these data series by default var defaultSeries = [1]; var series = {}; for (var i = 0; i < data.getNumberOfColumns(); i++) { if (i == 0 || defaultSeries.indexOf(i) > -1) { // if the column is the domain column or in the default list, display the series columns.push(i); } else { // otherwise, hide it columns[i] = { label: data.getColumnLabel(i), type: data.getColumnType(i), calc: function () { return null; } }; } if (i > 0) { // set the default series option series[i - 1] = {}; if (defaultSeries.indexOf(i) == -1) { // backup the default color (if set) if (typeof(series[i - 1].color) !== 'undefined') { series[i - 1].backupColor = series[i - 1].color; } series[i - 1].color = '#CCCCCC'; } } } // Options customize what goes inside our chart. var options = { fontName: 'verdana', fontSize: 12, // Curve the series line. curveType: "function", title: 'Title of Chart', // disables tooltip on hover data points enableInteractivity: true, // Enable/Disable tooltip. selection or none. tooltip: { trigger: 'none' }, // Select multiple Data points. selectionMode: 'multiple', // Customize vAxis --------------------------------------------------------- vAxis: { gridlines: {color: 'black', count: 5}, title: 'Title of vAxis', // Affects only the Title. eg. Not title. titleTextStyle: {fontName: 'verdana', fontSize: 10, color: 'black', bold: false, italic: false}, // Range of data for vAxis eg. min: 0, max:9 viewWindow: {min: 0, max: 5006386}, // Affects only the Range. eg. Not title. textStyle: {fontName: 'verdana', fontSize: 12, color: 'black', bold: false, italic: false} }, // Customize hAxis --------------------------------------------------------- hAxis: { title: 'Title of hAxis', // Affects only the Title. eg. Not title. titleTextStyle: {fontName: 'verdana', fontSize: 10, color: 'black', bold: false, italic: false}, // Affects only the Range. eg. Not title. textStyle: {fontName: 'verdana', fontSize: 10, color: 'black', bold: false, italic: false} }, // Customize Series --------------------------------------------------------- series: { 0: {lineWidth: 1, pointSize: 4}, 1: {lineWidth: 1, pointSize: 4}, 2: {lineWidth: 1, pointSize: 4} }, // Customize Annotations --------------------------------------------------------- annotations: { textStyle: {fontName: 'verdana', fontSize: 10, color: 'black', bold: false, italic: false, auraColor: 'none'} }, // Custome Legends --------------------------------------------------------- legend: { // Position top, right, bottom, left. position: 'top', // Align at the star, center or end. alignment: 'start', // Affects only the Range. eg. Not title. textStyle: {fontName: 'verdana', fontSize: 10, color: 'black', bold: false, italic: false} } }; // End Options function showHideSeries () { 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 (sel[0].row == null) { var col = sel[0].column; if (columns[col] == col) { // hide the data series columns[col] = { label: data.getColumnLabel(col), type: data.getColumnType(col), calc: function () { return null; } }; // grey out the legend entry series[col - 1].color = '#CCCCCC'; } else { // show the data series columns[col] = col; series[col - 1].color = null; } var view = new google.visualization.DataView(data); view.setColumns(columns); chart.draw(view, options); } } } google.visualization.events.addListener(chart, 'select', showHideSeries); // create a view with the default columns var view = new google.visualization.DataView(data); view.setColumns(columns); chart.draw(view, options); } google.load('visualization', '1', {packages: ['corechart']}); google.setOnLoadCallback(drawChart); 

... And this is what I really wanted to understand how to include in this code. I don't seem to understand. It makes me fuck!

 // Declare our Columns and set types, roles, etc. view.setColumns([ 0, 1, { calc: "stringify", sourceColumn: 1, type: "string", role: "annotation" }, 2, { calc: "stringify", sourceColumn: 2, type: "string", role: "annotation" }, 3, { calc: "stringify", sourceColumn: 3, type: "string", role: "annotation" } ]); 

Answer 1

Try replacing this section:

 if (i == 0 || defaultSeries.indexOf(i) > -1) { // if the column is the domain column or in the default list, display the series columns.push(i); } 

with this:

 if (i == 0 || defaultSeries.indexOf(i) > -1) { // if the column is the domain column or in the default list, display the series columns.push(i); if (i > 0) { columns.push({ calc: "stringify", sourceColumn: i, type: "string", role: "annotation" }); } } 

Answer 2

Here is a solution that works as desired.

 function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('number', 'x'); data.addColumn('number', 'y1'); data.addColumn('number', 'y2'); data.addColumn('number', 'y3'); // add random data var y1 = 50, y2 = 50, y3 = 50; for (var i = 0; i < 100; i++) { y1 += Math.floor(Math.random() * 5) * Math.pow(-1, Math.floor(Math.random() * 2)); y2 += Math.floor(Math.random() * 5) * Math.pow(-1, Math.floor(Math.random() * 2)); y3 += Math.floor(Math.random() * 5) * Math.pow(-1, Math.floor(Math.random() * 2)); data.addRow([i, y1, y2, y3]); } // Instantiate and draw our chart, passing in some options. var chart = new google.visualization.LineChart(document.getElementById('chart_div')); // create columns array var columns = []; // display these data series by default var defaultSeries = [1, 3]; var series = {}; for (var i = 0; i < data.getNumberOfColumns(); i++) { if (i == 0 || defaultSeries.indexOf(i) > -1) { // if the column is the domain column or in the default list, display the series columns.push(i); } else { // otherwise, hide it columns.push({ label: data.getColumnLabel(i), type: data.getColumnType(i), sourceColumn: i, calc: function () { return null; } }); } if (i > 0) { columns.push({ calc: 'stringify', sourceColumn: i, type: 'string', role: 'annotation' }); // set the default series option series[i - 1] = {}; if (defaultSeries.indexOf(i) == -1) { // backup the default color (if set) if (typeof(series[i - 1].color) !== 'undefined') { series[i - 1].backupColor = series[i - 1].color; } series[i - 1].color = '#CCCCCC'; } } } var options = { width: 600, height: 400, series: series } function showHideSeries () { 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 (sel[0].row == null) { var col = sel[0].column; if (typeof(columns[col]) == 'number') { var src = columns[col]; // hide the data series columns[col] = { label: data.getColumnLabel(src), type: data.getColumnType(src), sourceColumn: src, calc: function () { return null; } }; // grey out the legend entry series[src - 1].color = '#CCCCCC'; } else { var src = columns[col].sourceColumn; // show the data series columns[col] = src; series[src - 1].color = null; } var view = new google.visualization.DataView(data); view.setColumns(columns); chart.draw(view, options); } } } google.visualization.events.addListener(chart, 'select', showHideSeries); // create a view with the default columns var view = new google.visualization.DataView(data); view.setColumns(columns); chart.draw(view, options); } google.load('visualization', '1', {packages: ['corechart']}); google.setOnLoadCallback(drawChart);