Điền dữ liệu bằng mã phía máy chủ

Bạn có thể sử dụng mã phía máy chủ để thu thập dữ liệu nhằm điền vào biểu đồ của mình. Mã phía máy chủ của bạn có thể tải tệp cục bộ, truy vấn cơ sở dữ liệu hoặc lấy dữ liệu theo cách khác. Ví dụ PHP sau minh hoạ việc đọc dữ liệu biểu đồ từ một tệp văn bản cục bộ khi có yêu cầu đối với một trang. Bạn có thể sao chép các tệp này vào máy chủ của riêng mình nếu máy chủ hỗ trợ PHP.

Lưu ý: Mẫu này yêu cầu jQuery phiên bản 1.6.2 trở lên.

tệp exampleUsingPHP.html

Đây là tệp mà người dùng duyệt xem. Hàm DrawChart() gọi hàm jQuery ajax() để gửi truy vấn đến một URL và lấy lại một chuỗi JSON. URL ở đây là của tệp getData.php cục bộ. Dữ liệu được trả về thực tế là DataTable được xác định trong tệp sampleData.json cục bộ. DataTable này được dùng để điền sẵn biểu đồ hình tròn, sau đó biểu đồ này hiển thị trên trang.

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

Tệp getData.php

Khi nhận được yêu cầu, tệp này sẽ trả về bản sao của tệp sampleData.json cục bộ.

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

?>

Tệp sampleData.json

Phiên bản JSON của DataTable nhỏ.

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

Thông tin khác: