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

Question

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

412 Views Asked by abhi At 19 April 2025 at 10:41

<!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?

Original Q&A

There are 1 best solutions below

**WhiteHat** · Accepted Answer

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>

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

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in CHARTS

Related Questions in GOOGLE-VISUALIZATION

Related Questions in BAR-CHART

Related Questions in GOOGLE-BARCHART

Trending Questions

Popular # Hahtags

Popular Questions