da tabella a grafico in WordPress

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


8 pensieri su “da tabella a grafico in WordPress

    • 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.

  1. 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

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.