ايجاد نمودارهاي پويا در صفحات وب

دوستان، دلتون مي خواد نمودارهايي مثل اشكال زير رو توليد كنيد؟(تازه بهتون قول ميدم كه نياز به يه خط كد سمت سرور هم نداشته باشه.)
http://chart.apis.google.com/chart?c...00&chs=200x125http://chart.apis.google.com/chart?c...00A000,0,6.5,4http://chart.apis.google.com/chart?c...ry|March|April
API هاي گوگل به شما اجازه مي دهند تا به صورت پويا نمودارها را توليد كنيد. روي اين لينك كليك كنيدسپس عكس زير را مشاهده مي كنيد. آدرس عكس زير همان لينك است!
http://chart.apis.google.com/chart?c...oday|YesterDay
حالا يكمي تغيير تو پارامترهاي آخر آدرس ميدم.(اسم خودم رو به عنوان Label وارد نمودار كردم.)
http://chart.apis.google.com/chart?c...hl=ali|akhbari
براي توليد اين نمودارها فقط كافيه كه اون چيزي رو كه مي خواهيد ساخته بشه با همون آدرس به گوگل بفهمونيد
مثلا براي سايز از chs و براي ديتا از chd و براي ليبل از chl و براي نوع نمودار از cht و ........ استفاده ميشه.(يكي يكي بهشون ميرسيم.)

اين تايپيك در حال كامل شدن است.
در پست هاي بعدي روش كامل كار با اين امكان رو براتون ميگم.(البته اگه استقبال بشه!)
لطفا از ارسال تايپيك خودداري كنيد.

لطفا مطابق فهرست حركت كنيد.

1. مقدمه
2. كشيدن نمودار
   
   1. تعريف تئوري نمودارها(رياضي)
   2. انواع نمودار
      
      1. نمودار خطي(Line Chart)
      2. نمودار ميله اي(Bar Chart)
      3. نمودار دايره اي(Pie charts)
      4. نمودار ون(Venn diagrams)
      5. نمودار پراكندگي(Scatter plots)
      6. نمودار راداري(Radar charts)
      7. نقشه(Maps)
      8. گوگل متر(Google-o-meters)
      9. بار كد(QR codes)
   3. فرمت داده ها
      
      1. مقداردهي Data Set ها
      2. Text encoding
      3. Text encoding with Data scaling
      4. Simple encoding
      5. Extended encoding
      6. استفاده از چند مجموعه ديتايي همزمان
   4. اندازه نمودار
3. زيبا سازي نمودار
4. منابع

سلام
در سایت Google code یک کتابخانه با نام GChart وجود دارد که با استفاده از GWT توسعه داده شده است. این کتابخانه بدون استفاده از هیچ تکنولوژی خاصی (مانند فلش) به توسعه دهندگان برنامه های GWT این امکان را می دهد که چارت ها و دیاگرام های مورد نظر خود را رسم کنند.
این کتابخانه با استفاده از جاوااسکریپت چارت ها و نمودارها را رسم می کند.

http://code.google.com/p/gchart/

Chart Size

همانطور كه ديديد در انتهاي آدرس يك پارامتري به نام chs داشتيم. اين پارامتر را به صورت زير مقدار دهي مي كنيم:

chs=Width*height

لازم به ذكر است كه مقدار دهي طول و عرض تصاوير بر حسب Pixel صورت مي گيرد. در ضمن اين نمودارها نبايد اندازه اي غير مقعول داشته باشند. به عبارت ديگر، اگر نمودار شما بيش از 300000 پيكسل داشته باشد در نتيجه تصويري براي آن توليد نخواهد شد.
يعني مثلا تصويري به ابعاد 300*1000 يا 600*500 و ...

با توجه به اينكه دسته اي از برنامه نويسان علاقه اي به مباحث آماري ندارند(مثل خودم) تصميم گرفتم نوضيح مختصري از نمودارهاي قابل توليد با API گوگل رو بذارم.

1. Line Chart
   نمودار خطي
   اين نوع نموداربراي تاکيد بر روند و تغييرات مقادير در طول زمان بکار ميرود. اين نوع نمودار ابتدايي ترين نوع نمودار ميباشد. نمودار خطي در واقع فقط از يک خط تشکيل شده است که نقطه هاي ايجاد شده بر اساس اطلاعات موجود بر روي محور هاي X , Y را به يکديگر متصل ميکند.
   
   http://chart.apis.google.com/chart?c...29,26,35,70,25
2. Bar Chart
   نمودار ميله اي
   از اين نوع براي مقايسه مقادير در مقطعي از زمان استفاده ميشود.
   
   http://chart.apis.google.com/chart?c...=4d89f9,c6d9fd
3. Pie charts
   نمودار دايره اي
   اين نمودار براي نشان دادن نسبت بين اجزاء و يک کل بکار ميرود.
   
   http://chart.apis.google.com/chart?c...ry|March|April
4. Venn diagrams
   نمودار ون
   همه دوستان تو دبيرستان درس جبر رو خوندن و با اين نمودار آشنا هستند، پس نياز به توضيح نداره.
   
   http://chart.apis.google.com/chart?c...60,30,25,20,10
5. Scatter plots
   نمودار پراكندگي
   از اين نمودار براي نمايش دادن دامنه تغييرات و پراكندگي داده ها استفاده مي شود.
   
   http://chart.apis.google.com/chart?c...00&chs=200x125
6. Radar charts
   نمودار راداري
   نوعي از نمودار خطي است. با اين تفاوت که نمودار مزبور بجاي اينکه نسبت به محور ترسيم شود، نسبت به يک نقطه مرکزي ترسيم ميشود. يعني خط افقي در نمودار خطي ، در نمودار راداري بصورت دايره نشان داده ميشود.
   
   http://chart.apis.google.com/chart?c...50,60,70,80,90http://chart.apis.google.com/chart?c...00A000,0,6.5,4
7. Maps
   نقشه
   مي تونيد نقشه كل دنيا رو با رنگهاي مختلف براي هر كشوربه كاربران نمايش بديد
   
   http://chart.apis.google.com/chart?c...hf=bg,s,EAF7FE
8. Google-o-meters
   گوگل متر
   مي تونيد حداقل و حداكثر يه كاري رو با شاخص نمايش بديد.
   
   http://chart.apis.google.com/chart?c...t:70&chl=Hello
9. QR codes
   با اين امكان شما مي تونيد متون رو به صورت عكس در بياريد و در حقيقت به صورت كد شده به كاربر نمايش بديد.
   اين عكس بوسيله خواننده هاي QR code تا موبايل هايي كه اين قابليت رو داشته باشند قابل برگشت به متن است.
   
   http://chart.apis.google.com/chart?c...ari&choe=UTF-8

لازم به ذكر است كه تمام تصاوير بالا با استفاده از API گوگل نمايش داده شده است.
مي توانيد آنها را در پنجره اي ديگر باز كنيد و پارامترهاي مربوطه را مشاهده كنيد.
در ضمن فعلا همين رو بدونيد كه نوع نمودار با پارامتر cht مشخص ميشه.
اگه استقبال بشه تا آخرش رو براتون ميگم.
موفق باشيد

مقداردهي Data Set ها:

طبق قرارداد مجموعه اعداد(نقاط) مورد نظر ما براي نمايش بايد به فرمت خاص در پارامتر chd در انتهاي آدرس قرار بگيرند.
به عبارت زير دقت كنيد.

chd=t:25,30,45
chd=t:25,30,45|50,65,80

در دو مثال بالا شما دو نوع مقداردهي را مشاهده كرديد.(قرارداد: نقطه اول رو A مي گيرم و دومي را B و سومي را C)
در مثال اول ما فقط محور X را مقدار دهي كرديم.

A(x=25), B(x=30), C=(x=45)
A(x=25, y=50), B(x=30, y=60), C=(x=45, y=80

دقت كنيد كه در مثال دوم دو Data Set با | (Piep Line) از هم جدا شده اند.

همانطور كه مي دانيد در اين روش نمودار به وسيله آدرس اينترنتي ايجاد و توسط پارامترهاي انتهاي آدرس نيز كنترل مي شود.(Query String)
در آدرس ما با يك سري محدوديت روبرو هستيم
1. هر كاراكتري را نمي توانيم به عنوان پارمتر در آدرس قرار دهيم(كاراكترهاي كنترلي)
2. طول آدرس از لحاظ حجم محدوديت دارد كه بعضي از مرورگرها هر اندازه اي را حمايت نمي كند.(هم اكنون مرورگر IE آدرس با حجم بيش از 2k را ساپورت نمي كند، ولي FireFox و Chrome اينگونه نيستند.)

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

انواع Encoding ها:

1. Text encoding:
   اعداد اعشاري را از صفر تا 100 حمايت مي كند.
2. Text encoding with data scaling:
   حمايت مي كند هر عدد اعشاري مثبت و منفي را با تركيب يك پارامتر قياسي.
3. Simple encoding:
   اجازه مي دهد به شما تا مشخص كنيد اعداد صحيح رو از 0 تا 61 بوسيله حروف الفباي اعداد انگليسي كوچك و بزرگ و اعداد 0 تا 9(A-Z و a-z و 0-9)
4. Extended encoding:
   اجازه مي دهد به شما تا مشخص كنيد اعدادي به ارزش 0-4095 بوسيله دو كاراكتر از حروف الفبا و اعداد 0-9. كه اين مناسب ترين گزينه براي دامنه بزرگ اعداد و نمايش نمودارهاي بزرگ است.

در اين نوع داده اي ما اجازه خواهيم داشت كه اعداد در بازه 0-100 را به صورت متن ساده در URL بياوريم. اگر در دامنه اعداد، از عددهاي زير صفر و بالاي 100 استفاده كنيم، اونوقت تبديل به اعداد صفر و 100 مي شوند.

به عكس روبرو دقت كنيد:

http://chart.apis.google.com/chart?c...0,80,20&chxt=y

براي ايجاد اين عكس ما از اعداد زير استفاده كرديم:
chd=t: 55 , -20 , 150 , 80 , 20
همانطور كه مي بينيد از اعداد -20 و 150 خبري نيست. اين اعداد به 0 و 100 تبديل شده اند.
به مجموعه اي از اعداد كه باكاما از هم جدا مي شوند يك Data Set مي گوييم. و Data Set ها را نيز با | (Pipe Character) از هم جدا مي كنيم.
در پستهاي بعدي كاربرد | را خواهيد ديد.
توجه: اگر شما از محدوده عددي خاصي غير از 0 تا 100 استفاده مي كنيد بايد از Text encoding with data scaling استفاده كنيد.

با استفاده از اين نوع كدگذاري شما قادر خواهيد بود تا براي خودتان يك محدوده دلخواهي از اعداد را مشخص كنيد. و به اين وسيله شما يك پارامترهايي را به عنوان مينيمم و ماكزيمم مشخص مي كنيد.
توجه كنيد كه نمودار اعداد را در بازه 0 تا 100 به شما نشان مي دهد ولي در حقيقت اين اعدادي كه شما به عنوان ديتا وارد كرده ايد به نوعي در اين بازه قياس شده اند.
پارامترهاي مورد استفاده:

کد HTML:

---

chd=t:<chart data string>&
chds=<data set 1 minimum value>,<data set 1 maximum value>,...,<data set n minimum value>,<data set n maximum value>

---

پارامتر chd: براي داده هاي نقطه اي ما استفاده مي شود. دقت كنيد كه حتما عبارت "t:" را روبروي اين پارامتر بنويسيد(نشانگر Text Encoding)
پارامتر chs: براي پارامترهاي قياسي(Scaling) به كار مي رود.
data set اول در اين مجموعه به عنوان مينيمم دامنه اول و dada set دوم نيز به عنوان ماكزيمم دامنه اول به كار مي رود.
دو Data set بعدي براي دامنه مجموعه ديتايي دوم و همينطور الي آخر.(ما هنوز بيش از يك مجموعه ديتايي را نمي دونيم چيه. انشاالله بهش ميرسيم)
يه مثال ببينيد:
http://chart.apis.google.com/chart?c...s=0,300&chxt=y
در اين مثال ما بازه قياسي را از 0 تا 300 قرار داديم. ولي همونطوري كه مي بينيد روي نمودار Y از 0 تا 100 ديده ميشه. ولي اشكالي نداره، چون طبق نسبت تناسب سر جاشون قرار گرفتن.
chd=t: 50 , 150 , 50 , 300 , 100, 0
chds=0,300 >> نتيجه مي گيريم كه بازه عددي ما از 0 تا 300 هست.

عدد او ل50 هست در نتيجه>> 50/300 ميشه 1/6 كه لوله اول هست.
عدد او ل150 هست در نتيجه>> 150/300 ميشه نصف. كه لوله دومه. و همين طور الي آخر.

خوب اينم از كدگذاري با استفاده از مقياس.

با استفاده از اين نوع كدگذاري قادر خواهيد بود تا اعداد بازه 0 تا 61 را بوسيله يك كاراكتر حرفي-عددي كدگذاري كنيد.

در اين كدگذاري از روال زير استفاده مي شود.
در كاراكترهاي A-Z داريم: A=0 و B=1 و... تا Z=25
در كاراكترهاي a-z داريم: a=0 و b=1 و... تا z=25
در كاراكترهاي 0-9 داريم: 0 = 52 و 1=51 و ... 9 = 61
"-" هم به معني بي مقدار است.

اينم يه تابع جاوا اسكريپت آماده كه از سايتش گرفتم.

کد HTML:

---

var simpleEncoding =
  'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';

function simpleEncode(valueArray,maxValue) {

var chartData = ['s:'];
  for (var i = 0; i < valueArray.length; i++) {
    var currentValue = valueArray[i];
    if (!isNaN(currentValue) && currentValue >= 0) {
    chartData.push(simpleEncoding.charAt(Math.round((simpleEncoding.length-1) *
      currentValue / maxValue)));
    }
      else {
      chartData.push('_');
      }
  }
return chartData.join('');
}

---

http://chart.apis.google.com/chart?c...,0,64,8&chxt=y

در تصوير بالا از پارامتر chd=s:BTb19_,Mn5tzb استفاده شده كه s: به معني simple encoding است.
در ضمن chd=t:1,19,27,53,61,-1|12,39,57,45,51,27 هم همان تصوير بالا را توليد مي كند.
پس به اين نكته توجه كنيد كه دامنه simple encoding زير مجموعه اي از text Encoding است.

نمودار خطي(Line Chart)

يك نمودار خطي مانند همه انواع ديگر با عبارت روبرو مشخص ي شود:

cht=<line chart style>

كه در آن بايد <line chart style> مي تواند يكي از مقادير lc يا ls يا lxy باشد.
دقت كنيد كه اين سه مورد همه نمودار خطي توليد مي كنند.(با كمي تفاوت)

1. cht=lc
   در اين نوع، نقاط داده اي به طور يكنواخت بر روي محور X قرار مي گيرند و سپس به هم وصل مي شوند.
   http://chart.apis.google.com/chart?c...45,47,75,70,72
   chd=t:40,60,60,45,47,75,70,72
   
2. cht=ls
   اين نوع به عنوان نمودار spark(ترجمه لغوي:جرقه) شناخته مي شود. دقيقا مانند نوع lc عمل مي كند با اين تفاوت كه هيچ محوري كه رسم شده باشد را به صورت پيش فرض نشان نمي دهد.
   براي مشاهده تنظيم محورها به اينجا(كامل مي كنم) مراجعه كنيد.
   http://chart.apis.google.com/chart?c...29,26,35,70,25
   chd=t:27,25,60,31,25,39,25,31,26,28,80,28,27,31,27 ,29,26,35,70,25
   
3. cht=lxy
   در اين نوع، براي هر خط روي نمودار به دو مجموعه Date Set براي اعداد نياز است.
   http://chart.apis.google.com/chart?c...40,50,60,70,80
   chd=t:0,20,40,50,60,70,99|0,30,40,50,60,70,80

نمودار لوله اي(Bar Chart)

يك نمودار خطي مانند همه انواع ديگر با عبارت روبرو مشخص ي شود:

cht=<line chart style>

كه در آن بايد <line chart style> مي تواند يكي از مقادير bhs يا bvs يا bhv يا bvg باشد.
دقت كنيد كه اين موارد بالا همه نمودار لوله اي توليد مي كنند.(با كمي تفاوت)(مثل نمودارهاي قبلي)
به طور كلي اين نوع نمودار براي بازه هاي داده اي گسسته به كار مي روند. مثلا فرض كنيد كه مي خواهيد مقدار بارش باران را در ماههاي مختلف مشاهده كنيد. يا اينكه مي خواهيد مقدار بارش باران در ماههاي دو سال را باهم مقايسه كنيد. يا نيز مي خواهيد به صورت پشته اي مقايسه كنيد.

1. cht=bhs
   
   1. به نمودار زير دقت كنيد. اگر آن را در يك پنجره مرورگر ديگر باز كنيد مشاهده مي كنيد كه Data set آن از نوع simple text است.
      
      کد HTML:

      ---

      http://chart.apis.google.com/chart?cht=bhs&chs=200x125&chd=s:ello&chco=4d89f9

      ---

      http://chart.apis.google.com/chart?c...lo&chco=4d89f9
   2. در نمودار زير همانطور كه مي بينيد از دو مجموعه ديتايي استفاده شده است. مجموعه اول با خطوط آبي پررنگ و مجموعه دوم با آبي كم رنگ مشخص شده است. توجه كنيد كه مجموعه دوم در حقيقت مقدار افزايش نسبت به مقدار اول را نشان مي دهد.
      
      کد HTML:

      ---

      http://chart.apis.google.com/chart?cht=bhs&chs=200x125&chd=t:10,50,60,80,40|50,60,100,40,20&chco=4d89f9,c6d9fd&chbh=20

      ---

      http://chart.apis.google.com/chart?c...c6d9fd&chbh=20
2. cht=bvs
   اين نوع كاملا مانند مورد قبل است، با اين تفاوت كه خطوط لوله اي آن به صورت عمودي رسم مي شود.
   در مثال زير نمونه اي با دو مجموعه ديتايي را مشاهده مي كنيد كه با استفاده از Text encoding with Data scaling مقدار دهي شده است.(قبلا چگونگي اين نوع مقداردهي توضيح داده شده است. پس دقت كنيد كه مجموع دو عدد متناظر در هر مجموعه ديتايي بايد در رنج chds باشد.)
   
   کد HTML:

   ---

   http://chart.apis.google.com/chart?cht=bvs&chs=200x125&chd=t:10,50,60,80,40|50,60,100,40,20&chco=4d89f9,c6d9fd&chbh=20&chds=0,160

   ---

   http://chart.apis.google.com/chart?c...=20&chds=0,160
   
   دو مورد بالا در مواردي به كار ميامدند كه هميشه مجموعه ديتايي دوم قسمتي از مجموعه ديتايي اول باشد.(مثلا مجموعه ديتايي اول ميزان تولد نوزادان و مجموعه ديتايي دوم مرگ نوزادان در حين تولد باشد.) حال فرض كنيد كه مي خواهيد مصرف گاز يك خانوار را در دو سال متوالي نمايش دهيد و با توجه به اين نكته كه ممكن است سال دوم مصرف كاهش پيدا كرده باشد. در اين گونه موارد از اين نمودارها استفاده مي شود.
   
3. cht=bhg
   با توجه به جملات پاراگراف قبل و نمودار، كارايي نمودار كاملا مشهود است.
   
   کد HTML:

   ---

   http://chart.apis.google.com/chart?cht=bvs&chs=200x125&chd=t:10,50,60,80,40|10,60,100,40,20&chco=4d89f9,c6d9fd&chbh=20&chds=0,160

   ---

   http://chart.apis.google.com/chart?c...=20&chds=0,160
4. cht=bvg
   اين نوع هم مانند بالاست با اين تفاوت كه افقي رسم مي شود.
   
   کد HTML:

   ---

   http://chart.apis.google.com/chart?cht=bhg&chs=200x125&chd=s:el,or&chco=4d89f9,c6d9fd

   ---

   http://chart.apis.google.com/chart?c...=4d89f9,c6d9fd

خب. اينم از نمودار لوله اي. فقط دو تا پارامتر رنگ نمودار و نيز عرض و فاصله بين لوله ها موند كه در يك فرصت مناسب براتون ميذارم.
يا حق.

اين پست براي ايجاد پست هاي بعدي رزرو شده است.3

اين پست براي ايجاد پست هاي بعدي رزرو شده است.4

ما منتظریم.:قلب:

توجه: این سایت های زیر با آی پی ایران کار نمی کنند. پس از تغییر آی پی به این آدرس ها بروید:

برای مشاهده انواع نموداری تصویری و دیدن قابلیت ها آن ها و دستکاری آن ها برای یادگیری:

http://imagecharteditor.appspot.com/

مستندات و معرفی این سرویس در گوگل:

http://code.google.com/apis/chart/image/
http://code.google.com/apis/chart/im...ng_charts.html

اما این گونه نمودار ها که به نمودار های تصویری (Image Charts) معروف اند کمی قدیمی شده است.

سرویس جدید نمودار کشی گوگل را از اینجا دنبال کنید:

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