Semplice da utilizzare, permette di creare grafici di ogni tipo con poche e chiare istruzioni.
Tempo fa ho sviluppato una pagina web che mostrava su grafici di questo tipo, l'andamento dell'utilizzo della memoria e cpu di grossi server per monitorarne le prestazioni.
I dati venivano generati lato server, leggendo alcuni file csv generati giornalmente e spediti al client in formato json, così come se li aspetta flotr2.
Oggi non mi occuperò dell'integrazione con componenti lato server (ci mancano ancora un po' di strumenti) ma definirò direttamente negli script js i dati per generare i grafici.
I passi per generare i grafici sono molto semplici.
- Aggiungere alla vostra pagina il riferimento alla libreria flotr2.
- Creare un div vuoto con un identificatore univoco nella vostra pagina html
- Invocare
<div id="grafico"></div>
Flotr.draw(container, data, options);
- Flotr è l'oggetto globale creato dalla libreria flotr2 che espone la funzione draw
- container: è il div in cui si vuol visualizzare il grafico, che deve avere width e height
- data: sono i dati espressi come array di array es: [[x0, y0], [x1,y1],[x2,y2]...];
- options: è un oggetto js, opzionale, per configurare al meglio le caratteristiche del grafico
Per fare un semplice esempio, tracciamo il grafico della funzione y=x*x (x al quadrato)
Pagina html minima
<!doctype html>
<head>
<meta charset="utf-8" />
<title>Esempio di Utilizzo di flotr2</title>
</head>
<body>
<div id="container"></div>
<button onclick="mioPlotter.disegna('container')">Genera Grafico</button>
<script src="lib/flotr2.min.js"></script>
<script src="js/app.js"></script>
</body>
codice js presente in app.js
var mioPlotter = (function(){
var dati = [],
i,
disegna = function(id) {
var tavola = document.getElementById(id);
tavola.setAttribute("style","width:400px; height:200px;");
Flotr.draw(tavola,[dati]);
};
for (i = 0; i < 10; i++) {
dati.push([i,i*i]);
}
return {
disegna : disegna
};
})();
Abbiamo creato il modulo mioPlotter con una IIFE che espone il metodo disegna invocato al click del bottone.
Il metodo disegna accetta come parametro l'id della divisione in cui verrà disegnato il grafico.
I dati del grafico sono generati con il ciclo for, che aggiunge all'array delle coppie [i,i].
Vi lascio con un quesito: come fareste a stampare il grafico di y=sqr(x) ? (radice quadrata di x)
Non abbiamo usato il terzo parametro options, i cui valori di default sono elencati qui, con il relativo significato. Provate a giocare con i parametri di configurazione es:
Flotr.draw(container, [ data ], {
yaxis : {
max : 10,
min : -10
}
});
configurando in tal modo le proprietà dell'asse y: le altre proprietà, anche se non definite, mantengono i loro valori di default.
Ho aggiornato su github il progetto, fate un git pull o, se non lo avete ancora clonato, seguite le istruzioni di questo post
Alla prox
Ivan
Nessun commento:
Posta un commento