javascriptchartsgoogle-visualizationbar-chartgoogle-barchart

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

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

Solution

  • 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>