Gordana RADOVIĆ

1. jun 2021.

Većina developera navikla je da gleda u crnu pozadinu sa šarenim slovima. Hiljade linija kôda u jednom dokumentu, često podeljenih na više fajlova koji se međusobno pozivaju. Na sve to treba dodati debelu bazu podataka, kojoj šaljete upite i prikazujete podatke... Pa se onda naizmenično pitate zašto kôd ne radi ili, što je još gora varijanta, zašto radi? Sve je to deo posla, međutim, treba misliti i na krajnji cilj, a to je klijent koji nije navikao na beskonačne nizove podataka koji samo developerima imaju smisla. Sve te podatke treba prikazati ne samo na način da imaju smisla, već je poželjno i da budu atraktivni, da privlače pažnju i probude posmatrača ako je zaspao pregledajući podatke.

Vizuelizacija podataka nije nikakva novost. Ako ste čuli za Microsoft Excel, čuli ste i za pite (Pie Charts) i ostale vidove grafikona, koji imaju za cilj istu stvar: prikazivanje podataka na slikovitiji i pristupačniji način. Koja je prednost implementacije vizuelizacije podataka u odnosu na Excel? Mnogostruka! Grafikoni su atraktivniji, raznovrsniji, animirani i dinamičniji u odnosu na slikovne prikaze, jer su u stanju da se menjaju simultano sa promenom podataka. Ovom prilikom izdvojili smo nekoliko ovakvih rešenja za vizuelizaciju, lakih za implementaciju i sa neobičnim setom rešenja za prikazivanje podataka. Namenjeni su uglavnom developerima, a dolaze u nekoliko oblika: gotov kôd, plug-in, link u vidu CDN i slično.

Google Charts

Za prvog predstavnika ovog „klana” alatki odabrali smo Google Charts (developers.google.com/chart). Ne zato što je najbolji i za primer ostalima, već zato što je besplatan, prilično lako se implementira i ako niste dosada koristili ovaj način vizuelizacije, ovo je odlično mesto za početak. Uz to, svi znaju za Google, a gotovo smo sigurni i da Google zna za sve nas.

Kada odete na matičnu stranicu, bilo bi poželjno da prvo pregledate svu dokumentaciju. Google se potrudio da vam maksimalno olakša korišćenje svojih rešenja, međutim, ukoliko ne volite da čitate, možete da odaberete jedan od primera i kliknete za prikaz gotovog kôda. Kompletna rešenja možete da kopirate u svoj fajl, a zatim da ga uredite i prilagodite konkretnim potrebama. To, u principu, znači da ćete promeniti vrednosti u data i eventualno dodati svoje preferencije u sekciji <style>. Sve ostalo je Google „iskodirao” za vas. Uz odabir tipa vizuelizacije dolazi apsolutno sve što vam je potrebno - set podataka i funkcija i minimalni style, kako biste se lakše snašli.

Izbor grafikona i prikaza koje nudi Google Charts nije nimalo skroman. Počevši od klasičnih grafikona sa stubovima, koji mogu da budu 2D i 3D, preko pie chartova, mapa Evrope i drugih kontinenata, do tabela, gantograma, histograma... Stvarno, zavidan broj besplatnih opcija i mogućnosti.

Google Charts preporučujemo ako ste developer junior ili ukoliko vam potrebe nisu velike. Zašto ovo kažemo? Zbog toga što su gotovi grafikoni jednolični u smislu dizajna, te da su animacije jednostavne: hoverovanjem miša pojavljuje se ograničen dijapazon dodatnih informacija. Kada sumiramo utiske, Google Charts jeste za preporuku, ali ukoliko vam je potrebno da grafikoni budu atraktivni i da dodaju wow efekat podacima, moraćete da tražite dalje.

FusionCharts

Sledeći predstavnik je FusionCharts (www.fusioncharts.com), koji donosi preko 90 tipova različitih prikaza podataka i 965 različitih mapa. To je previše ako ste naumili da sve pregledate, ali autori su sadržaj podelili u kategorije, pa ćete se lakše snaći ako na umu već imate šta vam treba.

Da biste se lakše upoznali sa svim opcijama koje FusionCharts pruža, na matičnom sajtu možete pronaći inspiraciju za svoj rad. U pitanju su primeri koje možete da prenesete na kompjuter i vidite kako sve funkcioniše u praksi. Dozvoljeno je menjati parametre koji utiču na izgled: od tema koje su ponuđene i imaju čisto estetsku funkciju, preko organizacije parametara, pa do samih vrednosti.

Ovaj plug-in možete da primenite na gomilu platformi, od JS i PHP, preko Reacta i Vuea, pa do Jave. Problem, uslovno rečeno, sa FusionCharts je u tome što nije besplatan - pretplate kreću od 500 dolara na godišnjem nivou. Za taj novac samo jedan developer dobija licencu, a i sa njom ne dobija Full Source Code i za tu opciju treba izdvojiti mnogo više novca. Dobra stvar je to što postoji probni period (14 dana) u kom bez ograničenja možete da koristite sve funkcije, pa ako vidite da vam se baš dopada ono što ste našli, zaronite u novčanik.

