پر کردن داده ها با استفاده از کد سمت سرور

می توانید از کد سمت سرور برای جمع آوری داده ها برای پر کردن نمودار خود استفاده کنید. کد سمت سرور شما می تواند یک فایل محلی را بارگیری کند، یک پایگاه داده را پرس و جو کند یا داده ها را به روش دیگری دریافت کند. مثال PHP زیر خواندن داده‌های نمودار از یک فایل متنی محلی را هنگام درخواست صفحه نشان می‌دهد. اگر از PHP پشتیبانی می کند، می توانید این فایل ها را در سرور خود کپی کنید.

توجه: این نمونه به jQuery نسخه 1.6.2 یا بالاتر نیاز دارد.

نمونه استفاده از فایل PHP.html

این فایلی است که کاربر در آن مرور می کند. تابع drawChart () تابع jQuery ajax را فراخوانی می کند تا یک پرس و جو را به URL ارسال کند و یک رشته JSON را برگرداند. آدرس اینجا مربوط به فایل محلی getData.php است. داده های برگردانده شده در واقع یک DataTable است که در فایل localData.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}]}
      ]
}

اطلاعات بیشتر: