Google Chart API Part -1

Tuesday, 20 July 2010 22:39

ဒီညေတာ့ မိုးကလည္း အဖြဲဖြဲနဲ႔ ေကာင္းေနတာေၾကာင့္ ေကာ္ဖီေလး တစ္ခြက္နဲ႔ Net Tuts+ ကိုေရာက္

ခဲ့ပါတယ္။    ဖတ္စရာေတြက   မ်ားျပားလွတာေၾကာင့္  ဘာကစဖတ္ျပီး စမ္းၾကည့္ရမွန္း မသိေအာင္ကို

ျဖစ္ရပါတယ္။ ဒီလိုနဲ႔ Google Charts API အေၾကာင္းဖတ္ကို ဖတ္လိုက္ေတာ့ လြယ္ကူျပီး ျပန္စမ္းၾကည့္

ခ်င္သူေတြ အဖို႔လည္း အလြယ္တကူ လုပ္ၾကည့္ႏိုင္တာမို႔ မ်ႇေဝလိုက္ပါတယ္။

Google Charts API ဆိုတာ

Web Page ထဲမွာ Charts ေတြကို static ျဖစ္ေစ၊ interactive ျဖစ္ေစ အလြယ္တကူထည့္ႏိုင္ေအာင္ လုပ္ေပးထားတဲ့ API တစ္ခုပဲျဖစ္ပါတယ္။

Static vs Interactive Charts

ဒီ Charts Tool မွာ API ႏွစ္ခုရွိပါတယ္။ အဲဒါေတြကေတာ့

* Image Charts.- Use the Google Chart API. (Static)

* Interactive Charts.- Use the Google Visualization API

Image Charts/Static ကေတာ့ ပိုလြယ္ေပမယ့္ Interactive Charts ကေတာ့ Java Script library ကိုသုံးထားျပီး event trigger

လုပ္ႏိုင္ေသာေၾကာင့္ သုံးရတာ flexible ျဖစ္တာကို ျမင္ႏိုင္ပါတယ္။

Static Chart

ဒီ Method ကေတာ့ အရမ္းကို လြယ္လြန္းလို႕ super easy လို႕ေတာင္ေျပာႏိုင္ပါတယ္။

http://chart.apis.google.com/chart?cht=p3&chs=450x200&chd=t:2,4,3,1&chl=Phones|Computers|Services|Other&chtt=Company%20Sales&chco=ff0000

ဒီ code ေလးကို copy ကူးျပီး browser မွာ run လိုက္ရင္ ေအာက္က ပုံးေလးကို auto generate လုပ္ေပးမွာ ျဖစ္ပါတယ္။

ဒီလိုေလးသာ လုပ္လိုက္ရင္ image အေနနဲ႔ ထည့္လို႕ရျပီဗ်ာ။

<img src='http://chart.apis.google.com/chart?cht=p3&chs=450x200&chd=t:2,4,3,1&chl=Phones|Computers|Services|Other&chtt=Company%20Sales&chco=ff0000'>

ကဲဘယ္ေလာက္ေတာင္ လြယ္သလဲဗ်ာ။ ေျပာပါတယ္ super easy ပါဆိုမွ ...

အလုပ္ပုံကေတာ့ Google Charts API ကို GET (or) POST သုံးျပီး request လုပ္လိုက္တဲ့ အခါ API ကေန png image ကို return

ျပန္ေပးလိုက္တာ ျဖစ္ပါတယ္။

ဒီ URL ကို ခဲြျခမ္း ၾကည့္မယ္ ဆိုရင္ေတာ့

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

Base URL ျဖစ္ျပီး က်န္တာေတြက ဒီ URL အတြက္ parameters ေတြပဲ ျဖစ္ပါတယ္။

Mandatory Parameters

ဒီ URL အတြက္ မပါမျဖစ္ထည့္ ေပးရမယ့္ parameters ေတြကိုၾကည့္မယ္ ဆိုရင္ေတာ့

cht=p3

Chart Type အတြက္ ျဖစ္ပါတယ္။ p3 ဆိုတာကေတာ့ 3D pie chart ကိုဆိုလိုပါတယ္။ ရႏိုင္တဲ့ chart type ေတြကိုေတာ့ ဒီမွာ ၾကည့္ႏိုင္

ပါတယ္။

chs=450×200

chart image size ပဲျဖစ္ပါတယ္။

chd=t:2,4,3,1

chart မွာျပမယ့္ data အတြက္ ျဖစ္ပါတယ္။ ပထမ စာလုံး t  ကေတာ့ data format အတြက္ ညြန္းတာ ျဖစ္ျပီး ဒီ example မွာေတာ့

basic text format ကိုသုံးထားပါတယ္။

Optional Parameters

title, labels, font types, colors, gradients စတာေတြကို optional parameters အေနနဲ႔ ထည့္ေပးႏိုင္ပါတယ္။ ဒီ example

မွာၾကည့္ရင္ေတာ့

chl=Phones|Computers|Services|Other

chart label အတြက္ ျဖစ္ပါတယ္။ ဒီဟာေလးနဲ႔ တြဲျပီးၾကည့္ရင္ ပိုျမင္သာပါတယ္။ chd=t:2,4,3,1

chtt=Company%20Sales

chart title အတြက္ ျဖစ္ပါတယ္။

chco=ff0000

Chart color အတြက္ ျဖစ္ပါတယ္။ တကယ္လို႕ gradient နဲ႔ျပခ်င္ရင္ေတာ့ colors ႏွစ္ခုကို ဒီလိုျပႏိုင္ပါတယ္။ chco=ff0000,00ff00

Interactive Charts ကေတာ့ ရွည္တာေၾကာင့္ ေနာက္ post တစ္ခု အေနနဲ႔ ေရးမွ ပိုအဆင္ေျပမယ္။ အရမ္းရွည္ေတာ့လည္း ဖတ္ရတာ

ပ်င္းဖို႔ ေကာင္းပါတယ္။ စိတ္ပါရင္ေတာ့ Live Chart Playground မွာ ေဆာ့ၾကည့္ႏိုင္ပါတယ္။ ေဆာ့ၾကည့္ဗ် ေရလည္လန္းတယ္။

• Add New
• Search

Comments (0)

Write comment

Your Contact Details:

Name:

Email: do not notifynotify

Website:

Comment:

Title:

UBBCode:         -color-aquablackbluefuchsiagraygreenlimemaroonnavyolivepurpleredsilvertealwhiteyellow -size-tinysmallmediumlargehuge

Message:

Security

Please input the anti-spam code that you can read in the image.

Joomla components by Compojoom