On Google bar charts, I am unable to remove columns which do not have data

Question

<!DOCTYPE html>
<html lang="en-US">
<head>
<style>

</style>
</head>
<body>

<h1>My Web Page</h1>

<div id="piechart"></div>

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
// Load google charts
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

// Draw the chart and set the chart values
function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ['Task', 'Hours per Day',{ role: 'annotation' }],
        ['VehicleNumbering', 8,8],
        ['Eat', 0,0],
        ['TV', 4,4],
        ['Gym', 0,0],
        ['Sleep', 8,8],
        ['VehicleNumbering', 8,8],
        ['Eat', 0,0],
        ['TV', 4,4],
        ['Gym', 0,0],
        ['Sleep', 8,8],
        ['VehicleNumbering', 8,8],
        ['Eat', 0,0],
        ['TV', 4,4],
        ['Gym', 0,0],
        ['Sleep', 8,8],
        ['VehicleNumbering', 8,8],
        ['Eat', 0,0],
        ['TV', 4,4],
        ['Gym', 0,0],
        ['Sleep', 8,8],
        ['VehicleNumbering', 8,8],
        ['Eat', 0,0],
        ['TV', 4,4],
        ['Gym', 0,0],
        ['Sleep', 8,8],
        ['Gym', 0,0],
        ['Sleep', 8,8],
        ['VehicleNumbering', 8,8],
        ['Eat', 0,0],
        ['TV', 4,4],
        ['Gym', 0,0],
        ['Sleep', 8,8]
    ]);

  // Optional; add a title and set the width and height of the chart
    var options = {'title':'My Average Day', 'width':2000, 'height': window.innerHeight};

    // Display the chart inside the <div> element with id="piechart"
    var chart = new google.visualization.ColumnChart(document.getElementById('piechart'));
    chart.draw(data, options);
}
</script>

</body>
</html>

When the page is loading, it displays every column’s data (whether it has data or not). I need to shorten: I don’t want to display columns which do not have data. I need to remove the column whose value is 0 5. I need to display the columns which do have data.

How can I do this?

score 1 · Accepted Answer · answered Aug 11 '20 at 11:09

1

you can use a data view to draw the chart.

after creating the data view, we exclude the rows with zero values.

we do this by using the getFilteredRows method to find the rows not equal to zero.

then provide the return value to the setRows method.

see following working snippet...

// Load google charts
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

// Draw the chart and set the chart values
function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Task', 'Hours per Day',{ role: 'annotation' }],
    ['VehicleNumbering', 8,8],
    ['Eat', 0,0],
    ['TV', 4,4],
    ['Gym', 0,0],
    ['Sleep', 8,8],
    ['VehicleNumbering', 8,8],
    ['Eat', 0,0],
    ['TV', 4,4],
    ['Gym', 0,0],
    ['Sleep', 8,8],
    ['VehicleNumbering', 8,8],
    ['Eat', 0,0],
    ['TV', 4,4],
    ['Gym', 0,0],
    ['Sleep', 8,8],
    ['VehicleNumbering', 8,8],
    ['Eat', 0,0],
    ['TV', 4,4],
    ['Gym', 0,0],
    ['Sleep', 8,8],
    ['VehicleNumbering', 8,8],
    ['Eat', 0,0],
    ['TV', 4,4],
    ['Gym', 0,0],
    ['Sleep', 8,8],
    ['Gym', 0,0],
    ['Sleep', 8,8],
    ['VehicleNumbering', 8,8],
    ['Eat', 0,0],
    ['TV', 4,4],
    ['Gym', 0,0],
    ['Sleep', 8,8]
  ]);

  var view = new google.visualization.DataView(data);
  view.setRows(data.getFilteredRows([{
    column: 1,
    test: function (value) {
      return (value !== 0);
    }
  }]));

  // Optional; add a title and set the width and height of the chart
  var options = {'title':'My Average Day', 'width':2000, 'height': window.innerHeight};

  // Display the chart inside the <div> element with id="piechart"
  var chart = new google.visualization.ColumnChart(document.getElementById('piechart'));
  chart.draw(view, options);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="piechart"></div>

answered Aug 11 '20 at 11:09

WhiteHat

59,912
7
51
133

var view = new google.visualization.DataView(data); view.setRows(data.getFilteredRows([{ column: 1, test: function (value) { return (value !== 0); } }])); – abhi Aug 11 '20 at 12:45
same thing is i am using on 2 more charts but filter is applying on only one chart – abhi Aug 11 '20 at 12:46
make sure you draw the chart using the data view, not the data table... – WhiteHat Aug 11 '20 at 13:34
var view = new google.visualization.DataView(data); – abhi Aug 11 '20 at 13:42
using same thing in every where – abhi Aug 11 '20 at 13:43
here? --> `chart.draw(view, options);` <-- use `view` – WhiteHat Aug 11 '20 at 14:11
Thank u whitehat. its woking now – abhi Aug 11 '20 at 14:15
i have small doubt, in bar chart some time showing values in y axis like(range from 0,5,10), some times displaying nothing. is there any way to show permanentily – abhi Aug 11 '20 at 14:17
you can use option `vAxis.ticks` to display exactly what you want -- e.g. -- `vAxis: {ticks: [0, 5, 10]}` – WhiteHat Aug 11 '20 at 14:33
i dont want to use those values,it should display automatically based on data – abhi Aug 11 '20 at 14:35
if i have data 1 to 50 based on that data it should apper – abhi Aug 11 '20 at 14:35
don't have to hard code, you can build the ticks dynamically, based on the data. you can use data table method [`getColumnRange`](https://developers.google.com/chart/interactive/docs/reference#DataTable_getColumnRange) to determine the min & max values. [here](https://stackoverflow.com/a/38350811/5090771) is an example... – WhiteHat Aug 11 '20 at 15:49
is it possible to display google chart title at center . instead of left i need at center WiteHat – abhi Aug 12 '20 at 16:39
no config option for that, you would have to move it manually on the chart's ready event, by changing the `"x"` attribute of the `` element... – WhiteHat Aug 12 '20 at 17:24

On Google bar charts, I am unable to remove columns which do not have data

1 Answers1