Completar datos con código del servidor

Puede usar el código del servidor para adquirir datos y propagar su 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 cómo leer datos de un archivo de texto local cuando se solicita una página. Puedes copiar estos archivos a tu propio servidor, si es compatible con PHP.

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

Ejemplo de archivo PHP.html

Este es el archivo que explora el usuario. La función drawChart() llama a la función ajx() de jQuery para enviar una consulta a una URL y obtener una string JSON. La URL que se muestra aquí corresponde al archivo local getData.php. Los datos que se muestran son, en realidad, un DataTable definido en el archivo localDataData.json. 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 el archivo recibe una solicitud, muestra una copia del archivo localDataData.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

?>

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: