Disegnare grafici dinamici tramite javascript /2
Forse potrebbe interessarti anche...
Dopo aver visto come disegnare grafici usando la struttura offerta da Google Charts oppure usando librerie in javascript da implementare nelle nostre pagine web, facciamo amicizia con un nuovo framework.
JS Charts è un generatore di grafici gratuito basato su javascript che richiede pochissima programmazione per essere usato. Basta preparare i dati in array javascript o in un file XML ed inserire lo script in una pagina html per vedere un grafico, senza bisogno di plugin particolari.
I grafici che si possono disegnare sono grafici a torta, grafici a barre e diagrammi a linee.
Il sito da cui è disponibile JS Charts mette a disposizione anche un’interfaccia per l’inserimento dei dati e l’esportazione dello script personalizzato pronto all’uso.
Le caratteristiche sono…
- non bisogna scrivere codice
- è facile da usare
- personalizzabile
- puoi farti i grafici online
- supporta i 3 tipi di grafici più comuni
- puoi salvare i tuoi grafici sul tuo account
- puoi pubblicare codice “hostato” sul sito di jscharts
- compatibile coi comuni browser
- non servono moduli server-side
- 100% javascript
- gratuito e senza watermark
È compatibile con i più diffusi browser: Firefox 1.5+, Internet Explorer 6+, Safari 3.1+, Opera 9+ su Windows; Firefox 1.5+,, Safari 2+ su Mac, e iPhone 1+.
Come si usa JS Charts?
Per prima cosa bisogna richiamare lo script all’interno dell’HEAD:
<script src="jscharts.js"></script>
Poi preparare un “contenitore” per il grafico:
<div id="grafico">TESTO ALTERNATIVO</div>
Infine inserire nella pagine lo script con i dati e le istruzioni per il grafico:
<script>
var myData = new Array([10, 20], [15, 10], [20, 30]);
var myChart = new JSChart('grafico', 'line');
myChart.setDataArray(myData);
myChart.draw();
</script>
La prima riga passa i dati a coppie: nei grafici a linea spezzata i valori indicano un punto della linea, in quelli a barre e a torta sono un nome ed un valore.
La seconda riga inizializza il grafico fornendo l’ID del contenitore e il tipo di grafico (line, bar, pie).
La terza invia i dati allo script e la quarta disegna il grafico.
Come detto, al posto di un array scritto direttamente nella pagine html, possiamo scrivere i dati in un file XML esterno:
<?xml version="1.0"?>
<JSChart>
<dataset type="line">
<data unit="10" value="20"/>
<data unit="15" value="10"/>
<data unit="20" value="30"/>
</dataset>
</JSChart>
…e scrivendo poi lo script in questa maniera:
<script>
var myChart = new JSChart('grafico', 'bar');
myChart.setDataXML('data.xml');
myChart.draw();
</script>
link: JS Charts
