Follow me on Twitter Facebook Flickr Subscribe Feeds
 

JsCharts: creare grafici con Javascript

This entry was posted on February 11th, 2009 and is filed under Grafica, javascript.

js-charts-e28093-the-free-javascript-chart-generator_1234201551041

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…

  1. non bisogna scrivere codice
  2. è facile da usare
  3. personalizzabile
  4. puoi farti i grafici online
  5. supporta i 3 tipi di grafici più comuni
  6. puoi salvare i tuoi grafici sul tuo account
  7. puoi pubblicare codice “hostato” sul sito di jscharts
  8. compatibile coi comuni browser
  9. non servono moduli server-side
  10. 100% javascript
  11. 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>

Lo script è scaricabile al seguente link: http://www.jscharts.com/

Via | dozarte.com

Pixmac
Like this post? Share It! :)
Navigation:
«
»
Related Posts:
Comments

Comments are closed.

1 Trackbacks / Pingbacks

  1. JsCharts: creare grafici con Javascript | Simone D'Amico