Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development

Pagpresenta ng Datos Gamit ng Flot

by
Read Time:8 minsLanguages:

Tagalog (Wikang Tagalog) translation by Anna Nelson (you can also view the original English article)

Maraming tutoryal tungkol sa paggawa ng bar graph sa CSS. Ngunit minsan, hindi sapat ang bar graph. Paano kung pagbago ang datos natin at mas angkop na ang line graph? O marahil hindi tayo kuntento sa bar graph lamang. Ang Flot, ajQuery plugin ay upang madaling gumawa ng magagandang mga graph.




Sa mundo na pinaiikot ng datos, madalas ay kailangan nating magpakita ng matataas na datos. Kadalasan ay kailangan nating magpakita ng hanay ng mga halaga na may pamulaan at kung gusto natin pagandahin ay maaaring gumamit ng larawan ng graph. Gusto ng tao ng mga larawan. Bakit? Dahil mas madaling magbasa ng datos kung nasa biswal na anyo. Ngunit maaaring maging mahirap ang paglikha ng picture graph at pag-update nito ng bagong datos. Sa tutoryal na ito, gagamit tayo ng jQuery plugin na tawag ay Flot upang agarang lumikha ng mga graph.

Hakbang 1

Kailangan natin ng datos upang makapagsimula. Sa tutoryal na ito, gagamit ng datos ng GDP sa ilang mga bansa na natagpuan sa Wikipedia. Sa kasamaang palad ay hanggang 2003 laman ang datos. Ngunit dahil hindi naman ito lekayon sa ekomomika, sasapat na iti. Ilagay ang datos sa simpleng tabke at magdagdag ng ilang linya upang ilarawan.

Pansinin na ang table ay nasa loob ng div na may id na “plotarea.” Ang graph na gagawin mamaya ay papalitan ang table na nasa loob ng div. Hindi magandang tignan ang table sa ngayon kaya magdagdag ng CSS upang maging mas presentable.

Dapat ay maging ganito ang itsura.

Data TableData TableData Table

Ngayon na nasa table na lahat ng datos, maaari nan idagdag ang JavaScript na gagawa ng graph. Hindi istriktong pangagailangan ang table ngunit magandang mayroon dahil sa dalawang dahilan:

  1. Madaling makapasok. Maraming bulag na web user at mahalaga na lahat ng nasa website ay madaling basahin. Ang mga nagbabasa sa screen ay madaling mababasa ang mga graph na ginawang Flot.
  2. Pagbaba ng grado. May maliit na bilang ng web user na hindi pinapagana ang JavaScript. Bagaman maliit lang na bilang ay hindi naman mahirap na magdagdag ng table upang maaari nilang makita ang mga datos.

Hakbang 2

I-link ang mga kailangang JavaScrip library. Mayroong dalawa, saka isa pa para sa suporta ng IE. Kailangang i-link muna ang jQuery pagkatapos ay ang Flot library dahil nakadepende ito sa jQuery. Dahil ay FLot ay ginagamit ang canvas na elemento upang iguhit ang mga graph, kailangang isali ang ExplorerCanvas script na ginagaya ang canvas na elemento sa IE. Hindi ito kailangan ng mga gumagamit ng Firefox, Opera at Safari kaya gagamit ng kondisyonal na komento upang siguraduhing ang mga gumagamit lang ng IE ang mag-download.

Simple lang ang paglikha ng graph sa Flot dahil marami sa mga opsyon ay may makabuluhang awtomatikong halaga. Ang ibig-sabihin nito ay kayang gumawa ng magandang graph nang kaunti lang ang gagawin, ngunit maaari ring ayusin ayon sa kagustuhan. Upang gumawa ng simpleng graph, kailangang tumukoy ng container element at ang datos na ilalagay sa graph. Kailangang ay may nakatukoy na lapad at tangkad ang container element kaya gagamit ng jQuery upang ang “plotarea” div ay mayroong lapad na 500px at tangkad na 250px.

Ang unang parametro ay isang jQuery object ng container element. Ang ikalawang elemento ay array na may tatlong dimensyon kung saan ang unang child array ay mga dataset at ang granchild array ay ordered pari na tinutukoy ang X at Y na halaga para sa Cartesian plane. Ilagay muna sa graph ang datos ng GDP ng US.

Single GraphSingle GraphSingle Graph

Ang data table na mayroon tayo noon ay dapat palitan ng magandang graph. Ang array na naglalaman ng dataset ay nasa loob ng isa pang parent array. Upang makagawa ng graph ng iba pang dataset, idadagdag lang bilang isa pang elemento sa parent array. Idagdag ang datos para sa ibang bansa sa table.

Multi GraphMulti GraphMulti Graph

Ngayon ay mayroon nang maganda-gandang graph, ngunit hindi natin alam kung aling linya ang para sa aling bansa! Kailangan natin ng gabay. Sinusuportahan ito ng Flot at kailangan lang ilagay ang mga dataset sa isang JSON object at magdagdag ng label element.

Graph with LegendGraph with LegendGraph with Legend

Hakbang 3

Nabaggit na dati na ang Flot ay maraming makabuluhang default. Bagaman ayos lang para sa karamaihan, pinapalabo ng gabay ang ilan sa mga datos. Ang Flot ay mayroong ikatlong parametro para sa mga opsyon sa JSON object.

Para maging mas madaling makita ang datos sa malayong dulo ng graph, aayusin ang background opacity at ang mga margin ng gabay.

OptionsOptionsOptions

Ang ilan (kagaya ko) ay gustong nakikita kung nasaan ang mga data point, kaya tukuyon sa mga pagpipilian na markahan ang bawat punto gamit ng bilog na may nakatukoy na radius.

PointsPointsPoints

Ngayon ay mayroon na tayong mga data point ngunit nasaan na ang mga linya?! Sadyaing buksan muli ang mga to.

Points with LinesPoints with LinesPoints with Lines

Ang pinal na code ay ganito ang itsura:

Konklusyon

Maraming posibilidad sa Flot. Ang Flot API dinetetalye ang iba’t ibang mga opsyon na mayroon para sa pag-ayos ng graph, kabilang ang pagtukoy ng iba’t ibang tipo, kulay, axes ng graph, at pati ang pagbuhay ng mga interactive feature gaya ng selection at zoom. Ang isa pang posibilidad ay ang gawin itong dinamika at gumawa ng JavaScript code na may datos mula sa database gamit ng PHP.

  • Mag-subscribe sa NETTUTS RSS Feed para sa mas marami pang tutoryal at artikulo tungkol sa web development.


Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.