javascriptjquerychartsbar-chartpygooglechart

Remove 0 value from Bar chart


Here is the code i tried

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

<div id="chart_div"></div>


<script>
// Load the Visualization API and the piechart package.
google.charts.load('current', {packages: ['corechart', 'bar']});


// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);

// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {

 // Create the data table.
 var data = new google.visualization.DataTable();
 data.addColumn('string', 'Course');
 data.addColumn('number', 'Excellent');
 data.addColumn('number', 'Adequate');
 data.addColumn('number', 'Limited');
 data.addColumn('number', 'None');
 data.addColumn('number', 'Very Confident');
 data.addColumn('number', 'Fairly Confident');
 data.addColumn('number', 'Somewhat Confident');
 data.addColumn('number', 'Not at all');
 data.addRows([

     ['Knowledge level', 1, 8, 30, 0, 0, 0, 0, 0],

     ['Assessment skills', 1, 9, 18, 11, 0, 0, 0, 0],

     ['Planning skills', 2, 0, 20, 10, 0, 0, 0, 0],

     ['Confidence', 0, 0, 0, 0, 5, 6, 7, 8]
 ]);

 // Set chart options
 var options = {
     'title': 'Statewide Count across all courses',
     'width': 900,
     'height': 500
 };

 // Instantiate and draw our chart, passing in some options.
 var chart_div = document.getElementById('chart_div');
 var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));

 //Wait for the chart to finish drawing before calling the getImageURI() method.
 /*google.visualization.events.addListener(chart, 'ready', function(){
                                        chart_div.innerHTML = '<img src="' + chart.getImageURI() + '">';
                                        console.log(chart_div.innerHTML);
                                    })*/
 chart.draw(data, options);
}
</script>

i want to do that when we have a graph for particular field i just want that if we have a 0 value into the array they show the blank graph. i just want that we didnt show that blank graph just remove that blank space from graph. I


Solution

  • maybe using 'isStacked': true would work for you instead,
    see following example...

    google.charts.load('current', {
      'callback': function () {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Course');
        data.addColumn('number', 'Excellent');
        data.addColumn('number', 'Adequate');
        data.addColumn('number', 'Limited');
        data.addColumn('number', 'None');
        data.addColumn('number', 'Very Confident');
        data.addColumn('number', 'Fairly Confident');
        data.addColumn('number', 'Somewhat Confident');
        data.addColumn('number', 'Not at all');
        data.addRows([
          ['Knowledge level', 1, 8, 30, 0, 0, 0, 0, 0],
          ['Assessment skills', 1, 9, 18, 11, 0, 0, 0, 0],
          ['Planning skills', 2, 0, 20, 10, 0, 0, 0, 0],
          ['Confidence', 0, 0, 0, 0, 5, 6, 7, 8]
        ]);
    
        var options = {
          'title': 'Statewide Count across all courses',
          'width': 900,
          'height': 500,
          'isStacked': true
        };
    
        var chart_div = document.getElementById('chart_div');
        var chart = new google.visualization.ColumnChart(chart_div);
        chart.draw(data, options);
      },
      'packages': ['corechart', 'bar']
    });
    <script src="https://www.gstatic.com/charts/loader.js"></script>
    <div id="chart_div"></div>