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