<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: سلسلة label: إضافة |
النوع: رقم التصنيف: شرائح |
|---|---|
| عيش غراب | 3 |
| بصل | 1 |
| الزيتون | 1 |
| كوسة | 1 |
| بيبروني | 2 |
هناك عدة طرق لإنشاء DataTable. يمكنك الاطّلاع على قائمة ومقارنة
لكل أسلوب في جداول البيانات
وDataView. يمكنك تعديل بياناتك بعد إضافتها، وإضافة الأعمدة والصفوف أو تعديلها أو إزالتها.
يجب تنظيم DataTable للرسم البياني بالتنسيق الذي يتوقعه الرسم البياني: على سبيل المثال، يتطلّب كل من المخططين الشريطي والمخططين الدائريين جدولاً من عمودين حيث يمثل كل صف شريحة أو شريط. العمود الأول هو تسمية الشريحة أو الشريط،
والعمود الثاني هو قيمة الشريحة أو الشريط. تتطلب المخططات الأخرى تنسيقات جداول مختلفة وربما
أكثر تعقيدًا. راجِع مستندات الرسم البياني لمعرفة تنسيق البيانات المطلوب.
بدلاً من تعبئة جدول بنفسك، يمكنك الاستعلام عن موقع إلكتروني متوافق مع بروتوكول مصدر البيانات لأدوات الرسومات البيانية،
على سبيل المثال، صفحة من "جداول بيانات Google". باستخدام الكائن google.visualization.Query، يمكنك إرسال طلب بحث إلى موقع إلكتروني وتلقّي عنصر DataTable معبأ يمكنك تمريره إلى الرسم البياني. يمكنك الاطّلاع على الموضوع المتقدم الاستعلام عن مصدر بيانات لمعرفة كيفية إرسال طلب بحث.