Cannot read property '0' of undefined google chart

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);
     }

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();
  }
});