Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 809
Tal Yaari Avatar asked Nov 22 '12 15:11

Tal Yaari


People also ask

How do I hide columns in Google data Studio?

To hide a single column, you have to right-click on that particular column letter, and from the menu that pops up, click on Hide Column.

Is Google charts deprecated?

While the dynamic and interactive Google Charts are actively maintained, we officially deprecated the static Google Image Charts way back in 2012. This gives us the right to turn it off without notice, which may happen soon.

What is the difference between bar chart and column chart?

Bar and column charts display data in rectangular bars — the longer the bar, the larger the value. A bar chart plots the variable value horizontally, and the fixed dimension, such as time, vertically. A column chart plots the variable value vertically, and the fixed dimension horizontally.


2 Answers

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>
like image 67
Dhananjay J Avatar answered Oct 11 '22 14:10

Dhananjay J


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>
like image 23
WhiteHat Avatar answered Oct 11 '22 13:10

WhiteHat