Create Professional Trend Chart Page تطوير صفحة احصائية احترافيه

 تطويرصفحة احترافية Trend Chart باستخدام مولدات WIJMO التفاعلية.
متطلبات فهم الدرس : فهم طبيعة لغة الـ Html , JavaScript.
مستوى الدرس : 3 

حجم المشروع : 211KB




نظرة شاملة
مكتبة Wijmo تحتوي على تقنيات عديدة ومتطورة مواكبة لمتصفحات الويب , تحتوي حاليا المكتبة على اكثر من 40 ملف مفتوح مجاني قابل للتحميل و التجربة , الجدير بالذكر بأن المولدات المستخدمة مواكبة للغات البرمجية الجديدة HTML5 و JQuery , مع القدرة على ربط هذه الرسومات البيانية بقواعد البيانات بهدف اعطاء نظرة شاملة عن اداء النظام .

اولاً : الملفات المستخدمة في المشروع .


يحتوي المشروع على العديد من المولدات لتطوير الرسوم البيانية , جميع الملفات المستخدمة في المشروع بامكانكم تحميلها في نهاية الدرس , المشروع يتضمن على تقنيتين مستخدمة بشكل جوهري الا وهي ملفات تقنية الـ Js .

ثانيا : التغيرات الرئيسية في بنود الرسم البياني

1- قم بتحميل الملف في نهاية الدرس .

2- قم بفك الضغط من الملف. ( ستلاحظ تواجد فولدر و صفحة ويب , بامكانكم الضغط على ملف Trend ستلاحظ المشروع المراد التعديل عليه ).


3- قم بالنقر على الزر الايمن للفأره لصفحة الـ Trend , اختيار Open With , من ثم اختيار Note Pad .


4- من لوحة الكيبورد الخاصة بك , قم بالضغط على مفتاحي Ctrl+F للبحث .


5- قم بادراج الكلمة التالية لتغيير مسميات مفاتيح الرسم البياني :label , قم بتغيير [لاكثر من 10,000] الى ما يتوافق معك , قم باجراء العملية مره اخرى بالبحث بنفس الاسم وقم بتغيير المفاتيح الثلاث .


6- لتغيير عنوان الرسم البياني قم باجراء البحث التالي بنفس الاسلوب , ابحث عن الكلمة التالية [المستخدمين] قم بتغيير المسمى الى ما يتوافق معك على النحو التالي :


<h2>اعداد المستخدمين الاكثر تفاعلاً في تويتر للفترات من 2008 وحتى 2011 </h2>
إلى
<h2>اعداد زوار مدونة الامارات انفوجرافيكس </h2>

7- لادراج تعليقات على الشكل قم باجراء التعديل التالي , قم بالبحث عن كلمة بالضغط مره خرى Ctrl+F من لوحة المفاتيح عن كلمة [ التدريب ] على النحو التالي:

<h5>البيانات المستخدمة لاغراض التدريب و التعليم التقني فهي وهمية ولا تمت للواقع بصلة </h5>
الى
<h5>في الرسم البياني التالي يوضح اعداد المستخدمين في مدونة الامارات انفوجرافيكس</h5>
 

ثالثاً : التغيير في جوهر الرسم الاحصائي
الرسم يحتوي على ثلاث مفاتيح  , كل رسم تحتوي على نفس البنية ولكن التغيير هو في البيانات , متمثلة بالطريقة التالية :

{
label: “لاكثر من 10,000”,

legendEntry: true,
data: {
x: [new Date(2008, (11 – 1), 30)],
y: [6.38]
},
markers: {
visible: false,
type: “circle”
}
},

لتغيير قاعدة بيانات التريند , يتوجب عليك احتواء معلومات دقيقة قد تكون طويلة ولهذا قمنا بتخصيص في هذا المشروع صفحة مزودة بشعار و خلفية ذات احترافية , في مثال لاحد البيانات الوهمية المستخدمة لغرض التدريب , سنقوم بالتركيز على بند data , وذلك باجرء التغييرات في كل من x و y , تحتوي كل منهما على بيانات مرتبطة مع بعضها البعض , سنقوم بتوضيح مبادئ كل منهما x و y :-

x = تحتوي على التاريخ و اليوم و مدى محاذات الرسم للرسومات الاخرى المقارنة بها y = تحتوي عى القيمة المتغيره للتاريخ ومنها تشكل الرسم البياني و تبيان مدى المتغيرات لكل تاريخ مذكور في حقل x .

بناء على البرمجية اعلاه سنقوم بشرح البرمجية الخاصة ببند data set , البرمجية على النحو التالي:-

data: {
x: [new Date(2008, (11 – 1), 30)],
y: [6.38]
},

اثناء اضافة عدد في حقل x يتوجب عليك اضافة المتغير new Date لكل قيمة مدخلة حسب تواريخ. سنقوم بشرح كل رقم هنا :-
2008 = السنة 
11-1 = تمثل الشهر يناير و ليوم 11 .
30 = محاذات التصميم لقالب الرسم البيانيحسب ابعاد x .
6.38 = قيمة المتغير للتاريخ المبين في x .

إليكم مثال في الصورة ثبات المحاذاه 30 حسب التاريخ باختلاف متغير y اثناء اجراء المقارنة .

لاضافة التواريخ x قم بالاضافة بالطريقة التالية :

x: [new Date(2008, (11 – 1), 30),new Date(2008, (12 – 1), 9),new Date(2008, (12 – 1), 19)],

لاضافة قيمة المتغيرات y لكل تاريخ بالطريقة التالية:

y: [6.69, 6.31, 6.44

8- بعد الانتهاء من التعديل و تحديث البيانات , قم بالنقر من لوحة المفاتيح على زري Ctrl+S لحفظ التعديلات.

9- بامكانكم بعد الانتهاء التوجه للصفحة لمعاينة صفحة الرسم البياني ( ملاحظة البيانات في المثال هي لاغراض التدريب فقط وليست واقعية ).

10- في نهاية الدرس قمنا بتحميل جميل البيانات و الملفات الخاصة بالمشروع بامكانكم تحميل الدرس بالضغط على زر التحميل لتحميل ملفات المشروع , لاثراء المزيد من الشروح و الدروس المتخصصة في المجال التقني و التصاميم التفاعلية الذكية تابعونا على تويتر و الفيس بوك , في حالة اي استفسار يرجى كتابة السؤال اسفل المقالة شكراً.

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s