Google Charts dashboard - hide columns

Question

I use google charts dashboard in order to display a line chart and I would like to control the displayed elements in run-time. for example:

function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
    ['x', 'Cats', 'Blanket 1', 'Blanket 2'],
    ['A',   1,       1,           0.5     ],
    ['B',   2,       0.5,         1       ],
    ['C',   4,       1,           0.5     ],
    ['D',   8,       0.5,         1       ],
    ['E',   7,       1,           0.5     ],
    ['F',   7,       0.5,         1       ],
    ['G',   8,       1,           0.5     ],
    ['H',   4,       0.5,         1       ],
    ['I',   2,       1,           0.5     ],
    ['J',   3.5,     0.5,         1       ],
    ['K',   3,       1,           0.5     ],
    ['L',   3.5,     0.5,         1       ],
    ['M',   1,       1,           0.5     ],
    ['N',   1,       0.5,         1       ]
]);

// Create and draw the visualization.
new google.visualization.LineChart(document.getElementById('visualization')).
  draw(data, {curveType: "function",
              width: 500, height: 400,
              vAxis: {maxValue: 10}}
      );
}

I would like to control the visibility of Cats , Blanket 1 and Blanket 2 in a similar way to how it is being done in this Google Charts category filter example .

Answer 1

One way would be to use a flag value to map to Cats / Blanket 1 / Blanket 2 and then accordingly call the function with suitable data initialization.

 google.charts.load('current', {packages: ['corechart']}); function drawVisualization(flag) { if(flag=="cats") var data = google.visualization.arrayToDataTable([ ['x', 'Cats' ], ['A', 1 ], ['B', 2 ], ['C', 4 ], ['D', 8 ], ['E', 7 ], ['F', 7 ], ['G', 8 ], ['H', 4 ], ['I', 2 ], ['J', 3.5 ], ['K', 3 ], ['L', 3.5 ], ['M', 1 ], ['N', 1 ] ]); else if (flag=="Blanket 1") var data = google.visualization.arrayToDataTable([ ['x', 'Blanket 1'], ['A', 1], ['B', 0.5], ['C', 1], ['D', 0.5], ['E', 1], ['F', 0.5], ['G', 1], ['H', 0.5], ['I', 1], ['J', 0.5], ['K', 1], ['L', 0.5], ['M', 1 ], ['N', 0.5 ] ]); else if(flag=="Blanket 2") var data = google.visualization.arrayToDataTable([ ['x', 'Blanket 2'], ['A', 0.5], ['B', 1], ['C', 0.5], ['D', 1], ['E', 0.5], ['F', 1], ['G', 0.5], ['H', 1], ['I', 0.5], ['J', 1], ['K', 0.5], ['L', 1], ['M', 0.5], ['N', 1] ]); else var data = google.visualization.arrayToDataTable([ ['x', 'Cats', 'Blanket 1', 'Blanket 2'], ['A', 1, 1, 0.5], ['B', 2, 0.5, 1], ['C', 4, 1, 0.5], ['D', 8, 0.5, 1], ['E', 7, 1, 0.5], ['F', 7, 0.5, 1], ['G', 8, 1, 0.5], ['H', 4, 0.5, 1], ['I', 2, 1, 0.5], ['J', 3.5, 0.5, 1], ['K', 3, 1, 0.5], ['L', 3.5, 0.5, 1], ['M', 1, 1, 0.5], ['N', 1, 0.5, 1] ]); new google.visualization.LineChart(document.getElementById('visualization')). draw(data, {curveType: "function", width: 500, height: 400, vAxis: {maxValue: 10}} ); } 

 <script src="https://www.gstatic.com/charts/loader.js"></script> <div class="btn-group" role="group" aria-label="..."> <button type="button" class="btn btn-default" onclick="drawVisualization('Cats')">Cats</button> <button type="button" class="btn btn-default" onclick="drawVisualization('Blanket 1')">Blanket 1</button> <button type="button" class="btn btn-default" onclick="drawVisualization('Blanket 2')">Blanket 2</button> </div> <div id="visualization"></div> 

Answer 2

I would recommend using a DataView to hide the columns...

 google.charts.load('current', { packages: ['corechart'], callback: drawVisualization }); function drawVisualization(category) { var data = google.visualization.arrayToDataTable([ ['x', 'Cats', 'Blanket 1', 'Blanket 2'], ['A', 1, 1, 0.5], ['B', 2, 0.5, 1], ['C', 4, 1, 0.5], ['D', 8, 0.5, 1], ['E', 7, 1, 0.5], ['F', 7, 0.5, 1], ['G', 8, 1, 0.5], ['H', 4, 0.5, 1], ['I', 2, 1, 0.5], ['J', 3.5, 0.5, 1], ['K', 3, 1, 0.5], ['L', 3.5, 0.5, 1], ['M', 1, 1, 0.5], ['N', 1, 0.5, 1] ]); var chart = new google.visualization.LineChart(document.getElementById('visualization')); var options = { curveType: 'function', width: 500, height: 400, vAxis: { maxValue: 10 } }; var view = new google.visualization.DataView(data); var viewColumns = [0]; switch (category) { case 'Cats': viewColumns.push(1); break; case 'Blanket 1': viewColumns.push(2); break; case 'Blanket 2': viewColumns.push(3); break; default: viewColumns.push(1); viewColumns.push(2); viewColumns.push(3); } view.setColumns(viewColumns); chart.draw(view, options); } 

 <script src="https://www.gstatic.com/charts/loader.js"></script> <div id="btn-group"> <button type="button" class="btn btn-default" onclick="drawVisualization()">All</button> <button type="button" class="btn btn-default" onclick="drawVisualization('Cats')">Cats</button> <button type="button" class="btn btn-default" onclick="drawVisualization('Blanket 1')">Blanket 1</button> <button type="button" class="btn btn-default" onclick="drawVisualization('Blanket 2')">Blanket 2</button> </div> <div id="visualization"></div>