Highcharts: grafici interattivi con jQuery ottimizzati anche per iPhone / Android

Pubblicato da Davide, giovedì 17 febbraio 2011 7 Commenti »

Questo articolo e' stato scritto piu' di 6 mesi fa.. In teoria non cambia nulla, sed panta rei: se trovi link o informazioni datate segnalalo pure. :)



Loading..

Come ti sembra questo grafico? Prova a cliccare sugli elementi della legenda e vedrai che è interattivo, potresti utilizzarlo per simulare il rispetto degli obiettivi in assenza di fatturato ottenuto su alcune zone.. Prova a selezionare col mouse una zona del grafico e vedrai puoi fare lo zoom sui dati che ti interessano.. Queste e tante altre funzionalità si possono ottenere grazie ad Highcharts, un validissimo javascript open source che lavora con jQuery per renderizzare grafici più o meno complessi e molto accattivanti.

Il tutto senza flash, cosa a cui difficilmente si poteva rinunciare in era pre-jQuery se si volevano ottenere i medesimi risultati. Le tipologie di grafici sono molteplici: si va dalla immancabile torta alla più ricercata rappresentazione demografica, dal grafico a barre al potente grafico zoomabile sull’andamento delle quotazioni in borsa. E’ inoltre possibile caricare i dati direttamente da una tabella definita in HTML all’interno della pagina, con poche righe di codice javascript.

Sotto è riportato il codice, opportunamente commentato, dell’esempio mostrato in questo articolo.
//Carico il javascript di highcharts, dopo aver caricato jQuery
<script src="js/highcharts.js" type="text/javascript"></script>
<script type="text/javascript">// <![CDATA[

$(document).ready(function () {
//GRAFICO CARICATO QUANDO IL DOM DEL DOCUMENTO HTML E' PRONTO
chartTurnover = new Highcharts.Chart({
chart: {
//id del div all'interno del quale il grafico deve essere visualizzato
renderTo: 'content4',
zoomType: 'xy'},
title: {
//descrizione grafico: titolo e sottotitolo
text: 'Fatturato - Obiettivi'
},
subtitle: {
text: 'Confronto tra vendite effettive e target previsionali'
},
//definizione dell'asse X
xAxis: [
{
categories: ['Qrt1', 'Qrt2', 'Qrt3', 'Qrt4']
}],
//definizione dell'asse Y
yAxis: [{
// aggiungo il simbolo dell'euro alle etichette dell'asse Y
labels: {
formatter: function() {
return this.value +'€';
}
},
//Descrizione posta a lato dell'asse Y
title: {
text: 'Targets'
}
}],
//Definizione del testo da visualizzare nei tooltip
tooltip: {
formatter: function() {
return ''+ this.series.name + ' ' + this.x +': '+ this.y + '€';
}
},
//Posizionamento legenda
legend: {
layout: 'vertical',
align: 'left',
x: 120,
verticalAlign: 'top',
y: 0,
floating: true
},
//Definisco il tipo di rappresentazione grafica
plotOptions: {
column: {
stacking: 'normal'
}
},
//Definizione delle serie di valori
series: [{
name: 'Fatturato zona1',
type: 'column',
data: [14183, 12451, 7254, 9658]
},
{
name: 'Fatturato zona2',
type: 'column',
data: [2183, 10451, 5254, 7658]
},
{
name: 'Fatturato zona3',
type: 'column',
data: [2300, 451, 4254, 4658]
},
{
//Ultima serie, di tipo linea (spline), per valorizzare i target
name: 'Targets',
type: 'spline',
data: [18175, 21556, 17145, 19897]
}]
});
//end
// ]]></script>

Data la sua natura di puro css e javascript, questo grafico è agilmente fruibile anche da dispositivi mobili come iPhone o Android, inoltre è ben renderizzato dai principali browser. Si tratta di un prodotto davvero interessante che potrebbe tornare utile in diverse applicazioni stand-alone, a costo zero. Ben diverso dal classico Google Charts, servizio comodissimo che però pecca in quanto ad interattività: all’utente viene infatti restituita in quel caso una immagine statica.

Cosa Manca? Mancano i “geo-grafici“, ovvero la possibilità di visualizzare i dati su una cartina; mancano i tachimetri, per visualizzare in un colpo d’occhio l’andamento più o meno positivo di un indicatore. Sono comunque cose a cui si può sopperire spulciando bene l’elenco dei plugin jQuery..
E voi? Che cosa utilizzate in questi casi?

7 Commenti »

Puoi lasciare un tuo commento, oppure fare un trackback dal tuo sito.

Vuoi essere il primo a lasciare un commento per questo articolo? Utilizza il modulo sotto..

Lascia il tuo commento

 

Utilizzando il sito, accetti l'utilizzo dei cookie da parte nostra. maggiori informazioni

Questo sito utilizza i cookie per fonire la migliore esperienza di navigazione possibile. Continuando a utilizzare questo sito senza modificare le impostazioni dei cookie o clicchi su "Accetta" permetti al loro utilizzo.

Chiudi