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

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



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?

Nessun articolo correlato

Esplora articoli simili per tag..

, , , , ,

Esplora articoli simili per categoria..

Ajax e Javascript Applicazioni Web Web 2.0

Varie info

Articolo pubblicato giovedì 17 febbraio 2011 alle 18:52

Segnala questo articolo.. e sentiti utile!

ico ico ico ico
ico ico ico ico

7 Commenti »

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

  1. 1

    Mattia Notari - Pubblicato il 17 02 2011 alle 23:00

    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

    davide - Pubblicato il 22 02 2011 alle 00:01

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

  3. 3

    Iomega SuperHero: in prova la base di ricarica e backup per iPhone/touch - Pubblicato il 24 02 2011 alle 16:07

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

  4. 4

    Marco - Pubblicato il 01 03 2011 alle 09:56

    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

    Davide - Pubblicato il 18 03 2011 alle 12:36

    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

    Davide - Pubblicato il 21 03 2011 alle 11:13

    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

    stefano - Pubblicato il 13 05 2011 alle 08:53

    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

 

http://livregratis.fr/ - http://club-ebook.fr/