.: HosiriS :.

Informatica e non solo

Disegnare grafici dinamici con javascript: JSCharts

Posted by hosiris su marzo 18, 2011

Inizialmente non facevo molto uso di javascript, affidavo tutti i compiti a PHP e di conseguenza il server soffriva molto… poi ho scoperto che potevo alleggerire pesantemente il lavoro del server, sfruttando le potenti macchine che oggi vengono usate come client.
Oggi mi occuperò di come generare grafici senza caricare minimamente il server, usando quindi javascript.
JSChart è una libreria javascript per generare in maniera semplice e con poco codice dei grafici.

Una volta scaricato il file js, inseriamolo nella cartella del nostro sito, ed includiamo il codice nella pagina html:

<script type="text/javascript" src="jscharts.js"></script>

Successivamente è necessario inserire un div da utilizzare come contenitore per il grafico:

<div id="chart"></div>

Infine, creiamo un grafico:

<script type="text/javascript">
  var myData = new Array([10, 20], [15, 10], [20, 30], [25, 10], [30, 5]);
  var myChart = new JSChart('chart', 'line');
  myChart.setDataArray(myData);
  myChart.draw();
</script>

E’ possibile scegliere la tipologia di grafico da disegnare, in questo caso una linea, e di utilizzare un file esterno XML che contiene i dati.

Buon divertimento!

Una Risposta to “Disegnare grafici dinamici con javascript: JSCharts”

  1. […] mi occuperò di come generare grafici senza caricare minimamente il server, usando quindi […] Continua a Leggere Posted in Creare un Blog di […]

Lascia un commento

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...

 
%d blogger cliccano Mi Piace per questo: