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

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

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

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

זהו הקובץ שהמשתמש עובר אליו. הפונקציה DoodleChart() מפעילה את הפונקציה 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}]}
      ]
}

מידע נוסף: