Qualche settimana fa ho scoperto HighCharts, una libreria Javascript per la creazione di grafici che mi ha colpito più di altre per la semplicità di scrittura del codice e per la sua elegante resa. Così ho cominciato a fare qualche esperimento e progettarne altri per il blog, ancora in cantiere. Di più, mi è venuta l’idea di sviluppare un piccolo programma per permettere a tutti, soprattutto a chi non conosce nulla di PHP e JavaScript, di inserire negli articoli del proprio blog WordPress dei semplici ma accattivanti grafici a partire da tabelle di dati numerici qualunque.
Alla fine ho partorito il plugin che, con un mostruoso sforzo di immaginazione, ho chiamato Table2Chart.
Post scriptum: è in linea la nuova pagina con la descrizione aggiornata del plugin (in inglese).
Cosa fa Table2Chart? Legge i dati numerici di una tabella e li rappresenta graficamente dando la possibilità di scegliere tra diversi stili (a barre orizzontali, a barre verticali, a linee, ad aree), e diverse opzioni (dimensioni, titoli, colori, eccetera).
Nella sua formulazione più semplice, è sufficiente digitare l’espressione
[Table2Chart]
per far comparire il grafico corrispondente alla prima tabella presente nell’articolo con le impostazioni di default. Ma ovviamente è possibile specificare dei parametri opzionali, come per esempio
[Table2Chart width="600" background="#808080"]
L’elenco completo dei parametri che si possono impostare comprende:
attributo | descrizione | valore predefinito |
---|---|---|
table |
numero che indica la posizione cardinale della tabella (prima, seconda, eccetera) da cui recuperare i dati | 1 |
width |
larghezza del grafico in pixel | 500 |
height |
altezza del grafico in pixel | 400 |
type |
tipologia del grafico da scegliere tra bar (a barre orizzontali), column (a barre verticali), line (a linee), area (ad aree) | column |
title |
titolo del grafico | (vuoto) |
subtitle |
sottotitolo del grafico | (vuoto) |
titleX |
titolo dell’asse orizzontale | (vuoto) |
titleY |
titolo dell’asse verticale | (vuoto) |
order |
row se le serie si sviluppano per riga, column se si sviluppano per colonna | column |
namecol |
numero della riga che contiene i titoli delle serie o delle categorie | 1 |
namerow |
numero della colonna che contiene i titoli delle serie o delle categorie | 1 |
background |
colore dello sfondo in formato esadecimale | #ffffff |
color |
colore delle serie di dati | #ff0000,#00ff00,#0000ff, #00ffff,#ff00ff,#ffff00 |
convert |
true se i valori numerici contenuti nella tabella sono nel formato continentale e vanno convertiti nel formato anglosassone (virgola come separatore delle migliaia e punto come separatore decimale), false altrimenti | true |
Per fare qualche esempio consideriamo la seguente tabella sugli impieghi dell’energia in tre paesi europei, ricavata dalla banca dati del sito eurostat:
industria | trasporti | residenziali | servizi | altri | |
---|---|---|---|---|---|
Spagna | 24% | 42% | 19% | 11% | 4% |
Italia | 25% | 34% | 26% | 13% | 2% |
Romania | 31% | 23% | 35% | 8% | 3% |
Lo shortcode [Table2Chart]
produce:
mentre [Table2Chart type="line" background="#fffff0" color="#50a0f0,#f0a050,#a0f050,#a050f0,f050a0"]
restituisce
e [Table2Chart order="row" type="bar" background="#b0b0b0"]
restituisce
Cosa offre questo plugin di diverso rispetto agli altri già presenti nella collezione di WordPress che permettono di disegnare grafici? A mio avviso sostanzialmente due cose: il supporto di una libreria più completa, più raffinata e con un migliore livello di interattività rispetto alle alternative, come Google Chart (basta cliccare sui titoli delle serie nella legenda per rendersene conto) e, tramite il collegamento alle tabelle, un modo più naturale e semplice di specificare i dati da rappresentare, soprattutto se si dispone di un plugin dedicato. Se poi qualcuno volesse solo disegnare un grafico senza la corrispondente tabella, è sufficiente creare la tabella per strutturare i dati da rappresentare e quindi nascondere la tabella stessa impostando lo stile css display:none
.
Ovviamente c’è spazio per futuri sviluppi del plugin. Tra i primi che mi vengono in mente, l’aggiunta di un paio di parametri opzionali per escludere o includere solo alcune righe e colonne dal grafico (utile soprattuto nelle tabelle di cui non si vogliono rappresentare i totali) e l’estensione dell’insieme dei tipi ammessi per arrivare a includere i grafici a dispersione e a bolle (no, spiacente, ma le torte in linea generale vanno evitate, anche se chi è un po’ intraprendente può accorgersi da subito che…).
Per installare il plugin è sufficiente scaricarlo dal collegamento sottostante e quindi caricarlo e poi attivarlo dal pannello di amministrazione di WordPress.
Table2Chart: plugin WordPress per creare grafici da tabelle
Ciao, volevo sapere… come faccio ad associare una tabella al grafico?
attraverso un id ?
Non serve. Se hai una sola tabella, non devi mettere altro a parte il codice dello shortcode: [Table2Chart]. Verrà generato il grafico recuperando i dati dall’unica tabella della pagina. Se hai più tabelle, per generare il grafico a partire dai dati della n-esima ti basterà scrivere [Table2Chart table=”n”] avendo l’accortezza di scrivere al posto di n il numero corrispondente alla posizione d’ordine della tabella.
Bel plugin, ma sarebbe possibile evitare che sull’asse delle y compaia 100k invece di 100000?
Grazie
Ciao Antonio,
mi chiedevo se in una futura release tu potessi inserire i grafici stacked, ho notato che gli highcharts li supportano.
Ciao e grazie
Alex
Vi chiedo scusa del (lo scandaloso) ritardo della mia risposta; mi sono accorto solo ora di non ricevere più le notifiche dei commenti ricevuti.
In ogni caso ciò che chiedete è possibile, con qualche specifica supplementare, nella nuova versione del plugin, disponibile alla pagina
http://https://www.antoniorinaldi.it/table2chart
Grazie dell’aiuto. Sono riuscito a capire come fare per evitare che l’asse y riportasse valori negativi, ma non riescoa capire come fare ad evitare che ad esempio 100000 sia scritto 100k.
http://api.highcharts.com/highcharts#yAxis.labels
dall’esempio della proprietà format:
http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/yaxis/labels-format/
si intuisce che occorre scrivere:
[Table2Chart]
yAxis: {
labels: {
format: ‘{value}’
}
}
[/Table2Chart]
Grazie, in effetti avevo capito dove dovevo cercare, ma mi ero un (bel) po’ perso in tutti i vari parametri.