אכלוס נתונים באמצעות קוד בצד השרת

תוכלו להשתמש בקוד בצד השרת כדי לקבל נתונים כדי לאכלס את התרשים. הקוד בצד השרת יכול לטעון קובץ מקומי, להריץ שאילתה על מסד נתונים או לקבל את הנתונים בדרך אחרת. הדוגמה הבאה ב-PHP ממחישה קריאה של נתוני תרשים מקובץ טקסט מקומי כשנשלחת בקשה לדף. אפשר להעתיק את הקבצים האלה לשרת שלכם, אם הוא תומך ב-PHP.

הערה: דוגמה זו דורשת jQuery בגרסה 1.6.2 ואילך.

דוגמה לשימוש בקובץ PHP.html

זה הקובץ שהמשתמש נכנס אליו. הפונקציה {6}Chart() קוראת לפונקציה jQuery ajax() כדי לשלוח שאילתה לכתובת URL ולקבל מחרוזת JSON. כתובת ה-URL כאן היא של הקובץ getData.php המקומי. הנתונים שמוחזרים הם למעשה DataTable המוגדר בקובץ exampleData.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}]}
      ]
}

מידע נוסף: