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

回答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>

回答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>