Remove 0 value from Bar chart - javascript

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>

Related

Google Gantt Chart Move X-axis on Top Instead of Bottom

google.charts.load('current', { 'packages': ['gantt'] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Task ID');
data.addColumn('string', 'Task Name');
data.addColumn('string', 'Resource');
data.addColumn('date', 'Start Date');
data.addColumn('date', 'End Date');
data.addColumn('number', 'Duration');
data.addColumn('number', 'Percent Complete');
data.addColumn('string', 'Dependencies');
data.addRows([
['2014Spring', 'Spring 2014 ', 'spring',
new Date(2010, 5, 10), new Date(2010, 5, 12), null, 100, null],
['2014Summer', 'Summer 2014', 'summer',
new Date(2010, 5, 13), new Date(2010, 5, 14), null, 100, null],
['2014Autumn', 'Autumn 2014', 'autumn',
new Date(2010, 5, 15), new Date(2010, 5, 16), null, 100, null],
]);
debugger;
var options = {
height: 400,
gantt: {
palette: [
],
trackHeight: 30,
labelStyle: {
fontName: ["RobotoCondensedRegular"],
fontSize: 15
`enter code here` },
textPosition: 'TOP', ## Heading ##
},
};
var chart = new google.visualization.Gantt(document.getElementById('chart_div'));
for (i = 0; i < data.hg.length;i++) {
if (data.hg[i].c[2].v == 'spring') {
options.gantt.palette.push({
"color": "#00FF00",
"dark": "#00FF00",
"light": "#00FF00"
});
}
else if (data.hg[i].c[2].v == 'summer') {
options.gantt.palette.push({
"color": "#00FF00",
"dark": "#0000FF",
"light": "#FF0000"
});
}
else {
options.gantt.palette.push({
"color": "#00FF00",
"dark": "#FF0000",
"light": "#FF0000"
});
}
}
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
Above is the code of the google gantt charts that I am using and trying to acheive to move the bottom x-axis to the Top Side.
I beleive there is a little tweaking is needed by which I can do that Which I am unable to undestand. Any Help on this would be great.

How to fix the y-axis in Google charts for 'timeofday' value?

Currently, my y-axis looks like this:
Meaning that it only goes as high as the highest value more or less. Is there a way to make it fixed so that it spans the whole duration of the day 00:00-23:59?
I am assuming it will have to be set in the vAxis part of options.
you can use --> vAxis.viewWindow.min and max
viewWindow: {
min: [0, 0, 0],
max: [23, 59, 59]
}
although the last label may not be shown,
the chart will extend to [23, 59, 59]
you can add --> ticks
to guarantee the last label is shown
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'x');
data.addColumn('timeofday', 'y');
data.addRows([
['10-19', [8, 0, 0]],
['10-20', [10, 0, 0]]
]);
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, {
vAxis: {
ticks: [
[0, 0, 0],
[4, 0, 0],
[8, 0, 0],
[12, 0, 0],
[16, 0, 0],
[20, 0, 0],
[23, 59, 59],
],
viewWindow: {
min: [0, 0, 0],
max: [23, 59, 59]
}
}
});
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Google Gantt chart shows wrong year

I have started using Gantt chart which is recently launched by Google which seems great for tasks tracking via chart.
I have created 4 tasks and chart loads fine but it shows wrong date for e.g. Jan 2016 in Develop the product and release section. Actually I haven't used this date in my data at all. What is the issue over here?
Here is my code:
HTML:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
JavaScript:
google.charts.load('current', {'packages':['gantt']});
google.charts.setOnLoadCallback(drawChart);
function daysToMilliseconds(days) {
return days * 24 * 60 * 60 * 1000;
}
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Task ID');
data.addColumn('string', 'Task Name');
data.addColumn('date', 'Start Date');
data.addColumn('date', 'End Date');
data.addColumn('number', 'Duration');
data.addColumn('number', 'Percent Complete');
data.addColumn('string', 'Dependencies');
data.addRows([
['Design', 'Design and analysis',
new Date(2015, 8, 1), new Date(2015, 8, 15), null, 25, null],
['Development', 'Develop the product',
new Date(2015, 8, 16), new Date(2015, 10, 31), null, 20, null],
['Testing', 'Product testing',
new Date(2015, 11, 01), new Date(2015, 11, 30), null, 10, null],
['Release', 'Release the product',
new Date(2015, 12, 01), new Date(2015, 12, 20), null, 0, null],
]);
var options = {
height: 275
};
var chart = new google.visualization.Gantt(document.getElementById('chart_div'));
chart.draw(data, options);
}
month numbers are zero-based in JavaScript
so Dec, 1 2015 would be --> new Date(2015, 11, 01)
instead the 12 pushes the date to Jan 1, 2016
see following snippets...
Date Test
console.log(new Date(2015, 11, 01));
console.log(new Date(2015, 12, 01));
Chart Test
if the range should be Aug - Dec, then reduce each month # by 1
google.charts.load('current', {'packages':['gantt']});
google.charts.setOnLoadCallback(drawChart);
function daysToMilliseconds(days) {
return days * 24 * 60 * 60 * 1000;
}
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Task ID');
data.addColumn('string', 'Task Name');
data.addColumn('date', 'Start Date');
data.addColumn('date', 'End Date');
data.addColumn('number', 'Duration');
data.addColumn('number', 'Percent Complete');
data.addColumn('string', 'Dependencies');
data.addRows([
['Design', 'Design and analysis',
new Date(2015, 7, 1), new Date(2015, 7, 15), null, 25, null],
['Development', 'Develop the product',
new Date(2015, 7, 16), new Date(2015, 9, 31), null, 20, null],
['Testing', 'Product testing',
new Date(2015, 10, 01), new Date(2015, 10, 30), null, 10, null],
['Release', 'Release the product',
new Date(2015, 11, 01), new Date(2015, 11, 20), null, 0, null],
]);
var options = {
height: 275
};
var chart = new google.visualization.Gantt(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Google Chart API Issue in PHP

I need to display a dynamic google charts using loop... like all charts have different values but on same page... I have the following code:
<table>
<?php
$i=0;
while($i<4){
echo"
<script >
google.charts.load('current', {'packages':['gantt']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Task ID');
data.addColumn('string', 'Task Name');
data.addColumn('string', 'Resource');
data.addColumn('date', 'Start Date');
data.addColumn('date', 'End Date');
data.addColumn('number', 'Duration');
data.addColumn('number', 'Percent Complete');
data.addColumn('string', 'Dependencies');
data.addRows([
['2014Spring', 'Spring 2014', 'spring',
new Date(2014, 2, 22), new Date(2014, 5, 20), null, 100, null],
['2014Summer', 'Summer 2014', 'summer',
new Date(2014, 1, 12), new Date(2014, 2, 20), null, 100, null],
['2015Winter', 'Winter 2015', 'winter',
new Date(2015, 11, 21), new Date(2016, 2, 21), null, 0, null],
]);
var options = {
height: 200,
gantt: {
trackHeight: 25
}
};
var chart = new google.visualization.Gantt(document.getElementById('chart_div$i'));
chart.draw(data, options);
}
</script>
<tr>
<td> Hello </td>
<td id='chart_div$i'></td>
</tr>
";
$i++;
}
?>
</table>
What i am doing wrong and how to achieve the goal?
You're outputting the complete <script> tag 4 times. You should just output it once, ideally in the footer of your page. Take a look at my example:
<table>
<tr>
<td>Hello</td>
<td id='chart_div0'></td>
<td id='chart_div1'></td>
<td id='chart_div2'></td>
<td id='chart_div3'></td>
</tr>
</table>
And then in the footer:
<script type="text/javscript">
google.charts.load('current', {'packages':['gantt']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
<?php for ( $counter = 0; $counter < 4; $counter++ ) : ?>
var data = new google.visualization.DataTable();
data.addColumn('string', 'Task ID');
data.addColumn('string', 'Task Name');
data.addColumn('string', 'Resource');
data.addColumn('date', 'Start Date');
data.addColumn('date', 'End Date');
data.addColumn('number', 'Duration');
data.addColumn('number', 'Percent Complete');
data.addColumn('string', 'Dependencies');
data.addRows([
['2014Spring', 'Spring 2014', 'spring',
new Date(2014, 2, 22), new Date(2014, 5, 20), null, 100, null],
['2014Summer', 'Summer 2014', 'summer',
new Date(2014, 1, 12), new Date(2014, 2, 20), null, 100, null],
['2015Winter', 'Winter 2015', 'winter',
new Date(2015, 11, 21), new Date(2016, 2, 21), null, 0, null],
]);
var options = {
height: 200,
gantt: {
trackHeight: 25
}
};
var chart = new google.visualization.Gantt(document.getElementById('chart_div<?php echo $counter;?>'));
chart.draw(data, options);
<?php endfor; ?>
}
</script>

Google Charts API custom month names

I need to set custom month names in Charts.
How set custom month names in Google Charts API?
You can specify custom ticks on the hAxis...
google.load('visualization', '1', {packages: ['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Time of Day');
data.addColumn('number', 'Rating');
data.addColumn({type: 'string', role: 'tooltip'});
data.addRows([
[new Date(2015, 1, 1), 5, 'January'],
[new Date(2015, 2, 1), 7, 'February'],
[new Date(2015, 3, 1), 3, 'March'],
[new Date(2015, 4, 1), 2, 'April'],
[new Date(2015, 5, 1), 2, 'May']
]);
var options = {
width: 900,
height: 500,
hAxis: {
format: 'MMM',
gridlines: {count: 5},
ticks: [
{v: new Date(2015, 1, 1), f:'custom 1'},
{v: new Date(2015, 2, 1), f:'custom 2'},
{v: new Date(2015, 3, 1), f:'custom 3'},
{v: new Date(2015, 4, 1), f:'custom 4'},
{v: new Date(2015, 5, 1), f:'custom 5'}
]
},
vAxis: {
gridlines: {color: 'none'},
minValue: 0
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script src="https://www.google.com/jsapi"></script>
<div id="chart_div"></div>

Categories