استخدام Google Chart في الرسوم البيانية

تُعد Google Chart من المكتبات المعروفة في JavaScript
لإنشاء الرسوم البيانية داخل صفحات الويب. وتوضح الصفحة الأصلية
أن مكتبة Google Chart لا تقتصر على الرسوم البسيطة فقط،
بل تمتد من المخططات الخطية المعتادة إلى أنواع أكثر تقدمًا
مثل المخططات التنظيمية والخرائط الجغرافية.

ما الذي تدعمه Google Chart؟

تذكر الصفحة أن Google Chart توفر عددًا كبيرًا من أنواع الرسوم الجاهزة،
ومن الأنواع المذكورة فيها:

• Scatter Chart
• Line Chart
• Bar / Column Chart
• Area Chart
• Pie Chart
• Donut Chart
• Org Chart
• Map / Geo Chart

وهذا يوضح أن Google Chart ليست مجرد مكتبة لمخططات الأعمدة أو الخطوط،
بل مكتبة أوسع يمكن استخدامها في أكثر من نوع من المشاريع،
سواء كانت تعليمية أو تحليلية أو إدارية.

كيف تستخدم Google Chart؟

تبدأ الصفحة بشرح طريقة الاستخدام الأساسية، وتوضح أن أول خطوة
هي إضافة رابط charts loader إلى الصفحة.

<script src=\"https://www.gstatic.com/charts/loader.js\"></script>

بعد ذلك يجب إضافة عنصر div داخل الصفحة
ليكون هو المكان الذي سيظهر فيه الرسم البياني.

<div id=\"myChart\" style=\"max-width:700px; height:400px\"></div>

وتوضح الصفحة أن هذا العنصر يجب أن يملك
معرفًا فريدًا حتى يمكن الوصول إليه
عند رسم المخطط.

تحميل Google Graph API

بعد إضافة الـ loader وعنصر الرسم، تشرح الصفحة أن الخطوة التالية
هي تحميل واجهة Google Graph API.
وتعرض العملية على شكل خطوتين:

• تحميل Visualization API مع الحزمة corechart
• تحديد دالة callback يتم تنفيذها بعد اكتمال التحميل

google.charts.load(\'current\',{packages:[\'corechart\']});
google.charts.setOnLoadCallback(drawChart);

وبهذا تصبح الصفحة جاهزة لاستدعاء دالة
drawChart() التي ستقوم بإعداد البيانات
ورسم المخطط المطلوب.

الرسم الخطي Line Graph

أول مثال تعرضه الصفحة هو
Line Graph.
وفيه يتم تعريف البيانات باستخدام
google.visualization.arrayToDataTable()،
ثم يتم تحديد خيارات الرسم مثل العنوان وأسماء المحاور،
وفي النهاية يتم إنشاء LineChart ورسمه.

function drawChart() {
  const data = google.visualization.arrayToDataTable([
    [\'Price\', \'Size\'],
    [50,7],[60,8],[70,8],[80,9],[90,9],[100,9],
    [110,10],[120,11],[130,14],[140,14],[150,15]
  ]);

  const options = {
    title: \'House Prices vs Size\',
    hAxis: {title: \'Square Meters\'},
    vAxis: {title: \'Price in Millions\'},
    legend: \'none\'
  };

  const chart = new google.visualization.LineChart(document.getElementById(\'myChart\'));
  chart.draw(data, options);
}

هذا المثال يوضح الصيغة الأساسية الشائعة في Google Chart:

• إعداد البيانات
• إعداد الخيارات
• إنشاء نوع الرسم المطلوب
• استدعاء draw()

المخططات المبعثرة Scatter Plots

بعد ذلك توضح الصفحة أنه يمكن تحويل نفس البيانات
إلى Scatter Plot
فقط من خلال تغيير نوع الرسم من
LineChart إلى
ScatterChart.

const chart = new google.visualization.ScatterChart(document.getElementById(\'myChart\'));

وهذا يبيّن أن Google Chart تسمح بإعادة استخدام
نفس البيانات ونفس بنية الكود تقريبًا،
مع الاكتفاء بتغيير نوع الرسم فقط.

Bar Charts

ثم تعرض الصفحة مثالًا على
Bar Chart.
وفي هذا المثال يتم استخدام بيانات عن إنتاج النبيذ
في عدد من الدول، ويتم تحويلها إلى جدول بيانات
ثم تمريرها إلى مخطط الأعمدة.

function drawChart() {

  const data = google.visualization.arrayToDataTable([
    [\'Contry\', \'Mhl\'],
    [\'Italy\', 55],
    [\'France\', 49],
    [\'Spain\', 44],
    [\'USA\', 24],
    [\'Argentina\', 15]
  ]);

  const options = {
    title: \'World Wide Wine Production\'
  };

  const chart = new google.visualization.BarChart(document.getElementById(\'myChart\'));
  chart.draw(data, options);

}

هذا النوع من الرسوم مناسب جدًا عندما نريد
مقارنة قيم منفصلة بين عدة فئات أو دول أو عناصر.

Pie Charts

بعد ذلك تشرح الصفحة أنه يمكن تحويل
Bar Chart
إلى Pie Chart
بسهولة، فقط عبر استبدال نوع الرسم.

الصفحة تذكر صراحة أن المطلوب هو استبدال:

google.visualization.BarChart

بـ:

google.visualization.PieChart

ويكون سطر الإنشاء كالتالي:

const chart = new google.visualization.PieChart(document.getElementById(\'myChart\'));

وهذا يوضح مرة أخرى أن Google Chart تعتمد على
نفس الأساس تقريبًا في جميع الرسوم:
الاختلاف الأكبر يكون في نوع الرسم نفسه،
أما البنية العامة للكود فتبقى متشابهة.

Pie Chart ثلاثية الأبعاد

لا تتوقف الصفحة عند الرسم الدائري العادي،
بل تشرح أيضًا كيف يمكن عرض
Pie Chart ثلاثي الأبعاد.
وتوضح أن ذلك يتم بإضافة خيار واحد فقط
داخل كائن options.

const options = {
  title: \'World Wide Wine Production\',
  is3D: true
};

إذن التحويل إلى 3D هنا لا يحتاج إلى إعادة كتابة الرسم كله،
بل مجرد إضافة خاصية:
is3D: true.

ما الذي يميز Google Chart؟

من خلال أمثلة الصفحة يتضح أن Google Chart تتميز بأنها:

• توفّر أنواعًا كثيرة من الرسوم الجاهزة
• تعتمد على بنية واضحة وسهلة التكرار
• تسمح بإعادة استخدام البيانات نفسها مع أنواع رسوم مختلفة
• لا تحتاج إلا إلى loader وعنصر div ودالة رسم

كما أن ذكر الصفحة لأنواع مثل
Org Chart وMap / Geo Chart
يعطي انطباعًا واضحًا بأنها مناسبة أيضًا للمشاريع
التي تحتاج إلى عرض تنظيمي أو جغرافي،
وليس فقط الرسوم التقليدية الشائعة.

الخلاصة

يوضح هذا الدرس أن Google Chart
توفر طريقة منظمة وسهلة لبناء الرسوم البيانية داخل صفحات الويب.
وتبدأ آلية العمل بإضافة
loader.js، ثم عنصر
div للرسم، ثم تحميل
Visualization API
باستخدام google.charts.load()
وتحديد دالة callback عبر
google.charts.setOnLoadCallback().
بعد ذلك تعرض الصفحة أمثلة مباشرة على
Line Graph وScatter Plot
وBar Chart وPie Chart
و3D Pie، مع الإشارة أيضًا إلى أن المكتبة
تدعم أنواعًا أخرى مثل
Org Chart وMap / Geo Chart.