JSON-Stream in PHP generieren und als Google-Chart anzeigen

Ich habe Probleme, nützliche Dokumentation zu diesem Thema zu finden, also habe ich mich entschieden, hier zu fragen.JSON-Stream in PHP generieren und als Google-Chart anzeigen

Ich versuche, gestreamte JSON von externen Daten zu erstellen. Mein aktueller Code ist dies:

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

Die Daten werden schließlich von anderswo kommen, aber dieser Zyklus wird für jetzt ausreichen. Ausgabe ist dies:

{"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}]}

aber, wie Sie sehen können, kommt es "Punkt für Punkt" (echte Daten werden auch). Ich habe das Gefühl, dass dies nicht als richtig JSON behandelt wird, aber ich kann nicht herausfinden, wie json_encode() für diesen Zweck zu verwenden. Dann versuche ich es auf Client-Seite über AJAX und Google Charts anzuzeigen:

<!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>

Aber ich kann es nicht funktionieren. Jetzt weiß ich nicht ob ich nur Google Charts gezeichnet habe, das JSON erzeugt oder beides.

Quelle

2016-05-27 Ydenko

Sie vergessen einige kleine Dinge.

<!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>

und Ihre json werden, wie dies für Antwort

{ 
    "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

Quelle

2016-05-27 10:13:28

Dank aussehen. Das Diagramm funktioniert nun (angepasster JSON-Generator, fehlende Codezeilen hinzugefügt), aber ich habe ein anderes Problem. Es zeichnet das Diagramm nicht in Echtzeit ("vor Ihren Augen"), sondern wartet auf alle Daten und zeigt dann das Diagramm an. Gibt es eine Möglichkeit, diese "Echtzeit" Chart Redraw zu erreichen? – Ydenko

Wissen Sie, wie Sie node.js und socket.io verwenden können? –

vielleicht könnten Sie js setInerval Funktion verwenden. Aufruf der DrawChart Funktion alle n Mal in ms –

JSON-Stream in PHP generieren und als Google-Chart anzeigen

Antwort

Verwandte Themen