Highcharts

Još jedan veliki igrač u svetu grafikona je Hightcharts (www.highcharts.com, 99 MB). Slično kao kod prethodnika, i ovde postoji velik broj gotovih rešenja koje možete da prilagođavate za svoje potrebe.

Highcharts u projekat može da se uključi preko CDN ili preko NPM install, kako god vam je draže. Takođe, u svakom momentu na meniju je i mogućnost eksportovanja u JPEG ili PDF obliku, tako da grafikon koji je formiran na osnovu podataka iz baze može da se prikaže bilo gde. Moguće ga je, recimo, importovati u Word dokument, odštampati i tako dalje.

Hightcarts je besplatan, ali samo za ličnu i nekomercijalnu upotrebu. Ukoliko želite da ga koristite komercijalno potrebno je da kupite licencu.

Chart.js

Chart.js (www.chartjs.org) po veličini i izboru ne može da se poredi sa prethodna tri rešenja. Dok su Google Charts i FusionCharts predviđeni za developere koji rade na gabaritnijim projektima i kojima je potreban veliki broj tipova grafikona kako bi zadovoljili sve potrebe koje mogu da iskrsnu, Chart.js nema tako velike apetite.

Ukoliko radite na manjem projektu, Chart.js je sve što vam je potrebno. U pitanju je mala biblioteka sa svega devet vrsta grafikona, što je često sasvim dovoljno. Ono što nam se najviše dopalo kod ovog rešenja je animacija. Sem vrlo lepog dizajna, svaki prikaz podvučen je animacijom, a na raspolaganju je i interaktivno prikazivanje podataka na prelaz mišem.

Implementacija ne zahteva nikakvu instalaciju, već glavni fajl sa kôdom, koji obavezno sadrži <canvas> tag preko koga se renderuje grafikon, kopirate u radni fajl. Pored ovog, neophodne su i datoteke Config.js i Setup.js. To je sva mudrost, a prikazi su atraktivni i efektni. Uz sve to, Charts.js je potpuno besplatan za krajnjeg korisnika, pa izvolite. Ako bismo grafikone ocenjivali samo po lepoti, ovo bi bio naš pobednik.

Datawrapper

Sem rešenja za developere, koji se sastoje isključivo iz kôda, na testu nam se našao i jedan drugačiji izdanak iz klase. Datawrapper (www.datawrapper.de) je opcija koju mogu da koriste i developeri, jer na kraju možete da kopirati shortcode i postavite ga gde god da želite, ali čitava priča se odvija malo drugačije nego u primerima koje smo do sada naveli. Naime, kreiranje grafikona obavlja se online, direktno na sajtu, a počinje importovanjem tabele ili kopiranjem podataka direktno iz dokumenta.

U maniru „korak po korak”, birate koja vrsta prikaza najbolje odgovara podacima, odnosno, na koji način će biti najbolje predstavljeni. Najbolji i najatraktivniji deo prikaza su mape, gde sami unosite podatke u vidu gradova ili geografskih širina i dužina koji se zatim pojavljuju na odabranoj mapi. Postoji nekoliko načina za eksportovanje: podatke možete direktno da uploadujete na svoj sajt pomoću shortcodea, da podelite link ili da izradite PNG sliku.

Kao što vidite, pravi kôd nećete dobiti, pa je ovo rešenje koje preporučujemo ljudima koji nisu developeri, ali imaju svoj sajt gde žele da objavljuju podatke i prate njihovu promenu. Odlična opcija je to što u svakom trenutku možete menjati i dopunjavati grafikone, pa, tako, i podatke i njihov prikaz uvek možete da držite u najsvežijem mogućem obliku.

• • •

U zavisnosti od potreba i ukusa, postoje različite opcije za vizuelizaciju podataka. Developeri mogu da se odluče za opcije strogo namenjene za njih, ali to nije obavezno. Uvek postoji i neka druga opcija koja podrazumeva manje programiranja, a više „samo ubaci podatke i pusti nekog drugog da obavi sporiji deo posla” pristupa. Sem Datawrappera koji smo naveli kao primer za tako nešto, postoje i drugi (tu su, recimo, RAW ili Tableau), ali smo njega apostrofirali kao reprezentativan primerak.

Kada striktno govorimo o alatkama namenjenim developerima, trend je (čast izuzecima) da se napravi što više rešenja i da se obuhvati što više mogućih potreba. Kod Google Chartsa videli smo da dizajnerski to ne mora da bude na vrhunskom nivou da bi obavljalo dobar posao. S druge strane, postoje manji projekti koji su se skoncentrisali na atraktivnost, kao što je to slučaj kod Chart.js.

Nijedno od pomenutih rešenja nije najbolje u svemu, pa, tako, ni cilj ovog teksta nije bio da se na koncu proglasi pobednik, već da se obavi prezentacija širokog dijapazona opcija, ukaže na neke nove mogućnosti i prošire vidici, ako do sada niste došli na ideju da prikazivanje podataka obavljate direktno.