sreda, 9. februar 2011

Dinamično risanje grafikonov s pomočjo Googla

Za večino izmed nas je običajen način risanja grafikonov tak, da v Microsoft Excelu ali OpenOffice.org Calcu pripravimo preglednico s podatki, izberemo ustrezen obseg podatkov ter narišemo grafikon.

Kadar želimo grafikov vstaviti v spletno stran, naredimo podobno, le da poleg opisanega grafikon še izvozimo in shranimo v grafično datoteko, ga naložimo na strežnik ali v orodje za urejanje vsebine strani (angl. CMS; Content Managing System) ter vključimo v stran. Pa je to edini oziroma pravi način?

Na vprašanje, če je to edini način, vam kar takoj odgovorim, da seveda ni edini. Na vprašanje, ali je način pravi, pa vam ne bom neposredno odgovoril - raje vam bom predstavil eno izmed drugih možnosti, ki je (z malo računanja) enostavna za uporabo in predvsem bolj elegantna za prikaz na spletu.

Gre za rešitev, ki jo ponuja Google in ima dokaj nezveneče ime Google Chart Tools (oziroma bivši Chart API). Več o storitvi si lahko preberete v navodilih za vključitev. Logika rešitve je taka, da vam izdelanega grafikona ni potrebno izvažati ali shranjevati, ampak namesto grafikona prejmete le običajno spletno povezavo. Če uporabnik tako povezavo naloži, se mu izriše grafikon, ki ste ga pripravili.

Poglejmo si na enostavnem primeru, kjer želimo prikazati deleže v odstotkih v obliki pite (podobne grafikone smo uporabili v članku o uporabi brskalnikov v Sloveniji). Podatki, ki jih želimo prikazati, so naslednji: Prvi delež je v višini 60%, drugi 30% in tretji 10%. Vse, kar moramo narediti, je sestaviti ustrezno povezavo s pravilnimi parametri, ki jih med seboj ločimo z znakom &. V primeru sem uporabil parameter chs za velikost grafa (chart size), chd za podatke (chart data) ter cht za tip grafa (chart type). Posamezne podatke v parametru chd se v spremenljivki t med seboj loči z vejico. Izdelana povezava izgleda takole:

http://chart.apis.google.com/chart?chs=550x250&chd=t:60,30,10&cht=p3

Če želimo prikazati še legendo, to storimo z uporabo dodatnega parametra chl (chart legend), v katerem podatke ločimo z navpično črto |:

http://chart.apis.google.com/chart?chs=550x250&chd=t:60,30,10&cht=p3&chl=Prvi%20dele%C5%BE|Drugi%20dele%C5%BE|Tretji%20dele%C5%BE

Če želimo grafikon vključiti v spletno stran, vključimo izdelano povezavo kot povezavo za vnos slike in graf se samodejno naloži v besedilu:

Način je preprost za uporabo, v navodilih pa si lahko preberete napredne možnosti, s katerimi boste lahko ustvarili napredne diagrame v več oblikah, kot so npr. spodnji primeri z Googlove strani:








Presodite, kateri način je za vas ustreznejši in kje je katerega boljše (in lažje) uporabiti v katerem primeru.

Ni komentarjev:

Objavite komentar