Daten mit serverseitigem Code füllen

Sie können serverseitigen Code verwenden, um Daten für das Diagramm zu erfassen. Ihr serverseitiger Code kann eine lokale Datei laden, eine Datenbank abfragen oder die Daten anderweitig abrufen. Das folgende PHP-Beispiel zeigt das Lesen von Diagrammdaten aus einer lokalen Textdatei, wenn eine Seite angefordert wird. Sie können diese Dateien auf Ihren eigenen Server kopieren, falls er PHP unterstützt.

Hinweis:Für dieses Beispiel ist jQuery Version 1.6.2 oder höher erforderlich.

beispiel.php.html-Datei

Dies ist die Datei, die der Nutzer aufruft. Die Zeichenchart()-Funktion ruft die Funktion jQuery ajax() auf, um eine Abfrage an eine URL zu senden und einen JSON-String zurückzugeben. Die URL hier ist die Datei „getData.php“. Die zurückgegebenen Daten sind eigentlich ein DataTable, der in der lokalen Datei „sampleData.json“ definiert ist. Mit DataTable wird ein Kreisdiagramm ausgefüllt, das dann auf der Seite gerendert wird.

<html>
  <head>
    <!--Load the AJAX API-->
    <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">
    
    // Load the Visualization API and the piechart package.
    google.charts.load('current', {'packages':['corechart']});
      
    // Set a callback to run when the Google Visualization API is loaded.
    google.charts.setOnLoadCallback(drawChart);
      
    function drawChart() {
      var jsonData = $.ajax({
          url: "getData.php",
          dataType: "json",
          async: false
          }).responseText;
          
      // Create our data table out of JSON data loaded from server.
      var data = new google.visualization.DataTable(jsonData);

      // Instantiate and draw our chart, passing in some options.
      var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
      chart.draw(data, {width: 400, height: 240});
    }

    </script>
  </head>

  <body>
    <!--Div that will hold the pie chart-->
    <div id="chart_div"></div>
  </body>
</html>

getData.php-Datei

Wenn diese Datei eine Anfrage erhält, wird eine Kopie der lokalen Datei sampleData.json zurückgegeben.

<?php 

// This is just an example of reading server side data and sending it to the client.
// It reads a json formatted text file and outputs it.

$string = file_get_contents("sampleData.json");
echo $string;

// Instead you can query your database and parse into JSON etc etc

?>

sampleData.json-Datei

Eine JSON-Version eines kleinen DataTable.

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

Weitere Informationen: