Completar datos con código del servidor

Puedes usar el código del servidor para adquirir datos y propagar el gráfico. El código del servidor puede cargar un archivo local, consultar una base de datos u obtener los datos de alguna otra manera. En el siguiente ejemplo de PHP, se demuestra la lectura de datos de un gráfico desde un archivo de texto local cuando se solicita una página. Puedes copiar estos archivos en tu propio servidor, si es compatible con PHP.

Nota: Esta muestra requiere la versión 1.6.2 de jQuery o una posterior.

exampleUsingPHP.html

Este es el archivo que el usuario buscará. La función drawChart() llama a la función jQuery ajax() para enviar una consulta a una URL y obtener una string JSON. La URL que aparece aquí es del archivo getData.php local. Los datos que se muestran son, en realidad, un DataTable definido en el archivo sampleData.json local. Este DataTable se usa para propagar un gráfico circular, que luego se renderiza en la página.

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

Archivo getData.php

Cuando este archivo recibe una solicitud, muestra una copia del archivo sampleData.json local.

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

?>

Archivo sampleData.json

Una versión JSON de un DataTable pequeño.

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

Más información: