Не удается прочитать свойство '0' неопределенной диаграммы Google

Question

Я получаю это сообщение об ошибке " Невозможно прочитать свойство '0' неопределенной диаграммы Google ", когда я загружаю свои 2 графика, и это происходит только тогда, когда я загружаю свою страницу в первый раз. Если я нажимаю F5 на Chrome, они загружаются правильно. Если я изменяю размер браузера, они кажутся загруженными правильно. В чем может быть проблема ? IE показывает эту ошибку один раз, Chrome показывает ее каждый раз, когда я открываю страницу в первый раз. Иногда я получаю эту ошибку при загрузке своей страницы:

0x800a138f - Ошибка времени выполнения JavaScript: невозможно получить свойство 'arrayToDataTable' с неопределенной или нулевой ссылкой

Пожалуйста, смотрите мой код ниже:

<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

сначала вы можете удалить jsapi, он больше не используется ...

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

далее, вам нужно всего лишь позвонить google.charts.load один раз,
Вы также можете включить callback в оператор загрузки.

попробуйте заменить это ...

google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawChart1);

google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawChart2);

с этим ...

google.charts.load('current', {
  packages: ['corechart'],
  callback: function () {
    drawChart1();
    drawChart2();
  }
});