Google Charts Dashboard - Hide Columns

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() { // Creat

Solution 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']});

functiondrawVisualization(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 ]
      ]);

    elseif (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 ]
      ]);

    elseif(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]
      ]);

    elsevar 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}}
          );
}

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

Solution 2:

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

google.charts.load('current', {
  packages: ['corechart'],
  callback: drawVisualization
});

functiondrawVisualization(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);
}

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