إعداد البيانات

<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.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);

      // Callback that creates and populates a data table, 
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {

      // Create the data table.
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Topping');
      data.addColumn('number', 'Slices');
      data.addRows([
        ['Mushrooms', 3],
        ['Onions', 1],
        ['Olives', 1], 
        ['Zucchini', 1],
        ['Pepperoni', 2]
      ]);

      // Set chart options
      var options = {'title':'How Much Pizza I Ate Last Night',
                     'width':400,
                     'height':300};

      // Instantiate and draw our chart, passing in some options.
      var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }
    </script>
  </head>

  <body>
<!--Div that will hold the pie chart-->
    <div id="chart_div" style="width:400; height:300"></div>
  </body>
</html>

 

إنشاء DataTable

تتطلب جميع الرسوم البيانية بيانات. تتطلب الرسوم البيانية في "أدوات الرسم البياني من Google" تضمين البيانات في فئة JavaScript التي تسمى google.visualization.DataTable. يتم تعريف هذا الصف في مكتبة Google المرئية التي تم تحميلها سابقًا.

DataTable عبارة عن جدول ثنائي الأبعاد فيه صفوف وأعمدة، حيث يحتوي كل عمود على نوع بيانات ومعرّف اختياري وتصنيف اختياري. وينشئ المثال أعلاه الجدول التالي:

type: string
label: Topping		 type: number
label: الشرائح
عيش الغراب 3
بصل 1
الزيتون 1
كوسة 1
بيبروني 2

تتوفّر عدّة طرق لإنشاء DataTable، ويمكنك الاطّلاع على قائمة لكل أسلوب ومقارنته في DataTables وDataDatas. يمكنك تعديل بياناتك بعد إضافتها، وإضافة الأعمدة والصفوف أو تعديلها أو إزالتها.

يجب تنظيم DataTable للرسم البياني بالتنسيق الذي يتوقعه الرسم البياني: على سبيل المثال، يتطلب كل من المخططات الشريطية والمخططات الدائرية جدولاً من عمودين حيث يمثل كل صف شريحة أو شريطًا. العمود الأول هو تصنيف الشريحة أو الشريط، والعمود الثاني هو قيمة الشريحة أو الشريط. تتطلب المخططات الأخرى تنسيقات مختلفة للجدول وربما تكون أكثر تعقيدًا. اطّلع على مستندات الرسم البياني لمعرفة تنسيق البيانات المطلوب.

بدلاً من تعبئة جدول بنفسك، يمكنك إجراء طلب بحث عن موقع إلكتروني متوافق مع بروتوكول مصدر بيانات أدوات الرسم البياني، مثل صفحة "جداول بيانات Google". باستخدام الكائن google.visualization.Query، يمكنك إرسال طلب بحث إلى موقع إلكتروني وتلقي كائن DataTable معبأ يمكنك تمريره إلى المخطط. اطلع على الموضوع المتقدم إجراء طلب بحث عن مصدر بيانات لمعرفة كيفية إرسال طلب بحث.

 

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