We Keep Coding

Why would I have to do chart.draw twice to get a Google pie chart to display?

I have a page in an app that displays all sorts of ticket metrics from several different ticketing systems we use. I use the same function to build each of the charts and display them:
function drawChart(chartData, chartStyle, chartTitle, chartSpanID) {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Hour');
data.addColumn('number', 'Tickets');
data.addRows(chartData);
if(chartStyle == "column"){
var chart = new google.visualization.ColumnChart(document.getElementById(chartSpanID));
var options = {title:chartTitle,chartArea: {left: 30, top:20, bottom:30, right:10},animation:{startup: true, duration:2000}}
};
if(chartStyle == "pie"){
var chart = new google.visualization.PieChart(document.getElementById(chartSpanID));
var options = {title:chartTitle,
chartArea:{left: 0, top:20, bottom:10, right: 0},
is3D: true,
sliceVisibilityThreshold: .01,
animation:{startup: true,easing: 'in', duration:1000},
pieResidueSliceLabel: "Other( < 1%)"};
};
chart.draw(data, options);
}
This works for 13 of the 14 charts displayed on the page. 8 Columns and 5 out of 6 pie charts all display perfectly. One of the pie charts will ONLY display if I draw the chart a second time.
function drawChart(chartData, chartStyle, chartTitle, chartSpanID) {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Hour');
data.addColumn('number', 'Tickets');
data.addRows(chartData);
if(chartStyle == "column"){
var chart = new google.visualization.ColumnChart(document.getElementById(chartSpanID));
var options = {title:chartTitle,chartArea: {left: 30, top:20, bottom:30, right:10},animation:{startup: true, duration:2000}}
};
if(chartStyle == "pie"){
var chart = new google.visualization.PieChart(document.getElementById(chartSpanID));
var options = {title:chartTitle,
chartArea:{left: 0, top:20, bottom:10, right: 0},
is3D: true,
sliceVisibilityThreshold: .01,
animation:{startup: true,easing: 'in', duration:1000},
pieResidueSliceLabel: "Other( < 1%)"};
};
chart.draw(data, options);
chart.draw(data, options);
}
The data is delivered correctly, all calls are made through google.charts.setOnLoadCallback, it all works just fine once called again... so why is it only working on the second call? Why just the one chart that doesn't display as expected? What have I missed?

Draw multiple Google charts in for loop

I am trying to draw multiple Google charts in a for loop, but can't seem to make it work. I have seen some similar questions being asked, but only with PHP. Anyone who can help? This is what I have tried so far https://jsfiddle.net/8nfbz1v1/
<ul id="draw-charts"></ul>
google.charts.load('current', {'packages':['corechart']});
for(var i = 0; i>6; i+){
var charts = "";
google.charts.setOnLoadCallback(drawChart);
function drawCharts() {
charts += '<td><div id="chart_div' + i +'" style="border: 1px solid #ccc"></div></td>';
$("#draw-charts").html(charts);
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', 1],
['Onions', 1],
['Olives', 2],
['Zucchini', 2],
['Pepperoni', 1]
]);
var options = {title:'How Much Pizza Sarah Ate Last Night',
width:400,
height:300};
// Instantiate and draw the chart for Sarah's pizza.
var chart = new google.visualization.PieChart(document.getElementById('chart_div' + i));
chart.draw(data, options);
}
}

setOnLoadCallback should only be called once per page load
once it fires, you can draw as many charts as needed
you can also include the callback in the load statement
see following working snippet...
google.charts.load('current', {
callback: function () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', 1],
['Onions', 1],
['Olives', 2],
['Zucchini', 2],
['Pepperoni', 1]
]);
var options = {
title:'How Much Pizza Sarah Ate Last Night',
width:400,
height:300
};
for (var i = 0; i < 6; i++) {
var container = document.getElementById('draw-charts').appendChild(document.createElement('div'));
var chart = new google.visualization.PieChart(container);
chart.draw(data, options);
}
},
packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<ul id="draw-charts"></ul>

Div scale on window width/height

I make a system/website that is fully resizable with css and VW(viewport width). In that system/website I have a GoogleChart that works with pixels. Now I want to scale the chart with Javascript/jQuery/CSS (transform scale). On page load is enough.
Can anyone help me in the right direction for this?
Here is a JSFiddle with the problem: https://jsfiddle.net/j9a9wpdj/
// Load the Visualization API and the corechart package.
google.charts.load('current', {'packages':['corechart']});
// 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', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]);
// Set chart options
var options = {'title':'How Much Pizza I Ate Last Night',
'width': 400,
'height': 300};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
#test {
width: 80vw;
height: 40vw;
background-color: #dcdcdc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="test">
<div id="chart_div"></div>
</div>
[CONCLUSION]
This is what works for me:
function zoomit() {
$("#chart-wrapper").css('zoom', $(window).width() / $("#chart-wrapper").width());
}
$(document).ready(zoomit);
$(window).resize(zoomit);

Use the drawchart function to redraw the chart when window is resized. Adjust the width and height in below function as necessary. Updated fiddle
Code added to your script:
var width = 400;
var height = 300;
// Set chart options
var options = {
'title': 'How Much Pizza I Ate Last Night',
'width': width,
'height': height
};
$(function() {
$(window).resize(function() {
width = $('#test').width();
height = $('#test').height();
google.charts.setOnLoadCallback(drawChart);
})
});
Working example:
var width = 400;
var height = 300;
// Load the Visualization API and the corechart package.
google.charts.load('current', {
'packages': ['corechart']
});
// 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', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]);
// Set chart options
var options = {
'title': 'How Much Pizza I Ate Last Night',
'width': width,
'height': height
};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
$(function() {
$(window).resize(function() {
width = $('#test').width();
height = $('#test').height();
google.charts.setOnLoadCallback(drawChart);
})
});
#test {
width: 80vw;
height: 40vw;
background-color: #dcdcdc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="test">
<div id="chart_div"></div>
</div>

Google data visualization stacked bar charts using two data sets

I am using google datavisualization charts. I have a datatable with 2 columns and 4 rows. I need to display this data into a single stacked bar chart as shown below
Sample of my data :
var data = new google.visualization.DataTable();
data.addColumn('string', 'name');
data.addColumn('number', 'count');
data.addRows([
['abc', 321],
['def', 163],
['ghi', 125],
['jkl', 197]
]);
I have tried using column chart and bar chart by enabling isStacked:true , but no luck.
Is there a way to display the data in a single stacked chart as shown in the image. I don't mind whether it is a bar chart or column chart.
I would appreciate if someone can help me.
Thanks.

The issue is that right now there is nothing linking the different columns together, so that there is no reason for them to be stacked on top of each other.
You need to have each of the elements share a common element, like the date. Next, you need to add a separate column for each of the different 'name' fields. Finally, when adding your values, add them only to the column index that matches the (name, value) pair.
data.addColumn('number', 'irrelevant');
data.addColumn('number', 'abc');
data.addColumn('number', 'def');
data.addColumn('number', 'ghi');
data.addColumn('number', 'jkl');
data.addColumn('number', 'mno');
data.addRows([
[0, 321, 0, 0, 0, 0],
[0, 0, 163, 0, 0, 0],
[0, 0, 0, 125, 0, 0],
[0, 0, 0, 0, 452, 0],
[0, 0, 0, 0, 0, 825]
]);
This sort of thing is annoying to do by hand, so in my chart system I iterate through a list of all the different groupings (or 'name's in your case) and keep track of each index so I know which element of the individual row to specify.
Here's a small sample from my code so you can get the right idea:
GoogleDataTable.addColumn('number', 'Age');
var GroupIndex = 0;
var DateIndex = 0;
for (var i = 0; i < RawJSON.length; i++) {
//If the groupkey is not in the group array yet.
if (GroupArray.indexOf(RawJSON[i][GroupKey]) == -1) {
GroupArray[GroupIndex] = RawJSON[i][GroupKey];
GroupIndex++;
GoogleDataTable.addColumn('number', RawJSON[i][GroupKey]);
}
//If the timeslice is not yet in the Date array.
if (DateArray.indexOf(RawJSON[i]["Age"]) == -1) {
DateArray[DateIndex] = RawJSON[i]['Age'];
DateIndex++;
}
}
then later
var groupIndex = GroupArray.indexOf(RawJSON[i][GroupKey]) + 1;
for (var j = 1; j <= GroupIndex; j++) {
if (j == groupIndex) {
RowArray[insertIndex][groupIndex] = RawJSON[i]['Value'];
}
}

Google Chart Error

When trying to plot a Line Chart using the Google Charts code I get this error
Error: Type mismatch. Value 0.8 does not match type number in column index 0
The '0.8' is referring to the value p1 in the code.
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('number', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
[p1,1.89],
[ch_period[17],5],
[3,2],
[5,2],
[5,2],
[6,7]
]);
// Set chart options
var options = {'title':'How Much Pizza I Ate Last Night',
'width':400,
'height':300};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);

I've made a jsfiddle with your code that works: http://jsfiddle.net/kychan/Dfx4V/1/
var p1 = parseInt('4'),
ch_period = {'17':4};
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('number', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
[p1, 1.89],
[ch_period[17], 5],
[3, 2],
[5, 2],
[5, 2],
[6, 7]
]);
// Set chart options
var options = {
'title': 'How Much Pizza I Ate Last Night',
'width': 400,
'height': 300
};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
drawChart();
The problem was that p1 (and maybe ch_period) isn't the type number. Thus you must make it a number using parseInt(p1) / parseInt(ch_period) or manually assign it to a number.