Заполнение данных с использованием серверного кода

Вы можете использовать серверный код для получения данных для заполнения диаграммы. Ваш серверный код может загружать локальный файл, запрашивать базу данных или получать данные каким-либо другим способом. В следующем примере PHP показано чтение данных диаграммы из локального текстового файла при запросе страницы. Вы можете скопировать эти файлы на свой сервер, если он поддерживает PHP.

Примечание. Для этого примера требуется jQuery версии 1.6.2 или более поздней.

пример использования файла PHP.html

Это файл, к которому просматривает пользователь. Функция drawChart() вызывает функцию jQuery ajax() для отправки запроса на URL-адрес и возврата строки JSON. Здесь URL-адрес локального файла getData.php. Возвращаемые данные на самом деле являются DataTable , определенными в локальном файле sampleData.json. Этот DataTable используется для заполнения круговой диаграммы, которая затем отображается на странице.

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

Файл getData.php

Когда этот файл получает запрос, он возвращает копию локального файла 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

?>

Файл sampleData.json

JSON-версия небольшого 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}]}
      ]
}

Дополнительная информация: