2017-12-28 14 views
1

私には1つの質問があります。 Googleのグラフは描画されません。ここでGoogleの図表は描画されません

は、ここに私のコード

<script> 
     google.load("visualization", "1", {packages:["corechart"]}); 
     google.setOnLoadCallback(drawChart); 
     function drawChart() { 
    var jsonData = $.ajax({ 
      url: "/temhum", 
      dataType:"json", 
     }).done(function (jsonData) { 
    var data = new google.visualization.DataTable(); 

    console.log(jsonData); 
    data.addColumn('string', 'date'); 
    data.addColumn('number', 'temperature'); 
    data.addColumn('number', 'humidity'); 

    jsonData.forEach(function (row) { 
    data.addRow([ 
     row.date, 
     row.temperature, 
     row.humidity 
    ]); 
    }); 

    var chart = new google.visualization.LineChart(document.getElementById('chartDiv')); 
    chart.draw(data, { 
    width: 600, 
    height: 600 
    }); 
}).fail(function (jq, text, err) { 
    console.log(text + ' - ' + err); 
}); 

    } 

</script> 

である私のコンソールログは、私にはわからない log

です。どうしてチャートを描かないの?誰も、node.js、google chart、およびmysqlを使ってリアルタイムでデータを表現する方法を知っていますか? JSONで

+1

をsungyongを解決しました。 の順番を 'google.setOnLoadCallback(drawChart);に変更してください。 関数drawChart(){...} => '関数drawChart(){...}に; google.setOnLoadCallback(drawChart); – sungyong

+0

同じことが起こる –

答えて

0

値は、列の型

3つのすべてのJSONの列が正しい型にそれぞれを変換するには、以下を使用することができ、文字列として渡って来る
...

data.addRow([ 
    new Date(row.date), 
    parseFloat(row.temperature), 
    parseFloat(row.humidity) 
]); 
0
と一致する必要があります

あなたを考えてください。私は

策がある問題..

あなたは `drawChart()`宣言の前に使用することができます&ホワイトハットコードミックス

<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
    <script> 
     google.load("visualization", "1", { 
     packages: ["corechart"] 
     }); 
     google.setOnLoadCallback(drawChart); 

     function drawChart() { 
     var jsonData = $.ajax({ 
      url: "/temhum", 
      dataType: "json", 
     }).done(function(jsonData) { 
      var data = new google.visualization.DataTable(jsonData); 
      console.log(jsonData); 
      data.addColumn('datetime', 'date'); 
      data.addColumn('number', 'temperature'); 
      data.addColumn('number', 'humidity'); 
      console.log(data); 
      jsonData.forEach(function(row) { 
       data.addRow([ 
        new Date(row.date), 
        parseFloat(row.temperature), 
        parseFloat(row.humidity) 
       ]); 
      }); 
      var chart = new google.visualization.LineChart(document.getElementById('chartDiv')); 
      chart.draw(data, { 
       width: 600, 
       height: 600 
      }); 
     }).fail(function(jq, text, err) { 
      console.log(text + ' - ' + err); 
     }); 
     } 
    </script> 
関連する問題