Cannot read property '0' of undefined google chart - google-visualization

Question

I get this error message "Cannot read property '0' of undefined google chart" when i load my 2 graphs and it only occurs when i load my page for the first time. If i click F5 on chrome they load properly. If i resize the browser they appear load properly. What could be the problem ? IE shows this error once, Chrome shows it every time i open the page for the first time. Some times i get this error when i load my page :
0x800a138f - JavaScript runtime error: Unable to get property 'arrayToDataTable' of undefined or null reference
Please see my code below :
<script src="../Scripts/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawChart1);
google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawChart2);
$(window).resize(function () {
if (width != $(window).width() || height != $(window).height()) { //only refresh if screen size changes
drawChart1();
drawChart2();
width = $(window).width();
height = $(window).height();
}
});
$(document).ready(function () {
width = $(window).width();
height = $(window).height();
});
function drawChart1() {
var data = google.visualization.arrayToDataTable([
['Minute', 'Users'],
['0 Min', 9],
['1 Min', 28],
['2 Min', 1],
['3 Min', 1],
['5 Min', 1]
]);
var options = {
slices: {
0: { offset: 0.2 }
},
chartArea: { 'left': '5%', 'top': '10%', 'width': '100%',
'height': '100%' }
};
var chart = new
google.visualization.PieChart(document.getElementById('graph1'));
chart.draw(data, options);
}
function drawChart2() {
var data = google.visualization.arrayToDataTable([
['Minute', 'Users'],
['0 Min', 20],
['4 Min', 4],
['5 Min', 1],
['8 Min', 8],
['10 Min', 3]
]);
var options = {
// title: 'Group C Users'
pieHole: 0.5,
chartArea: { 'left': '5%', 'top': '10%', 'width': '100%',
'height': '100%' }
};
var chart = new
google.visualization.PieChart(document.getElementById('graph2'));
chart.draw(data, options);
}

Answer 1

first, you can remove jsapi, it is no longer being used...
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
next, you only need to call google.charts.load one time,
you can also include the callback in the load statement.
try replacing this...
google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawChart1);
google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawChart2);
with this...
google.charts.load('current', {
packages: ['corechart'],
callback: function () {
drawChart1();
drawChart2();
}
});