Completamento dei dati utilizzando codice lato server

Puoi utilizzare il codice lato server per acquisire i dati per completare il grafico. Il codice lato server può caricare un file locale, eseguire query su un database o recuperare i dati in altri modi. L'esempio PHP seguente mostra la lettura dei dati di un grafico da un file di testo locale quando viene richiesta una pagina. Puoi copiare questi file sul tuo server, se supporta PHP.

Nota:questo esempio richiede jQuery versione 1.6.2 o successive.

file di esempioPHP.html

Questo è il file a cui viene indirizzato l'utente. La funzione pullChart() chiama la funzione jQuery ajax() per inviare una query a un URL e ottenere una stringa JSON. L'URL qui è del file getData.php locale. I dati restituiti sono in realtà DataTable definiti nel file sampleData.json locale. Questo DataTable viene utilizzato per compilare un grafico a torta, che viene poi visualizzato sulla pagina.

<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

Quando questo file riceve una richiesta, restituisce una copia del file sampleData.json locale.

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

Una versione JSON di un DataTable di piccole dimensioni.

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

Scopri di più: