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

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

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

exampleاستخدامPHP.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

?>

نموذج ملف DataData.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}]}
      ]
}

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