Google Chart Api - قوقل تطرح ادوات لرسم الشارت للمبرمجين

[haman]

في الحقيقه لا اعلم حقيقه اين مكان هذا الموضوع بالضبط لانه يخص شريحه المبرمجين والمطورين بشكل عام.

ليس حكرا على لغه معينه فوودت ان اضعه هنا ليصل الى اكبر شريحه من المبرمجين .

طرحت قوقل ادوات api للمطورين لرسم الشارتات ويتم استخدامها عن طريق وضع المتغير في الرابط وينتج عن ذالك رسم للشارت .

انظر للمثال :

http://chart.apis.google.com/chart?c...hl=Hello|al9da

بامكانك ايضا وضع الصوره الناتجه في الموضوع .. مثال

تمعن النظر جيدا في الرابط وششاهد المتغيرات ، الناتج من هذا الرابط هو صوره png .

طريقه الاستخدام تتضح في الكود التالي :

http://chart.apis.google.com/chart?<parameter 1>&<parameter 2>&<parameter n> 

المقصود بالبارمترات هو البيانات المرسله يعني لو لاحظنا بالرابط السابق سنجد ان البرامتر الاول cht =p3 تعني نوع الشارت يساوي p3 وهو نوع مسمى مسبقا من قوقل ..

أنواع الشارتات الممكن رسمها عن طريق الاداة هي :

• Line Chart
• Bar Chart
• Pie Chart
• Venn diagram
• Scatter Plot

أما كيفيه استخدامها في بناء المواقع فيتم عن طريق الكود التالي وبامكانك ايضا استخدامها في المنتديات

 
<img src=" http://chart.apis.google.com/chart?cht=p3&chd=s:asR&chs=400x150&chl=A|B|C " / > 

والطريقه هي وضع الرابط مع بين وسمي ايميج

كود PHP:

<img src="http://chart.apis.google.com/chart?

chs=200x125

&amp;chd=s:helloWorld

&amp;cht=lc

&amp;chxt=x,y

&amp;chxl=0:|Mar|Apr|May|June|July|1:||50+Kb"

alt="Sample chart" />

هذي طريقه وضعها في ملف html .

استخدام المتغيرات فلو لاحظت الرابط ستجد ان المتغيرات هي التالي :

• chs هذا المتغير يعني حجم الشارت بالبكسل .
• chd=s: شارت البيانات .
• cht نوع الشارت وكما ذكرنا قوقل يوفر اربع انواع .
• chxt عناوين العمودين x و y .
• chxl اسماء البيانات على العمودين x و y .
• & الفاصل بين كل بارميتر وبارميتر .
• هذه المتغيرات ضروريه لكل نوع من انواع الشارت وهناك بارمترات اضافيه وهي الالوان المستخدمه والخلفيه .

للأستزاده اكثر حول الاداة من قوقل :

http://code.google.com/apis/chart/

وايضا هذا رابط لشرح طريقه الاستخدام مع asp.net

http://www.codeproject.com/KB/web-image/GooglePieChart.aspx

الاداة بامكانك استخدامها مع اي لغه برمجه .

مثال .. للشكل السابق لو بستخدمها في رسم الحصص السوقيه مثلن المتوقعه لسوق الاتصلات .

طبعن نسبه الاتصالات 60 بالميه ، موبايلي 30 بالميه ، زين 10 بالميه .

http://chart.apis.google.com/chart?cht=p3&chd=t:10.0,30.0,60.0&chs=350x180&chl=STC|Mopily|ZAIn 

مثال ثاني لو فرضنا هذا مسار سهم المجموعه مثل خلال الاشهر الماضيه ..

لاتدققون على الاشهر ( بعضها من راسي ) .

طبعا ترى التعامل معها سهل جدا جدا .. : )

Xxxx6’s Weblog

[سحاب اون لاين]

جزاك الله خيرا
لكن يا ريت لو في موضوع
فيه شرح للحكاية ده كلها باللغة العربية
ويثبت في ركن البرمجة
لانه مفيد جدا جدا جدا جدا جدا جدا

[haman]

جزاك الله خيرا
لكن يا ريت لو في موضوع
فيه شرح للحكاية ده كلها باللغة العربية
ويثبت في ركن البرمجة
لانه مفيد جدا جدا جدا جدا جدا جدا

الاداة لا تحتاج لشرح كثير بقدر ماتحتاج لقراءه الرابط بتمعن .. فمثلا لو حللنا الرابط هذا ..

http://chart.apis.google.com/chart?cht=p3&chd=t:10.0,30.0,60.0&chs=350x180&chl=STC|Mopily|ZAIn 

مثل للننظر الى أول باربمترك cht وش اختصار chart tayp اذا لم يخونني الاسبيلنق ..

وضعنا اماه الحرف p3 وهذا يرمز الى اختيارنا الى نوع الشارت المستخدم وهو الشارت الدائري الثلاثي ابعاد يمكنك معرفه انواع الشارتات الموجوده

• الرمز lc يعني لاين شارت وهو الشارت الخطي ..

• الرمز lxy وهو يعني الشارت متعدد الخطوط

• والشارت bar chart راح يرمز له بـ bhs و bvs وكل نوع بداخله انواع محدده .

• بالاخير حاولت شرح بعض الشارتات وبامكانك الاطلاع على الرابط اعلاه تبع قوقل والاستزاده حول كل شارت ورمزه ..

الحين راح نتكلم عن البارمتر الثاني وهو chd وهو اختصار لـ chart data اي بيانات الشارت

ولو تلاحظ انه تم الفصل بين كل بارمتر وبارمتر بـ &

البيانات لك الحق في التعامل مع ثلاث انواع من البيانات كما هو محدد من قوقل ..

فلو تلاحظ في رابطنا السابق استعملنا الحرف t وهو يرمز Text encoding

فقوقل توفر لنا ثلاث انواع من البيانات

• Extended encoding ويرمز له بحر ف e وتكون صيغته كذا

chd=e:<chart data string>

• Text encoding وهو اللي استعملناه في الرابط السابق ويتم تمثيل البيانات بالطريقه

  chd=t:10.0,30.0,60.0

هل لاحظ ان هناك نسب اللي حددنا 10 بالميه لشركه زين وهكذا .. بين كل رقم ورقم هناك فاصله .

في حاله اننا استعملنا شارت باكثر من عمود في البيانات مثلن راح نفصل بين كل بيانات عمود بالـ |

chd=t:10.0,58.0,95.0|30.0,8.0,63.0

• Simple encoding النوع الثالث من البيانات ويرمز له بـ s

chd=s:ATb19,Mn5tz

أما البارمتر الثالث وهو chs يرمز لـ شارت سايز يعني حجم الشارت وسابقها اخذنا الحجم

chs=350x180

طبعا الحجم بالبكسل .

أما البارمتر الاخير وهو chl وهو اسم البيانات او اليبل حق المحور x او y وكانت مدخلاتنا لهذا الشارت شركه زين والاتصالات وموبايلي بالترتيب على حسب وضع النسب اللي اخترناها .

chl=STC|Mopily|ZAI

----

في حاله انك تريد معرفه الاستخدام شف الرسومات في الصفحه حقت قوقل واضغط بزر يمين على الشارت وشوف الرابط وحلل الرابط وحاول تعدل فيه وتجرب وراح تفهمها .

هناك الكثير من البارمترات مثل الالوان وكيفيه التحكم فيها وكذا دمج شارتين مع بعض

ولكني شرحت انا الاساسيات فقط الباقي هي اختياري .

هناك جدول في الشرح لـ api حقت قوقل يوضح لك وش البارمترات او الخصائص المتوفر لكل شارت .

 
 
http://chart.apis.google.com/chart?cht=lc&chd=s:UVVUVVUUUVVUSSVVVXXYadfhjlllllllmmliigdbbZZXVVUUUTU&chco=0000FF&chls=2.0,1.0,0.0&chxt=x,y&chxl=0:|Jan|Feb|Mar|Jun|Jul|Aug|1:|0|25|50|75|100&chs=200x125&chg=100.0,25.0&chf=c,ls,0,CCCCCC,0.2,ffffff,0.2 

بالتوفيق ..

للمعلوميه فقط يحق لليوزر الواحد أن يستعلم 50 الف استعلام في اليوم وبعدها تقفل عليك .

Use of the Google Chart API is subject to a query limit of 50,000 queries per user per day

[سحاب اون لاين]

شكرا اخي هذا ما كنت اريده بالظبط
وموضوع الخمسوين الف استعلام هذه جيدة جدا اذا كنا سنستخدمه في برمجة اي سكربت
ويظهر الاحصائيات فقط لمدير ومشرفي الموقع

[haman]

اهلا اخوي سحاب سررت بمرورك واتمنى من أن الموضوع أفادك وأفاد الجميع ..

[أحمد خلف]

الله يبارك فيك موضوع قيم

[dnet]

كذا راح تكون عملية إنشاء التقارير بالرسوم البيانية سهلة جدا

[سحاب اون لاين]

شكرا اخي هذا ما كنت اريده بالظبط
وموضوع الخمسين الف استعلام هذه جيدة جدا اذا كنا سنستخدمه في برمجة اي سكربت
ويظهر الاحصائيات فقط لمدير ومشرفي الموقع

50 ألف زيارة لكل زائر وليس لكل موقع

[M. Al-Dhafeeri]

الله يبارك فيك موضوع قيم

[محب الله ورسوله]

50 ألف استعلام باليوم يعني ينعرض 50 ألف مرة لزوار مختلفين ثم ينغلق لليوم التالي
وليس للزائر الواحد لأنه لا يمكن أصلا لزائر واحد إستعلامها 50 ألف مرة في يوم !!!

[سحاب اون لاين]

50 ألف استعلام باليوم يعني ينعرض 50 ألف مرة لزوار مختلفين ثم ينغلق لليوم التالي
وليس للزائر الواحد لأنه لا يمكن أصلا لزائر واحد إستعلامها 50 ألف مرة في يوم !!!

سابحث مرة اخري

[الإمبراطور وحيد]

جميل جدا
ولا أروع
كنت ابحث عن اداة لعمل هذه الرسوم البيانية
لاستخدامه في برنامج الاحصائيات الذي ساطرحه قريبا ان شاء الله

وجوجل وفرها لنا

والحمد لله
تحياتي لكم