Google u sklopu besplatnih alata Google charts omogućuje korisnicima savršen način za vizualizaciju podataka na web stranicama, od jednostavnih krivulja do kompleksnih dijagrama tokova.
Google charts koriste čistu HTML5/SVG tehnologiju (Scalable Vector Graphics) dok za stare verzije Internet explorera (<IE10) kao fallback koriste VML (Vector Markup Language).
Najčešći način korištenja Google Chartova je pomoću embedanja JavaScripta. U slučaju WordPressa u službenom plugin repozitoriju postoje pluginovi pomoću kojih možete embedati razne vrste chartova, uz pregršt opcija poput interaktivnosti dijagrama te mnoštva dodatnih opcija u administracijskom sučelju.
No, u velikom broju slučajeva običan korisnik neće imati potrebu koristiti većinu dostupnih funkcionalnosti već će , recimo, željeti samo objaviti kružni dijagram.
U smislu optimizacije web stranica (veličine stranice, broja skripti koje se učitavaju, broja upita prema bazi i sl.), sugeriram vam da za ovakve jednostavnije dijagrame ne koristite “teške” pluginove koji dodaju vašoj stranici 2-3 JavaScript datoteke te css datoteke.
Danas ćemo proći kroz postupak izrade WordPress shortcode-a pomoću kojeg jednostavno embedamo Google kružni dijagram. Dakle, nećemo koristiti pluginove koji sadržavaju vlastite JavaScript i CSS datoteke niti ćemo u našu stranicu upisivati JavaScript kod.
Kreiranje shortcode-a za kružne dijagrame
U svakom članku sugeriram da se sve izmjene ili dodavanja funkcionalnosti izvršavaju u functions.php datoteci child teme. Na taj način prilikom nadogradnje teme nećete izgubiti sve funkcionalnosti koje ste marljivo dodavali. Ako se ne osjećate dovoljno vješti, na kraju ovog članka pronaći ćete besplatan plugin koji sam kreirao od dolje navedenog koda. Prednost korištenja plugina u ovom slučaju je činjenica da uopće ne mjenjate datoteke teme te ga možete aktivirati/deaktivirati jednim klikom.
Slijedeći kod zalijepite u functions.php vaše child teme:
function chart_function( $atts ) { extract(shortcode_atts(array( 'data' => '', 'chart_type' => 'pie', 'title' => 'Chart', 'labels' => '', 'size' => '640x480', 'background_color' => 'FFFFFF', 'colors' => '', ), $atts)); switch ($chart_type) { case 'line' : $chart_type = 'lc'; break; case 'pie' : $chart_type = 'p3'; break; default : break; } $attributes = ''; $attributes .= '&chd=t:'.$data.''; $attributes .= '&chtt='.$title.''; $attributes .= '&chl='.$labels.''; $attributes .= '&chs='.$size.''; $attributes .= '&chf='.$background_color.''; $attributes .= '&chco='.$colors.''; return '<img title="'.$title.'" src="http://chart.apis.google.com/chart?cht='.$chart_type.''.$attributes.'" alt="'.$title.'" />'; } add_shortcode('chart', 'chart_function');
Još nam preostaje dodavanje koda kako bismo mogli izvršavati shortcode u sidebar widgetima (što po defaultu nije moguće).
// Omogući izvršavanje shortcode-a u sidebar widgetima add_filter('widget_text', 'do_shortcode');
Eto, kreirali smo funkcionalnost pomoću koje ćemo putem shortcode-a embedati kruže dijagrame u naše postove, stranice i/ili widgete. U shortcode možemo upisivati parametre poput pozadinske boje, boje i imena dijelova dijagrama, naslova dijagrama i njegovih dimenzija.
SHORTCODE – PRIMJER 1
[chart type="pie" title="Kružni dijagram" data="40.22,30.28,22.30,7.20" labels="Prva+Oznaka|Druga+Oznaka|Treća+Oznaka|Četvrta+Oznaka" background_color="FFFFFF" colors="D73030,329E4A,415FB4,DFD32F" size="460x220"]
Dijagram s ovim parametrima izgledati će ovako:
SHORTCODE – PRIMJER 2
[chart type="pie" title="Kružni dijagram" data="10,10,10,10,10,10,10,10,10,10" labels="Oznaka+1|Oznaka+2|Oznaka+3|Oznaka+4|Oznaka+5|Oznaka+6|Oznaka+7|Oznaka+8|Oznaka+9|Oznaka+10" background_color="FFFFFF" colors="8a56e2,cf56e2,e256ae,e25668,e28956,e2cf56,aee256,68e256,56e289,56e2cf,56aee2,5668e2" size="460x230"]
Dijagram s ovim parametrima izgledati će ovako:
Google kružni dijagrami – shortcode plugin
Alternativno, možete skinuti jednostavan plugin koji sam kreirao za ovaj članak a omogućuje vam gore navedene funkcionalnosti. Downloadajte ga, instalirajte ga kao svaki drugi plugin (upload zip datoteke) , aktivirajte i uživajte u Google kružnim dijagramima.
BTW, ako želite koristiti kružne dijagrame bilo gdje u svojoj temi, shortcode možete dodati koristeći do_shortcode funkciju, odnosno tako što u pripadajuću datoteku teme dodate slijedeći kod:
<?php echo do_shortcode("[tvoj_shortcode]");
Plugin za dodavanje Google kružnih dijagrama u člancima i widgetima putem shortcode-a.
NAPOMENA: testirano na WordPressu 4.0 koristeći slijedeće teme: Twenty Twelve, Twenty Thitreen, Twenty Fourteen.