Wypełnianie danych za pomocą kodu po stronie serwera

Do zbierania danych, które wypełnią wykres, możesz użyć kodu po stronie serwera. Kod po stronie serwera może wczytać plik lokalny, przesłać zapytanie do bazy danych lub pobrać dane w inny sposób. Poniższy przykład w języku PHP pokazuje, jak odczytywać dane wykresu z lokalnego pliku tekstowego podczas żądania strony. Możesz skopiować te pliki na własny serwer, jeśli obsługuje on język PHP.

Uwaga: ten przykład wymaga jQuery w wersji 1.6.2 lub nowszej.

przykładKorzystanie z plikuPHP.html

Jest to plik, który przegląda użytkownik. Funkcja DrawChart() wywołuje funkcję jQuery ajax(), aby wysłać zapytanie na adres URL i zwrócić ciąg znaków JSON. Adres URL to lokalny plik getData.php. Zwracane dane to w rzeczywistości obiekt DataTable zdefiniowany w lokalnym pliku sampleData.json. Pole DataTable służy do wypełniania wykresu kołowego, który jest następnie renderowany na stronie.

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

Plik getData.php

Gdy ten plik otrzyma żądanie, zwraca kopię lokalnego pliku sampleData.json.

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

?>

Plik sampleData.json

Wersja JSON małego 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}]}
      ]
}

Więcej informacji: