Daten mit serverseitigem Code füllen

Sie können serverseitigen Code verwenden, um Daten zu erfassen und damit Ihr Diagramm zu füllen. Ihr serverseitiger Code kann eine lokale Datei laden, eine Datenbank abfragen oder die Daten auf andere Weise abrufen. Das folgende PHP-Beispiel zeigt, wie Diagrammdaten aus einer lokalen Textdatei gelesen werden, wenn eine Seite angefordert wird. Sie können diese Dateien auf Ihren eigenen Server kopieren, wenn dieser PHP unterstützt.

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

exampleUsingPHP.html Datei

Dies ist die Datei, zu der der Nutzer navigiert. Die FunktiondrawChart() 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 lokale Datei getData.php. Die zurückgegebenen Daten sind ein DataTable, der in der lokalen Datei sampleData.json definiert ist. Mit DataTable wird ein Kreisdiagramm erstellt, 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>

Datei getData.php

Wenn diese Datei eine Anfrage empfängt, 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

?>

Datei sampleData.json

Eine JSON-Version einer 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: