Grafici a torta sulle vostre pagine web.
14 Luglio 2007
Quando e’ necessario visualizzare delle statistiche, ad esempio il genere di canzoni piu’ ascoltate oppure le pagine + richieste, i grafici, ed in particolare i grafici a torta, risultano lo strumento ottimale.
Per visualizzare questo tipo di strutture nelle mie pagine web e’ utilizzato uno strumento che si chiama Plotkit. La bellezza di Plotkit sta’ nella sua facilita’ di utilizzo e nell’essere cross-browser.
Vediamo come utilizzare immediatamente questo strumento:
Scaricatevi l’ultima versione di PlotKit e di MochiKit (i link puntano all’ultima versione odierna).
Gli script da richiamare direttamente sono:
/js/mochikit/MochiKit.js
/js/plotkit/Base.js
/js/plotkit/Layout.js
/js/plotkit/Canvas.js
/js/plotkit/SweetCanvas.js
La principale classe di interesse di Plotkit e’ “Layout” che permette di decidere in quale modo si vogliono visualizzare i dati statistici, i grafici supportati sono gli istogrammi, diagrammi a linee e i grafici a torta ciascuno associato ad una keywords (rispettivamente: bar, line, pie). Per ciascun grafico e’ possibile (spesso necessario) specificare delle opzioni tramite un array le cui chiavi identificano la proprieta’ corrispondente; ci sn alcune proprita’ sempre impostabili ed altre che dipendono dal tipo di grafico.
Per il grafico a torta, esiste la sola opzione pie pieRadius.
var options = {
“IECanvasHTC”: “”,
“colorScheme”: PlotKit.Base.palette(PlotKit.Base.baseColors()[0]),
“padding”: {left: 10, right: 10, top: 10, bottom: 30},
“xTicks”: [
{v:0, label:"alfa"},
{v:1, label:"beta"},
{v:2, label:"gamma"},
{v:3, label:"delta"}
],
“pieRadius”: 0.35
};
L’opzione xTicks e’ necessario per rendere comprensibile il grafico, PlotKit gestisce solo coppie di numeri per definire il dataSet. Quindi potremo dire che il primo campione (il campione 0) vale 10.2, il campione successivo 23.2, etc. Se nn specificassimo l’opzione xTicks nel grafico, insieme al valore corrispondente, viene visualizzato l’indice del campione … solitamente e’ completamente inutile!
IECanvasHTC migliora la compatibilita’ con InternetExplorer.
var layout = new PlotKit.Layout(“pie”, options);
Crea il layout da utilizzare e quindi si inseriscono i valori, cioe’ i dataset:
layout.addDataset(“nome del dataset”, [[0, 10.2], [1,23.2], [2,15]]);
layout.evaluate();
A questo punto rimane solo di disegnare il grafico:
var canvas = MochiKit.DOM.getElement(“graph”);
var plotter = new PlotKit.SweetCanvasRenderer(canvas, layout, options);
plotter.render();
… ricordati di inserire nel corpo della pagina il codice:
<div><canvas id=”graph” height=”300″ width=”300″></canvas></div>
2 Giugno 2009 alle 22:01
Salve.
Ho trovato molto interessante il suo articolo così ho provato a creare qualche grafico ma non mi funziona. Sono alle prime armi così vorrei chiederle gentilmente se poteva inviarmi qualche esempio di codice già pronto e funzionante alla mia email oppure specificare meglio ogni riga di codice citata nel suo articolo dove va inserita (ad es. in un file html e in body, ecc..).
Grazie e complimenti
Max!
2 Giugno 2009 alle 23:44
Ciao, (ti do’ del tu anche se nn ci conosciamo, spero nn ti dispiaccia)
Non posso darti il link alle pagine xche’ sono parte dell’interfaccia di amministrazione, xo’ posso metterti pezzetti di codice
Schematizzo in modo da rendere veloce da spiegare (e spero) da capire:
- 1. scaricati i link ai pacchetti menzionati nell’articolo e copia tutti i file con estensione “.js” in una directory ad esempio “c:\sito\scripts”
- 2. creati una pagina HTML, ad esempio “c:\sito\test.html”
- 3(a). apri la pagina con un editor, sotto windows il meno peggio (a mio parere) e’ editplus, quindi nell’intestazione, tra “” e “” per essere pratici:
- 3(b). sempre all’interno dell’intestazione aggiungi
var optionspaese = {
“IECanvasHTC”: “”,
“colorScheme”: PlotKit.Base.palette(PlotKit.Base.baseColors()[0]),
“padding”: {left: 10, right: 10, top: 10, bottom: 30},
“xTicks”: [ {v:0, label:"Israele"}, {v:55, label:"Israele - Siria"}, {v:67, label:"Conflitti"}, {v:68, label:"Pakistan - Afghanistan"}],
“drawYAxis”: false,
“pieRadius”: 0.35
};
function drawPieGraph() {
var layout = new PlotKit.Layout(“pie”, optionspaese);
layout.addDataset(“paesi”, [[0, 33], [55, 1], [67, 1], [68, 1]]);
layout.evaluate();
var canvas = MochiKit.DOM.getElement(“piegraphpaese”);
var plotter = new PlotKit.SweetCanvasRenderer(canvas, layout, optionspaese);
plotter.render();
}
if (navigator.userAgent.toLowerCase().indexOf(“opera”) == -1) {
MochiKit.DOM.addLoadEvent(drawPieGraph);
}
- 3(c). dentro il body della pagina aggiungi(dove vuoi):
2 Giugno 2009 alle 23:51
var optionspaese = {
“IECanvasHTC”: “http://it.equilibri.net/js/plotkit/iecanvas.htc”,
“colorScheme”: PlotKit.Base.palette(PlotKit.Base.baseColors()[0]),
“padding”: {left: 10, right: 10, top: 10, bottom: 30},
“xTicks”: [ {v:0, label:"Israele"}, {v:55, label:"Israele - Siria"}, {v:67, label:"Conflitti"}, {v:68, label:"Pakistan - Afghanistan"}],
“drawYAxis”: false,
“pieRadius”: 0.35
};
function drawPieGraph() {
var layout = new PlotKit.Layout(“pie”, optionspaese);
layout.addDataset(“paesi”, [[0, 33], [55, 1], [67, 1], [68, 1]]);
layout.evaluate();
var canvas = MochiKit.DOM.getElement(“piegraphpaese”);
var plotter = new PlotKit.SweetCanvasRenderer(canvas, layout, optionspaese);
plotter.render();
}
if (navigator.userAgent.toLowerCase().indexOf(“opera”) == -1) {
MochiKit.DOM.addLoadEvent(drawPieGraph);
}