PHPでJSONストリームを生成し、それをGoogle Chartとして表示

このトピックに関する有用なドキュメントを見つけるのに問題があるので、ここで質問しました。PHPでJSONストリームを生成し、それをGoogle Chartとして表示

外部データからストリーミングされたJSONを作成しようとしています。現在のコードは次のとおりです。

<?php 

header('Content-type:application/json;charset=utf-8'); 
ob_implicit_flush(true); 
echo '{"points":['; 
for($i = 0, $j = 100; ; $i+=2, $j-=3) { 
    $data = '{"x":'.$i .',"y":'.$j.'}'; 

    if($i >= $j){ 
     echo $data . "]}"; 
     break; 
    } 
    echo $data . ", "; 
    sleep(1); 
    ob_flush(); 
} 
?>

データは最終的には他の場所から取得されますが、このサイクルで十分です。出力はこれです：

{"points":[{"x":0,"y":100}, {"x":2,"y":97}, {"x":4,"y":94}, {"x":6,"y":91}, {"x":8,"y":88}, {"x":10,"y":85}, {"x":12,"y":82}, {"x":14,"y":79}, {"x":16,"y":76}, {"x":18,"y":73}, {"x":20,"y":70}, {"x":22,"y":67}, {"x":24,"y":64}, {"x":26,"y":61}, {"x":28,"y":58}, {"x":30,"y":55}, {"x":32,"y":52}, {"x":34,"y":49}, {"x":36,"y":46}, {"x":38,"y":43}, {"x":40,"y":40}]}

しかし、ご覧のとおり、「一度に1ポイント」となります（実データもあります）。私はこれが適切なJSONとして扱われていないと感じていますが、この目的のためにjson_encode（）の使い方を理解することはできません。次に、AJAXやGoogle Chartsを介してクライアント側に表示しようとします。

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="UTF-8"> 
     <title><?php $property->getProperty('applicationPage',$_SESSION['lang'],'title') ?></title> 
     <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
     <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
     <script type="text/javascript"> 

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

     function drawChart() { 
     var jsonData = $.ajax({ 
      url: "getData.php", 
      dataType: "json", 
      async: false 
      }).responseText; 

     var options = { 
      title: 'Graf', 
      curveType: 'function', 
      legend: { position: 'bottom' }, 
      width: 500, 
      height: 500 
     }; 

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

     </script> 
    </head> 
    <body> 
     <div id="chart"></div> 
    </body> 
</html>

私はそれを動作させることはできません。今私は、Google Chartsの図面、JSONの生成、またはその両方を混乱させるかどうかはわかりません。

出典

2016-05-27 Ydenko

あなたはいくつかのlitleものを忘れてしまいます。

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <title><?php $property->getProperty('applicationPage',$_SESSION['lang'],'title') ?></title> 
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    <script type="text/javascript"> 

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

     function drawChart() { 

      var jsonData = $.ajax({ 
       url: "getData.php", 
       dataType: "json", 
       async: false 
      }).responseText; 
      var data = new google.visualization.DataTable(jsonData); 

      var options = { 
       title: 'Graf', 
       curveType: 'function', 
       legend: { position: 'bottom' }, 
       width: 500, 
       height: 500 
      }; 

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

    </script> 
</head> 
<body> 
<div id="div_chart"></div> 
</body> 
</html>

とあなたのJSONは答えのためにこの

{ 
    "cols": [ 
     {"id":"","label":"Topping","pattern":"","type":"string"}, 
     {"id":"","label":"Slices","pattern":"","type":"number"} 
     ], 
    "rows": [ 
     {"c":[{"v":"Mushrooms","f":null},{"v":3,"f":null}]}, 
     {"c":[{"v":"Onions","f":null},{"v":1,"f":null}]}, 
     {"c":[{"v":"Olives","f":null},{"v":1,"f":null}]}, 
     {"c":[{"v":"Zucchini","f":null},{"v":1,"f":null}]}, 
     {"c":[{"v":"Pepperoni","f":null},{"v":2,"f":null}]} 
     ] 
}

https://developers.google.com/chart/interactive/docs/reference#dataview-class

出典

2016-05-27 10:13:28

おかげのように見えるものとします。チャートが動作しています（調整済みのJSONジェネレータ、欠落したコード行を追加しました）が、別の問題があります。チャートをリアルタイムで描画するのではなく、すべてのデータが来るのを待ってチャートを表示します。この「リアルタイム」チャートの再描画を実現する方法はありますか？ – Ydenko

node.jsとsocket.ioの使い方を知っていますか？ –

あなたはjs setInerval関数を使うことができます。 drawChart関数をミリ秒単位でn回呼び出す –

PHPでJSONストリームを生成し、それをGoogle Chartとして表示

答えて

関連する問題