Wypełnianie danych za pomocą kodu po stronie serwera

Aby uzyskać dane do wypełnienia wykresu, możesz użyć kodu po stronie serwera. Twój kod po stronie serwera może wczytywać plik lokalny, wysyłać zapytania do bazy danych lub pobierać dane w inny sposób. Poniższy przykład PHP pokazuje, jak odczytać dane wykresu z lokalnego pliku tekstowego po wysłaniu żądania strony. Możesz skopiować te pliki na swój serwer, jeśli obsługują one język PHP.

Uwaga: ta próbka wymaga jQuery w wersji 1.6.2 lub nowszej.

przykładowy plikPHP.html

Jest to plik, który przegląda użytkownik. Funkcja pullChart() wywołuje funkcję jQuery ajax(), aby wysłać zapytanie do adresu URL i zwrócić ciąg znaków JSON. Adres URL prowadzi do lokalnego pliku getData.php. Zwracane dane to w rzeczywistości plik DataTable zdefiniowany w lokalnym pliku sampleData.json. Ta DataTable jest używana do wypełniania wykresu kołowego, który jest 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 otrzymuje żą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 obiektu 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: