Google Charts not Working When Data Table is Global - javascript

I'm working on a small HTML application for my website that does some simulations and plots it to a graph (using Google Charts). All of the data will originate in the JavaScript code on the page (i.e. I'm not trying to pull in data from a database or anything like that). For this reason, I would like to have access to the data table from other functions so the data can be updated when a new simulation is run.
What I'm running into is that if I build a data table (and data view) inside of the drawChart() function, everything works fine. See this jsfiddle or the following code:
//Google charts stuff
google.charts.load('current', { 'packages': ['line', 'corechart'] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var forceChartDiv = document.getElementById('force_chart_div');
var sim_data = new google.visualization.DataTable();
sim_data.addColumn('number', 'Elapsed Time (sec)');
sim_data.addColumn('number', "Total Force");
sim_data.addColumn('number', "M1 Force(Each)");
sim_data.addRows([
[0.0, -.5, 5.7],
[0.1, .4, 8.7],
[0.2, .5, 12]
]);
var forceDataView = new google.visualization.DataView(sim_data);
forceDataView.setColumns([0, 1, 2]);
var forceChartOptions = {
chart: {title: 'Simulation Results: Force'},
width: 900,
height: 500,
series: {
// Gives each series an axis name that matches the Y-axis below.
0: { axis: 'Total' },
1: { axis: 'Individual' }
},
axes: {
// Adds labels to each axis; they don't have to match the axis names.
y: {
Total: { label: 'Total Force (Newtons)'},
Individual: { label: 'Per-Motor Force (Newtons)'}
}
}
};
var forceChart = new google.charts.Line(forceChartDiv);
forceChart.draw(forceDataView, google.charts.Line.convertOptions(forceChartOptions));
}
But if I move the code for the creation of the data table and data view outside of the function scope, it doesn't work. See this jsfiddle or the following code:
var sim_data;
var forceDataView;
//Google charts stuff
google.charts.load('current', { 'packages': ['line', 'corechart'] });
sim_data = new google.visualization.DataTable();
sim_data.addColumn('number', 'Elapsed Time (sec)');
sim_data.addColumn('number', "Total Force");
sim_data.addColumn('number', "M1 Force(Each)");
sim_data.addRows([
[0.0, -0.5, 5.7],
[0.1, 0.4, 8.7],
[0.2, 0.5, 12]
]);
forceDataView = new google.visualization.DataView(sim_data);
forceDataView.setColumns([0, 1, 2]);
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var forceChartDiv = document.getElementById('force_chart_div');
var forceChartOptions = {
chart: {title: 'Simulation Results: Force'},
width: 900,
height: 500,
series: {
// Gives each series an axis name that matches the Y-axis below.
0: { axis: 'Total' },
1: { axis: 'Individual' }
},
axes: {
// Adds labels to each axis; they don't have to match the axis names.
y: {
Total: { label: 'Total Force (Newtons)'},
Individual: { label: 'Per-Motor Force (Newtons)'}
}
}
};
var forceChart = new google.charts.Line(forceChartDiv);
forceChart.draw(forceDataView, google.charts.Line.convertOptions(forceChartOptions));
}
Both of these examples use the following HTML:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="force_chart_div"></div>
I thought it might have something to do with the execution order of the callback function. But putting it in different spots in the code doesn't seem to change anything. In my full project, I went so far as to add a button that called the drawChart() function just to check, but that didn't help either.
Depending on where I put the callback function call, I'll get a red "Data Table is not Defined" alert showing up where the chart is supposed to be on the webpage. That pretty much tells me what I already suspected, but I don't know how to fix it. Any help would be appreciated. I'm a huge JS noob, by the way, so go easy on me.


your instinct was correct, you must wait on the callback to finish,
before using the google.visualization or google.charts namespaces.
it has to do more with timing, than placement of the code.
instead of using the callback statement, we can use the promise that the load statement returns.
as in the following snippet...
var sim_data;
var forceDataView;
//Google charts stuff
google.charts.load('current', {
packages: ['line', 'corechart']
}).then(function () {
sim_data = new google.visualization.DataTable();
sim_data.addColumn('number', 'Elapsed Time (sec)');
sim_data.addColumn('number', "Total Force");
sim_data.addColumn('number', "M1 Force(Each)");
sim_data.addRows([
[0.0, -0.5, 5.7],
[0.1, 0.4, 8.7],
[0.2, 0.5, 12]
]);
forceDataView = new google.visualization.DataView(sim_data);
forceDataView.setColumns([0, 1, 2]);
});
function drawChart() {
var forceChartDiv = document.getElementById('force_chart_div');
var forceChartOptions = {
chart: {title: 'Simulation Results: Force'},
width: 900,
height: 500,
series: {
// Gives each series an axis name that matches the Y-axis below.
0: { axis: 'Total' },
1: { axis: 'Individual' }
},
axes: {
// Adds labels to each axis; they don't have to match the axis names.
y: {
Total: { label: 'Total Force (Newtons)'},
Individual: { label: 'Per-Motor Force (Newtons)'}
}
}
};
var forceChart = new google.charts.Line(forceChartDiv);
forceChart.draw(forceDataView, google.charts.Line.convertOptions(forceChartOptions));
}

Related

Format numbers on google bar chart with dual x-Axes (decimal)

How is it possible to format the number values on a google bar chart with dual x-Axes?
The top axes with the label support should have at least four decimal places, like the value shown in the tooltip.
What I have tried is this approach, but it doesn't seem to work.
My code:
data.addColumn('string', 'RuleName');
data.addColumn('number', 'Lift');
data.addColumn('number', 'Support');
for (var i = 0; i < chartsdata.length; i++) {
data.addRow([rule, Lift,Support)]);
}
// format numbers in second column to 5 decimals
var formatter = new google.visualization.NumberFormat({
pattern: '#,##0.00000'
}); // This does work, but only for the value in the tooltip.
formatter.format(data, 2);
// Passing in some options
var chart = new google.charts.Bar(document.getElementById('barChart'));
var options = {
title: "Association Rules by lift and support",
bars: 'horizontal',
series: {
0: { axis: 'Lift', targetAxisIndex: 0, },
1: { axis: 'Support', targetAxisIndex: 1}
},
axes: {
x: {
Lift: { label: 'Lift', format: '0,000' //Doesn't work, }, // Bottom x-axis.
Support: { side: 'top', label: 'Support' } // Top x-axis.
}
}, ..........
What I also tried is this approach from the google doc:
series:{hAxes:{1:{title:'abc', format: '0,0000'}}
Any help would be greatly appreciated!

there are several options that are not supported by Material charts
see --> Tracking Issue for Material Chart Feature Parity
although format is not listed, there are several options not supported for --> {hAxis,vAxis,hAxes.*,vAxes.*}
so that could be the problem
note: the above options should stand alone and not be included in the series option,
as seen in the question (What I also tried...)
you can change both x-axis formats by using hAxis.format
but don't think you'll be able to change just one
see following working snippet...
google.charts.load('current', {
packages: ['bar']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'RuleName');
data.addColumn('number', 'Lift');
data.addColumn('number', 'Support');
for (var i = 0; i < 10; i++) {
data.addRow([i.toString(), i+2, i+3]);
}
var formatter = new google.visualization.NumberFormat({
pattern: '#,##0.00000'
});
formatter.format(data, 2);
var chart = new google.charts.Bar(document.getElementById('barChart'));
var options = {
chart: {
title: 'Association Rules by lift and support'
},
bars: 'horizontal',
series: {
0: {axis: 'Lift'},
1: {axis: 'Support'}
},
axes: {
x: {
Lift: {label: 'Lift'},
Support: {side: 'top', label: 'Support'}
}
},
hAxis: {
format: '#,##0.00000'
},
height: 320
};
chart.draw(data, google.charts.Bar.convertOptions(options));
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="barChart"></div>

Google Charts API - how to turn my x-axis labels into Date Format and then group by month on some button click

My JSON array, which I'm getting by ajax response, looks like that:
[["\u041f\u0435\u0440\u0438\u043e\u0434","\u041a\u043b\u0438\u0435\u043d\u0442\u044b","\u0421\u0434\u0435\u043b\u043a\u0438","\u0421\u0443\u043c\u043c\u0430 \u0441\u0434\u0435\u043b\u043e\u043a","\u041e\u043f\u043b\u0430\u0447\u0435\u043d\u043d\u044b\u0435 \u0441\u0434\u0435\u043b\u043a\u0438"],["2017-02-18",0,0,0,0],["2017-02-19",1,0,0,0],["2017-02-20",2,0,0,0],["2017-02-21",4,1,64000,0],["2017-02-22",0,0,0,0],["2017-02-23",3,0,0,0],["2017-02-24",1,0,0,0],["2017-02-25",0,0,0,0],["2017-02-26",2,0,0,0],["2017-02-27",1,1,50000,0],["2017-02-28",1,0,0,0]...etc
So, everythings works fine, my X-axis labels looks good, but I can't understand how can I:
1) make them in date format for Google Chart understand that this is date and
2) group them by month by clicking some button
All problems come from my way of Google Charts implementing.
Here's the code.
function drawChart() {
var obj ='[["\u041f\u0435\u0440\u0438\u043e\u0434","\u041a\u043b\u0438\u0435\u043d\u0442\u044b","\u0421\u0434\u0435\u043b\u043a\u0438","\u0421\u0443\u043c\u043c\u0430 \u0441\u0434\u0435\u043b\u043e\u043a","\u041e\u043f\u043b\u0430\u0447\u0435\u043d\u043d\u044b\u0435 \u0441\u0434\u0435\u043b\u043a\u0438"],["2017-02-18",0,0,0,0],["2017-02-19",1,0,0,0],["2017-02-20",2,0,0,0],["2017-02-21",4,1,64000,0],["2017-02-22",0,0,0,0],["2017-02-23",3,0,0,0],["2017-02-24",1,0,0,0],["2017-02-25",0,0,0,0],["2017-02-26",2,0,0,0],["2017-02-27",1,1,50000,0],["2017-02-28",1,0,0,0],["2017-03-01",0,0,0,0],["2017-03-02",6,0,0,0],["2017-03-03",2,0,0,0],["2017-03-04",1,0,0,0],["2017-03-05",1,0,0,0],["2017-03-06",10,0,0,0],["2017-03-07",1,0,0,0],["2017-03-08",1,0,0,0],["2017-03-09",0,0,0,0],["2017-03-10",9,0,0,0],["2017-03-11",0,0,0,0],["2017-03-12",3,0,0,0],["2017-03-13",3,0,0,0],["2017-03-14",1,0,0,0],["2017-03-15",6,0,0,0],["2017-03-16",1,0,0,0],["2017-03-17",1,0,0,0],["2017-03-18",0,0,0,0],["2017-03-19",5,0,0,0],["2017-03-20",5,0,0,0]]';
data = google.visualization.arrayToDataTable($.parseJSON(obj));
var options = {
crosshair: {
trigger: 'both',
orientation: 'vertical'
},
focusTarget: 'category',
chartArea:{left:40,top:40,width:"85%"},
hAxis: {
format: 'MM'
},
vAxes: {
0: {},
1: {title: 'Cумма'},
},
series: {0: {targetAxisIndex:0},
1:{targetAxisIndex:0},
2:{targetAxisIndex:1},
3:{targetAxisIndex:1},
},
animation:{
duration: 750,
// easing: 'out',
startup: true
},
backgroundColor: 'aliceblue'
};
var chart = new google.visualization.LineChart(
document.getElementById('chart_div')
);
chart.draw(data, options);
}
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://www.google.com/jsapi?ext.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 100%; height: 400px;"></div>

1) for google to recognize the first column as a date, need to use the following format in the json...
"Date(year, month, day, hours, minutes, days, seconds, milliseconds)"
e.g.
["Date(2017, 1, 18)",0,0,0,0],["Date(2017, 1, 19)",1,0,0,0],
month is zero-based --> 1 = Feb
or, you can use a view and a calculated column to convert, see snippet...
2) use the group() method to group by month
see following working snippet...
function drawChart() {
var obj ='[["\u041f\u0435\u0440\u0438\u043e\u0434","\u041a\u043b\u0438\u0435\u043d\u0442\u044b","\u0421\u0434\u0435\u043b\u043a\u0438","\u0421\u0443\u043c\u043c\u0430 \u0441\u0434\u0435\u043b\u043e\u043a","\u041e\u043f\u043b\u0430\u0447\u0435\u043d\u043d\u044b\u0435 \u0441\u0434\u0435\u043b\u043a\u0438"],["2017-02-18",0,0,0,0],["2017-02-19",1,0,0,0],["2017-02-20",2,0,0,0],["2017-02-21",4,1,64000,0],["2017-02-22",0,0,0,0],["2017-02-23",3,0,0,0],["2017-02-24",1,0,0,0],["2017-02-25",0,0,0,0],["2017-02-26",2,0,0,0],["2017-02-27",1,1,50000,0],["2017-02-28",1,0,0,0],["2017-03-01",0,0,0,0],["2017-03-02",6,0,0,0],["2017-03-03",2,0,0,0],["2017-03-04",1,0,0,0],["2017-03-05",1,0,0,0],["2017-03-06",10,0,0,0],["2017-03-07",1,0,0,0],["2017-03-08",1,0,0,0],["2017-03-09",0,0,0,0],["2017-03-10",9,0,0,0],["2017-03-11",0,0,0,0],["2017-03-12",3,0,0,0],["2017-03-13",3,0,0,0],["2017-03-14",1,0,0,0],["2017-03-15",6,0,0,0],["2017-03-16",1,0,0,0],["2017-03-17",1,0,0,0],["2017-03-18",0,0,0,0],["2017-03-19",5,0,0,0],["2017-03-20",5,0,0,0]]';
var data = google.visualization.arrayToDataTable($.parseJSON(obj));
// create date formatter
var formatDate = new google.visualization.DateFormat({
pattern: 'MM'
});
// create view with calculated column
var view = new google.visualization.DataView(data);
view.setColumns([
// col 0 - x
{
label: 'date',
type: 'date',
calc: function (dt, row) {
return new Date(dt.getValue(row, 0))
}
},
// col 1 - y
1
]);
// group by month
var groupData = google.visualization.data.group(
// data table
view,
// group by fields
[{column: 0, type: 'string', modifier: function (xValue) {
return formatDate.formatValue(new Date(xValue));
}}],
// aggregate fields
[
{
aggregation: google.visualization.data.sum,
column: 1,
label: 'Total',
type: 'number'
}
]
);
var options = {
crosshair: {
trigger: 'both',
orientation: 'vertical'
},
focusTarget: 'category',
chartArea:{left:40,top:40,width:"85%"},
hAxis: {
format: 'MM'
},
vAxes: {
0: {},
1: {title: 'C????'},
},
series: {0: {targetAxisIndex:0},
1:{targetAxisIndex:0},
2:{targetAxisIndex:1},
3:{targetAxisIndex:1},
},
animation:{
duration: 750,
easing: 'inAndOut',
startup: true
},
backgroundColor: 'aliceblue'
};
var chart = new google.visualization.LineChart(
document.getElementById('chart_div')
);
// draw grouped data
chart.draw(groupData, options);
}
google.charts.load('current', {
callback: function () {
drawChart();
window.addEventListener('resize', drawChart, false);
},
packages:['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="chart_div"></div>

Google charts getting custom tooltips to work with an animation

Well this is my code, it's broken. I want to have absolute figures appear on mouse over, instead of percentages. Google's guides do not have an example of this with an animation, their examples use data table methods rather than arrays. I think I need to somehow tell Google that I have a third column which is a tooltip, at present it draws it as a bar.
google.load("visualization", "1", {
packages: ["corechart"]
});
google.setOnLoadCallback(init);
function init() {
var rowData1 = [
['key', 'Percentage', 'tooltip'],
['PLUS', 20.9, 3855],
['EDU', 18.4, 3400],
['GEO', 15.6, 2872],
['NO FLAG', 45.2, 8342]
];
var rowData2 = [
['key', 'Percentage', 'tooltip'],
['PLUS', 54.2, 974],
['EDU', 6.7, 120],
['GEO', 39.2, 704],
['NO FLAG', 0.0, 0]
];
// Create and populate the data tables.
var data = [];
data[0] = google.visualization.arrayToDataTable(rowData1);
data[1] = google.visualization.arrayToDataTable(rowData2);
var options = {
// removes the key
legend: {
position: 'none'
},
// puts popup boxes on bar
width: 600,
height: 300,
vAxis: {
title: "vertical axis"
},
hAxis: {
title: "horizontal axis"
},
seriesType: "bars",
series: {
5: {
type: "line"
}
},
animation: {
duration: 1000,
easing: 'out'
},
};
var current = 0;
// Create and draw the visualization.
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
var button = document.getElementById('b1');
function drawChart() {
// Disabling the button while the chart is drawing.
button.disabled = true;
google.visualization.events.addListener(chart, 'ready',
function() {
button.disabled = false;
button.value = 'Switch to ' + (current ? 'Tea' : 'Coffee');
});
options['title'] = 'Monthly ' + (current ? 'Coffee' : 'Tea') + ' Production by Country';
// custom popup box request
chart.draw(data[current], options);
}
drawChart();
button.onclick = function() {
current = 1 - current;
drawChart();
}
}
I've tried converting the array data to DataTables and using
if (current == 0) { chart.draw(dataTable1, options); }
else{ chart.draw(dataTable2, options); }
To select which chart to draw, but this isn't working. And it's less intelligible and inelegant, the dataTables need lots of properties set, so repetition.

need to define tooltip column with object notation...
var rowData1 = [
['key', 'Percentage', {role: 'tooltip'}],
['PLUS', 20.9, 3855],
['EDU', 18.4, 3400],
['GEO', 15.6, 2872],
['NO FLAG', 45.2, 8342]
];
var rowData2 = [
['key', 'Percentage', {role: 'tooltip'}],
['PLUS', 54.2, 974],
['EDU', 6.7, 120],
['GEO', 39.2, 704],
['NO FLAG', 0.0, 0]
];

Change google visualization Combo Chart series option as below:
series: {
0: {
type: "line"
}
}
Every data table column is considered as one series in google visualization Combo Chart.
Here
"Percentage" is line series no is 0
"tooltip" is bar series no is 1
Nothing wrong with google visualization Combo Chart.
After above change you will get below output:

How do I format Google Chart data to show a count of items, but be filterable by year

Hopefully this is appropriate for stackexchange. If not, my apologies.
Anyway, I have a set of data that is essentially a list of projects, the person tied to each project, and a year in which the project was started. What I'd like to do is render a bar chart that shows a total count of projects per individual, but somehow maintain the year in which an individual project was started so I can create a slider filter.
That sounds confusing, writing it out. The data looks like this:
[
['Project','PM','Year'],
['PRJ0001','John Doe','2012'],
['PRJ0002','John Doe','2012'],
['PRJ0003','Jackie Johnson','2013'],
Etc, etc,
]
I have no problem creating a count by project manager name, but I "lose" the year as a metric on which I can filter. Anyone have any ideas?

draw each control separately
use data.group to get counts per person and draw chart
draw the slider with the original data (need to change column type for NumberRangeFilter)
redraw the chart on slider 'statechange'
using slider low / high values to build a view using getFilteredRows
see following working snippet...
google.charts.load('current', {
callback: function () {
var data = google.visualization.arrayToDataTable([
['Project','PM','Year'],
['PRJ0001','John Doe',2012],
['PRJ0002','John Doe',2012],
['PRJ0003','John Doe',2012],
['PRJ0004','John Doe',2013],
['PRJ0005','Jackie Johnson',2012],
['PRJ0006','Jackie Johnson',2013],
['PRJ0007','Jackie Johnson',2014]
]);
var options = {
height: 400,
hAxis: {
viewWindow: {
min: 0,
max: 5
}
}
};
drawChart(data);
var slider = new google.visualization.ControlWrapper({
controlType: 'NumberRangeFilter',
containerId: 'filter_div',
dataTable: data,
options: {
filterColumnIndex: 2,
ui: {
format: {pattern: '0'}
}
}
});
google.visualization.events.addListener(slider, 'statechange', function () {
var range = slider.getState();
var view = new google.visualization.DataView(data);
view.setRows(data.getFilteredRows([{
column: 2,
minValue: range.lowValue,
maxValue: range.highValue
}]));
drawChart(view);
});
slider.draw();
function drawChart(dataTable) {
var dataGroup = google.visualization.data.group(
dataTable,
[1],
[{column: 1, aggregation: google.visualization.data.count, type: 'number', label: 'Count'}]
);
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(dataGroup, options);
}
},
packages: ['controls', 'corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="filter_div"></div>
<div id="chart_div"></div>

Multiple Google Charts

I am attempting to create multiple Google Charts, but I can't get it to work. I've tried everything I could find on Stack Overflow. I most recently attempted this fix, but it didn't work. I think I may be missing something. Can anyone see anything wrong with the code as it stands now?
Expected Behavior:
Page displays bar graph. Then, a line graph is displayed underneath the bar graph.
Current Behavior:
Page displays bar graph. Line graph does not display.
Here is JSFiddle. On a side note, the JavaScript only seems to work inline on JSFiddle. If I moved it into the JavaScript section, it did not function properly. Maybe this has something to do with the external resource that was called?
Regardless, I am currently doing this all inline for this experiment.
HTML:
<!DOCTYPE html>
<html>
<head>
<script src="https://www.google.com/jsapi" type="text/javascript">
</script>
<script type="text/javascript">
// Load the Visualization API and the chart packages.
google.load('visualization', '1.1', {
packages: ['line', 'bar', 'corechart']
});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the charts, passes in the data and
// draws them.
function drawChart() {
// Create the data table.
var BarData = new google.visualization.arrayToDataTable([
['', 'Customer', 'Segment Avg'],
['TTM Sales', 4, 2],
['TTM Orders', 5, 3],
['TTM Categories', 7, 4]
]);
// Create the data table.
var LineData = new google.visualization.arrayToDataTable([
['Year', 'Customer', 'Segment Avg'],
['2011', 4, 5],
['2012', 5, 3],
['2013', 4, 2]
]);
// Set chart options
var BarOptions = {
chart: {
title: 'Performance',
},
width: 900,
height: 500
};
// Set chart options
var LineOptions = {
chart: {
title: 'Sales History'
},
width: 900,
height: 500
};
// Instantiate and draw our chart, passing in some options.
var BarChart = new google.charts.Bar(document.getElementById(
'bar_chart'));
BarChart.draw(BarData, BarOptions);
var LineChart = new google.charts.Line(document.getElementById(
'line_chart'));
LineChart.draw(LineData, LineOptions);
};
</script>
<title>Test Chart Page</title>
</head>
<body>
<!--Divs that will hold the charts-->
<div id="bar_chart"></div>
<div id="line_chart"></div>
</body>
</html>

It seems some changes have been made in the latest version of Google Charts API that causes this behavior, but there is a reliable way to render multiple charts on a single page. The idea is to render the next chart once the previous one is rendered, for that purpose you could utilize ready event handler.
Having said that, replace
var barChart = new google.charts.Bar(document.getElementById('bar_chart'));
barChart.draw(barData, barOptions);
var lineChart = new google.charts.Line(document.getElementById('line_chart'));
lineChart.draw(lineData, lineOptions);
with
var barChart = new google.charts.Bar(document.getElementById('bar_chart'));
google.visualization.events.addOneTimeListener(barChart, 'ready', function () {
var lineChart = new google.charts.Line(document.getElementById('line_chart'));
lineChart.draw(lineData, lineOptions);
});
barChart.draw(barData, barOptions);
Working example
google.load('visualization', '1.1', {
packages: ['line', 'bar', 'corechart']
});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawCharts);
function drawCharts() {
// Create the data table.
var barData = new google.visualization.arrayToDataTable([
['', 'Customer', 'Segment Avg'],
['TTM Sales', 4, 2],
['TTM Orders', 5, 3],
['TTM Categories', 7, 4]
]);
// Create the data table.
var lineData = new google.visualization.arrayToDataTable([
['Year', 'Customer', 'Segment Avg'],
['2011', 4, 5],
['2012', 5, 3],
['2013', 4, 2]
]);
// Set chart options
var barOptions = {
chart: {
title: 'Performance',
},
width: 900,
height: 500
};
// Set chart options
var lineOptions = {
chart: {
title: 'Sales History'
},
width: 900,
height: 500
};
var barChart = new google.charts.Bar(document.getElementById('bar_chart'));
google.visualization.events.addOneTimeListener(barChart, 'ready', function () {
var lineChart = new google.charts.Line(document.getElementById('line_chart'));
lineChart.draw(lineData, lineOptions);
});
barChart.draw(barData, barOptions);
};
<script src="https://www.google.com/jsapi" type="text/javascript"></script>
<div id="bar_chart"></div>
<div id="line_chart"></div>

Works with setTimeout:
// Instantiate and draw our chart, passing in some options.
var BarChart = new google.charts.Bar(document.getElementById(
'bar_chart'));
setTimeout(function() {
BarChart.draw(BarData, BarOptions);
}, 0);
var LineChart = new google.charts.Line(document.getElementById(
'line_chart'));
setTimeout(function() {
LineChart.draw(LineData, LineOptions);
}, 1e3);
Updated JSFiddle

The code below works by creating the second chart inside of setTimeout.
I don't know what is causing the problem,
but at least you have a workaround.
fiddle
<script type="text/javascript">
// Load the Visualization API and the chart packages.
google.load('visualization', '1.1', {
packages: ['line', 'bar', 'corechart']
});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the charts, passes in the data and
// draws them.
function drawChart() {
// Create the data table.
var BarData = new google.visualization.arrayToDataTable([
['', 'Customer', 'Segment Avg'],
['TTM Sales', 4, 2],
['TTM Orders', 5, 3],
['TTM Categories', 7, 4]
]);
// Create the data table.
var LineData = new google.visualization.arrayToDataTable([
['Year', 'Customer', 'Segment Avg'],
['2011', 4, 5],
['2012', 5, 3],
['2013', 4, 2]
]);
// Set chart options
var BarOptions = {
chart: {
title: 'Performance',
},
width: 900,
height: 500
};
// Set chart options
var LineOptions = {
chart: {
title: 'Sales History'
},
width: 900,
height: 500
};
// Instantiate and draw our chart, passing in some options.
var BarChart = new google.charts.Bar(document.getElementById(
'bar_chart'));
var LineChart = new google.charts.Line(document.getElementById(
'line_chart'));
LineChart.draw(LineData, LineOptions);
setTimeout(function(){
BarChart.draw(BarData, BarOptions);
},50);
};
</script>
<body>
<!--Divs that will hold the charts-->
<div id="bar_chart"></div>
<div id="line_chart"></div>
</body>

Google fixed this timing issue in a recent release, available with the frozen version loader: https://developers.google.com/chart/interactive/docs/library_loading_enhancements#frozen-versions
Relevant thread: https://groups.google.com/forum/?utm_medium=email&utm_source=footer#!msg/google-visualization-api/KulpuT418cg/yZieM8buCQAJ

Categories