Creare grafici con xCharts

XCharts è una libreria in Javascript che permette di realizzare flessibili grafici da importare nei nostri siti. Il plugin è completamente personalizzabile e permette di essere configurato secondo le opzioni più adatte al nostro grafico.

Ecco una serie di sue possibili applicazioni:

DEMODOWNLOAD

1. Installazione libreria

Importare la libreria D3.js (la trovate qui) e, dalla libreria xCharts che potete scaricare da qui, i file xcharts.js e xcharts.css :

 
<script src="http://d3js.org/d3.v3.min.js"></script>
<link rel="stylesheet" href="xcharts.css">
<script src="xcharts.min.js"></script>
 

Creare un elemento che faccia da “contenitore” al grafico e definirne le dimensioni. Potete utilizzare il classico div ma potreste anche utilizzare figure, un elemento introdotto con HTML5.

 
<figure id="graph" style="width:80%; height:400px"></figure>
 

2. Inserimento dati

Per questo secondo punto occorre usare javascript. Ecco il modello classico di riferimento, corrisponde al primo grafico utilizzato nella pagina di dimostrazione (qui).

 
$(document).ready(function(){
var data_bar = {
  "xScale": "ordinal",
  "yScale": "linear",
  "type":"bar",
  "main": [
    {
      "className": ".statbrowser2012",
      "data": [
        {
          "x": "IE",
          "y": 15
        },
        {
          "x": "Firefox",
          "y": 31
        },
        {
          "x": "Chrome",
          "y": 46
        },
        {
          "x": "Safari",
          "y": 4
        },
        {
          "x": "Opera",
          "y": 2
        }
      ]
    }
  ]
};
});
 

Mi servo di quest’esempio per spiegare i vari settaggi:

• xScale e yScale rappresentano il tipo di scala da utilizzare sugli assi x e y.
• Con type definiamo il tipo di grafico, questo può assumere i valori di “bar”, “cumulative”, “line” e “line-dotted” per rappresentare un grafico a barre, cumulativo, a linea continua e a linea punteggiata.
• Main contiene il nome della classe che sarà attribuita al grafico e l’array data nel quale inseriremo i dati da elaborare. Per comparare due o più grafici (è il caso del terzo grafico, qui) basta inserire due o più array nel main definendo diversi classname e ovviamente i diversi dati.

Una volta inseriti i dati non resta che creare l’oggetto xCharts per creare il grafico passandogli  il tipo di grafico, i dati e l’elemento che abbiamo creato prima.

 
var myChartbar = new xChart('bar', data_bar, '#graph');
 

3. Personalizzazione del grafico

XCharts crea il grafico sfruttando i css, pertanto è possibile modificare e/o aggiungere i vari valori: come potete vedere, nella pagina di dimostrazione (qui) ho personalizzato i tre grafici modificando il colore di linee, barre e di altri vari elementi che li costituiscono.

Per modificare tali valori basta trovare il riferimento dell’elemento desiderato leggendo il foglio di stile generato dalla libreria oppure, molto più velocemente, utilizzando la funzione inspect element che i vari browser mettono a disposizione. Per esempio attraverso inspect element ho trovato che il riferimento delle barre del primo dei tre grafici è “g.main.statbrowser2012.color0 rect” e ne ho modificato il fill(riempimento) impostandolo su quel colore rossiccio che vedete. Sempre nello stesso elemento ho gestito l’hover dandogli un valore più scuro di fill, in modo da avere anche una semplice animazione. Per riassumere:

 
g.main.statbrowser2012.color0 rect
{
            fill: #e24a1b;
}
g.main.statbrowser2012.color0 rect:hover
{
            fill:#c14119;
}
 

Maggiori dettagli li trovate nella documentazione ufficiale della libreria: xCharts Documentation.