Creare grafici con jQuery e jQPlot

Ci sono molti plugin Javascript o classi PHP che permettono di creare grafici e statistiche, uno tra i migliori è indubbiamente jQPlot.
Chris Leonello, creatore di tale plugin ha infatti voluto incentrare il suo lavoro sulla facilità d’installazione di jQPlot.
Vediamo com’è possibile usufruire di grafici con questo strumento.

Download e Installazione

Nel repository utilizzato da jQPlot è possibile scaricare l’ultima versione, scompattando il pacchetto troverete la directory “examples”, da qui potete scegliere il grafico che più si addice alla vostra applicazione, nel nostro caso sceglieremo il grafico classico (Line Charts and Options).

Del pacchetto a noi interessano soltanto la directory “plugin”, il foglio di stile di jQPlot (jquery.jqplot.min.css o jquery.jqplot.css) e il core del plugin (jquery.jqplot.min.js o jquery.jqplot.css) oltre che, ovviamente jQuery.

Colleghiamo jQuery e facciamo lo stesso per il CSS di jQPlot e per il suo file Javascritp:

<script type="text/javascript" src="jquery.jqplot.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.jqplot.min.css">

Ora creiamo il nostro contenitore per il grafico:

<div id="grafico"></div>

A questo punto è necessario definire l’array che andrà a comporre le coordinate di ogni punto.

var linea1 =  [[1,3], [2,5], [3,11], [4,2]];

In questo array ogni singolo elemento è composto da due valori, il primo definisce l’asse X mentre il secondo l’asse Y.
Ora non rimane che attivare il plugin passandogli l’elemento in cui disegnare grafico (nel nostro caso il div con ID “grafico”) e l’array di coordinate appena composte.

var plot1 = $.jqplot('grafico', [linea1]);

Et voilà il nostro grafico è composto!

Come sempre il tutorial è disponibile per il Download

Condividi questo articolo:

• Tweet

Info sull' autore:

Appassionato di "web" fin dall'arrivo in casa del primo modem sono diventato nel 2008 uno Sviluppatore Web per Acktel. Sono un amante delle "novità" e dei nuovi linguaggi ma anche di grafica e disegno. Tutte le novità che scopro le condivido sul il mio Blog
Leggi gli altri articoli di Alessandro Alessio