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.

  1. 1

    gravatar

    Ciao, nemmeno a farlo apposta, in questi giorni avevo in mente di scrivere un post sul mio blog a tal proposito! Tutta fatica risparmiata :D
    Ti dico cosa penso: sono il meglio che c’è su internet al momento, ne ho provati a bizzeffe ma ne ho trovati pochi che si avvicinano vagamente a questi. Il “NON flash” è un vantaggio a dir poco enorme!

    Personalmente non considero un grosso difetto la mancanza della geolocalizzazione perchè credo si possano integrare con gmaps senza troppa fatica (beh in effetti non ho provato).

    Ritengo al massimo un difetto il fatto che la licenza sia a pagamento per usi commerciali (se non erro 80 dollari? e basta?)… Anche se in effetti son fatti così bene che per usi commerciali costano veramente pochissimo… detto ciò, sorvoliamo su questo mini problema e sfruttiamoli a dovere! ;)

    Ciao

    Mattia

    PS: presto riceverai un pingback ;)

  2. 2

    gravatar

    80 dollari sono una sciocchezza per tutto questo popò di javascript.. da quando ho iniziato ad usarli ho declassato parecchio Google charts!

  3. 3

    gravatar

    [...] Highcharts: grafici interattivi con jQuery ottimizzati anche per … [...]

  4. 4

    gravatar

    Highcharts mi sembra un ottimo prodotto e vorrei utilizzarlo.
    Ho gi visitato il sito e ho gi scambiato email con referenti prodotto, ma non sono convinto delle loro risposte.

    In pratica:
    vorrei implementare Highcharts in una applicazione web intranet; mi consigliano di acquistare la Single Website License (80 dollari). Non ho capito, per, quali sono i limiti della libreria su questa licenza:

    1) potr usarla in un numero indefinito di pagine dell’applicazione?
    2) “sviluppando in casa” (ambiente di produzione), potr poi portare la libreria sul server della intranet o avr bisogno di una ulteriore licenza?

    Poich avete gi usato la libreria, potreste darmi qualche informazione di dettaglio? GRAZIE.

  5. 5

    gravatar

    Ciao,
    i grafici sono fichissimi, ma ti consiglio di modificare il titolo.
    Con android non funzionano, perch il browser nativo non supporta SVG.

    Triste esperienza sul campo e che mi hanno fatto optare per una libreria server side, che genera svg e li converte poi in immagini jpg.

    Ciao, Davide.

  6. 6

    gravatar

    Ciao Davide, ni.. :)
    il browser nativo di Android non supporta SVG ma puoi comunque visualizzarli con Opera.
    Inoltre se accedi alla pagina delle demo di Highcharts riesci a visualizzare i grafici anche col browser nativo, non mi sono addentrato più di tanto nel capire il perchè..

  7. 7

    gravatar

    Complimenti per la descrizione.
    potresti realizzare qualcosa di più dettagliato (un passo passo) per noi comuni mortali :-)
    come si inseriscono questi grafici in un post di un blog fato con wordpress?
    io non sono riuscito a farlo

Lascia il tuo commento