Googleのグラフは、ページの更新時にのみ読み込まれます

Question

初心者はgoogle charts/jsを使用しています。下の私のGoogleのグラフはうまくロードされますが、グラフ領域に空白のHTMLが読み込まれることがあります。ページをリフレッシュすると正しく表示されます。

これはなぜか分かりません。これはすべてのブラウザでこれを行うようです。 Thisあなたが名前を提供することができるが、
を/匿名関数をインラインを使用しているときは、その同じことを呼び出すことができなくなります

<script type="text/javascript"> 

    google.charts.load('current', { 
    packages: ['corechart'] 
    }).then(function drawChart() { 

     <?php 
     $imei = $bboxx_imei; 
     $result = shell_exec('Daily_Data_Retriever_ishackweb.py ' . $imei.' '. $end.' '.$start); #imei=sys.arg[1] end=sys.arg[2] start=sys.arg[3] 
     ?> 

      var jsonData = <?php echo $result; ?> //{"Charge Current, (A)":{"2017-11-16T00:00:00.000Z":0.001373312,"2017-11-16T00:01:00.000Z":0.001373312,"2017-11-16T00:02:00.000Z":0.001373312,"2017-11-16T00:03:00.000Z":0.001373312,"2017-11-16T00:04:00.000Z":0.001373312},"Battery Voltage, (V)":{"2017-11-16T00:00:00.000Z":12.9267109178,"2017-11-16T00:01:00.000Z":12.9267109178,"2017-11-16T00:02:00.000Z":12.9267109178,"2017-11-16T00:03:00.000Z":12.9267109178,"2017-11-16T00:04:00.000Z":12.9267109178}}; 

      var chartCols = ['Datetime']; 
      Object.keys(jsonData).forEach(function (column) { 
       chartCols.push(column); 
      }); 
      // build list of date 
      var dateValues = []; 
      Object.keys(jsonData).forEach(function (column) { 
       Object.keys(jsonData[column]).forEach(function (dateValue) { 
       if (dateValues.indexOf(dateValue) === -1) { 
        dateValues.push(dateValue); 
       } 
       }); 
      }); 
       // build chart data 
       var chartData = [chartCols]; 
       dateValues.forEach(function (dateValue) { 
       var row = [new Date(dateValue)]; 
       Object.keys(jsonData).forEach(function (column) { 
        row.push(jsonData[column][dateValue] || null); 
       }); 
       chartData.push(row); 
      }); 
     var data = google.visualization.arrayToDataTable(chartData); 
     var options = { 
     chartArea: {width:'90%', height:'85%'}, 
     //title: 'Battery Voltage and Panel Charge', 
     curveType: 'function', 
     legend: { position: 'bottom' }, 
     vAxes: {0: {viewWindowMode:'explicit', 
         viewWindow:{ 
            max:16, 
            min:11 
            }, 
            gridlines: {color: 'transparent'}, 
         }, 

       1: {viewWindowMode:'explicit', 
         viewWindow:{ 
            max:5, 
            min:0 
            }, 
       }, 
       }, 
     series: {0: {targetAxisIndex:1}, 
       1: {targetAxisIndex:0}, 
       }, 
     }; 
     var chart = new google.visualization.LineChart(document.getElementById('line_chart')); 
     chart.draw(data, options); 
     $(window).resize(function(){ 
     drawChart() 
     }); 
    }); 
    </script> 

Answer 1

...それはMozillaのと可能性を示しているようだが、問題が解消されませんこの関数は、再び、

google.charts.load('current', { 
    packages: ['corechart'] 
}).then(function drawChart() { // <-- cannot call this again, no name needed 
... 

代わりにそれの名前で、その後、別途関数を宣言関数の名前を使用して必要な参照、
を渡す

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

$(window).resize(drawChart); 

function drawChart() { 
    ... 
} 

---

...作業スニペット以下を参照してください

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

 
$(window).resize(drawChart); 
 

 
function drawChart() { 
 
    var jsonData = {"Charge Current, (A)":{"2017-11-16T00:00:00.000Z":0.001373312,"2017-11-16T00:01:00.000Z":0.001373312,"2017-11-16T00:02:00.000Z":0.001373312,"2017-11-16T00:03:00.000Z":0.001373312,"2017-11-16T00:04:00.000Z":0.001373312},"Battery Voltage, (V)":{"2017-11-16T00:00:00.000Z":12.9267109178,"2017-11-16T00:01:00.000Z":12.9267109178,"2017-11-16T00:02:00.000Z":12.9267109178,"2017-11-16T00:03:00.000Z":12.9267109178,"2017-11-16T00:04:00.000Z":12.9267109178}}; 
 

 
    var chartCols = ['Datetime']; 
 
    Object.keys(jsonData).forEach(function (column) { 
 
    chartCols.push(column); 
 
    }); 
 
    // build list of date 
 
    var dateValues = []; 
 
    Object.keys(jsonData).forEach(function (column) { 
 
    Object.keys(jsonData[column]).forEach(function (dateValue) { 
 
     if (dateValues.indexOf(dateValue) === -1) { 
 
     dateValues.push(dateValue); 
 
     } 
 
    }); 
 
    }); 
 
    // build chart data 
 
    var chartData = [chartCols]; 
 
    dateValues.forEach(function (dateValue) { 
 
    var row = [new Date(dateValue)]; 
 
    Object.keys(jsonData).forEach(function (column) { 
 
     row.push(jsonData[column][dateValue] || null); 
 
    }); 
 
    chartData.push(row); 
 
    }); 
 

 
    var data = google.visualization.arrayToDataTable(chartData); 
 
    var options = { 
 
    chartArea: {width:'90%', height:'85%'}, 
 
    //title: 'Battery Voltage and Panel Charge', 
 
    curveType: 'function', 
 
    legend: { position: 'bottom' }, 
 
    vAxes: { 
 
     0: { 
 
     viewWindowMode:'explicit', 
 
     viewWindow:{ 
 
      max:16, 
 
      min:11 
 
     }, 
 
     gridlines: {color: 'transparent'}, 
 
     }, 
 
     1: { 
 
     viewWindowMode:'explicit', 
 
     viewWindow:{ 
 
      max:5, 
 
      min:0 
 
     }, 
 
     }, 
 
    }, 
 
    series: { 
 
     0: {targetAxisIndex:1}, 
 
     1: {targetAxisIndex:0}, 
 
    }, 
 
    }; 
 

 
    var chart = new google.visualization.LineChart(document.getElementById('line_chart')); 
 
    chart.draw(data, options); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="line_chart"></div>