Mengisi Data Menggunakan Kode Sisi Server

Anda dapat menggunakan kode sisi server untuk memperoleh data guna mengisi diagram. Kode sisi server Anda dapat memuat file lokal, membuat kueri database, atau mendapatkan data dengan cara lain. Contoh PHP berikut menunjukkan pembacaan data diagram dari file teks lokal saat halaman diminta. Anda dapat menyalin file ini ke server Anda sendiri, jika file tersebut mendukung PHP.

Catatan: Contoh ini memerlukan jQuery versi 1.6.2 atau yang lebih baru.

contohMenggunakanPHP.html file

Ini adalah file yang dijelajahi pengguna. Fungsi drawChart() memanggil fungsi jQuery ajax() untuk mengirim kueri ke URL dan mendapatkan kembali string JSON. URL di sini adalah file getData.php lokal. Data yang ditampilkan sebenarnya adalah DataTable yang ditentukan dalam file sampleData.json lokal. DataTable ini digunakan untuk mengisi diagram lingkaran, yang kemudian dirender di halaman.

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

File getData.php

Saat menerima permintaan, file ini akan menampilkan salinan file sampleData.json lokal.

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

?>

File sampleData.json

Versi JSON dari DataTable kecil.

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

Informasi Selengkapnya: