تعبئة البيانات باستخدام رمز من جهة الخادم

يمكنك استخدام التعليمات البرمجية من جانب الخادم للحصول على البيانات لتعبئة المخطط الخاص بك. يمكن للرمز البرمجي من جهة الخادم تحميل ملف محلي أو الاستعلام عن قاعدة بيانات أو الحصول على البيانات بطريقة أخرى. يوضح مثال PHP التالي قراءة بيانات المخطط من ملف نصي محلي عند طلب صفحة. يمكنك نسخ هذه الملفات إلى خادمك الخاص، إذا كان يدعم PHP.

ملاحظة: يتطلّب هذا النموذج الإصدار 1.6.2 من jQuery أو إصدارًا أحدث.

ملف example usingPHP.html

وهذا هو الملف الذي يتصفّح المستخدم عليه. تستدعي الدالة drawChart() دالة 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}]}
      ]
}

مزيد من المعلومات: