Flot: الرسوم البيانية من خلال مكتبيات jQuery

   المحرّر: بوابتي


         




كنت قد تحدثت في مقال سابق عن الرسوم البيانية بتطبيقات الويب، وذكرت ساعتها نموذجا لإنتاج الرسوم البيانية وكان عن طريق لغة php.
ولكن الرسوم البيانية بتطبيقات الويب، بالإمكان أيضا إنتاجها باللغات البرمجية الأخرى، إذ يمكن فعل ذلك عن طريق مكونات فلاش، كما يمكن انتاجها عن طرق لغة JavaScript مباشرة أو من خلال المكتبيات (JavaScript framework).
على انه يمكن ذكر فرق جوهري في طرق إنتاج الرسوم على الويب، وهي أن هناك نوعان، أحدها تلك التي تستقي المعطيات جهة المتصفح وهي تلك العاملة بلغة JavaScript، ومنها تلك التي تستقي المعطيات جهة الخادم، وهي تلك العاملة بلغة php عموما، ومن النوع الثاني يمكن ذكر الطريقة التي ذكرتها المرة الفارطة (pChart) أوالطرق التي تستعمل مكونات فلاش والتي ربما سأتحدث عنها في مرات قادمة إن شاء الله.

مشروع Flot لإنتاج الرسوم عن طريق jQuery:

اليوم سأتحدث عن إنتاج الرسوم عن طريق JavaScript وبالتحديد عن طريق مكتبية jQuery، والمعطيات يتم إدخالها جهة المتصفح، ولكن هذا لا يعني انه لا يمكن تمريرها عن طرق معطيات مخزنة على الخادم، اذ يمكن بالطبع تحويل المعطيات من ملفات نصية او من قاعدة بيانات لمعطيات بدالات jQuery، وذلك عن طريق اي لغة جهة الخادم ك: php او asp مثلا.

المشروع اسمه Flot، وهو من المشاريع مفتوحة المصدر وهو متبنى من طرف قوقل حيث هو مسكن تحت (code.google)، وتقوم فكرة إنتاج الرسوم على استغلال وسم canvas، الذي يتم التعرف عليه بالمتصفحات التالية:
Firefox 2.x +
Safari 3.0+
Opera 9.5+
Konqueror 4.x+

بالنسبة لمتصفح انترنت اكسبلورر، فإنه للأسف لا يتعرف جيدا على الوسم canvas، ولذلك يتم محاكاة هذا الوسم خصيصا لهذا المتصفح من خلال دالة JavaScript في شكل ملف يتم إدراجه في رأس الصفحة التي تحمل الرسم، وذلك لحل هذه المشكلة.

ويرتكز عمل الرسوم عن طريق Flot، في استغلال دوال jQuery، ولذلك يتم ادراج ملف JavaScript الذي يؤشر لمكتبية jQuery في أول الملف المعني بإظهار الرسوم، ثم بعد ذلك يتم ادراج عنصر احتواء div، وهو الذي سيتم انتناج الرسم خلالهـا، ثم ياتي بعد ذلك دور دالة jQuery ($.plot) حينما ينتهي شحن الصفحة، حيث يتم الرسم، وتحتوي دالة ($.plot) على ثلاث عناصر: عنصر الإحتواء، ثم المعطيات ثم الخيارات وهي التي تتيح تبديل أنواع الرسوم.

وتتيح مكتبيات Flot عمليات كثيرة إضافة لعمليات الرسم في حد ذاتها، حيث بالإمكان القيام بعمليات التحديد، ثم التكبير والتصغير.

ترون هنا رسوما حقيقية باستعمال مكتبيات Flot، وهي من الأمثلة المستقات من صفحة المشروع

الروابط:

للمزيد حول مشروع Flot

المقال السابق حول الرسوم البيانية عن طريق pChart









 يسمح بالنقل، بشرط ذكر موقع "بوابتي" مصدر المقال، ويفضّل أن يكون ذلك في شكل رابط
 
 15-12-2008