সার্ভার-সাইড কোড ব্যবহার করে ডেটা পপুলেট করা

আপনি আপনার চার্ট পূরণ করতে ডেটা অর্জন করতে সার্ভার-সাইড কোড ব্যবহার করতে পারেন। আপনার সার্ভার-সাইড কোড একটি স্থানীয় ফাইল লোড করতে পারে, একটি ডাটাবেস অনুসন্ধান করতে পারে বা অন্য কোনো উপায়ে ডেটা পেতে পারে। নিম্নলিখিত PHP উদাহরণটি একটি স্থানীয় পাঠ্য ফাইল থেকে চার্ট ডেটা পড়ার প্রদর্শন করে যখন একটি পৃষ্ঠার অনুরোধ করা হয়। আপনি এই ফাইলগুলি আপনার নিজের সার্ভারে অনুলিপি করতে পারেন, যদি এটি পিএইচপি সমর্থন করে।

দ্রষ্টব্য: এই নমুনার জন্য jQuery সংস্করণ 1.6.2 বা তার পরে প্রয়োজন।

exampleUsingPHP.html ফাইল

এটি সেই ফাইল যা ব্যবহারকারী ব্রাউজ করে। drawChart() ফাংশনটি jQuery ajax() ফাংশনকে একটি URL-এ একটি ক্যোয়ারী পাঠাতে এবং একটি JSON স্ট্রিং ফিরে পেতে কল করে। এখানে URLটি স্থানীয় getData.php ফাইলের। প্রত্যাবর্তিত ডেটা আসলে স্থানীয় sampleData.json ফাইলে সংজ্ঞায়িত একটি DataTable । এই 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 ফাইল

একটি ছোট DataTable একটি JSON সংস্করণ ।

{
  "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}]}
      ]
}

অধিক তথ্য: