I numeri spiegano la realtà, ma a volte lo fanno in maniera complicata. Le serie e i rapporti sono strumenti potenti ma non sempre chiari. Per questo, spesso, conviene aggiungere un grafico alle proprie pagine. Ma come farlo? Beh, oggi provo a spiegare il modo più semplice che ho trovato per aggiungere grafici a una pagina web.
Premessa
Ma prima di cominciare, ecco cosa voglio creare:
Sono 5 grafici diversi:
- un grafico a colonne
- un grafico a torta
- un grafico treemap
- un grafico a dispersione
- un grafico a calendario
ma il procedimento è molto simile.
In questo tutorial userò i dati del Medium Partner Program. Li ho già usati qualche giorno quando ho parlato di come creare tabelle responsive con CSS. Per vedere come scaricare e importare le statistiche consiglio questo articolo:
Comunque, in sintesi, basta andare all’indirizzo medium.com/me/stats?format=json&count=100 e scaricare la pagina. Ovviamente posso creare i grafici con qualsiasi dato, ma per ricordare il procedimento al me futuro mi servono dei dati di esempio.
La cassetta degli attrezzi
Cosa mi serve per creare facilmente dei grafici con JavaScript, HTML e CSS? In rete si possono trovare varie librerie, quella più semplice da usare, secondo me, è Google Charts. Come è facilmente intuibile dal nome, si tratta di una libreria di Google. Google la definisce così:
Google Charts provides a perfect way to visualize data on your website
Ma c’è un problema. Quale? Che non è così semplice da usare. La pagina quickstart spiega come creare un grafico a torta. È un buon punto di partenza ma non è la strada che intendo seguire.
Cercando in rete è possibile trovare le Google Charts API come web components. Questo permette di creare un grafico con una sintassi simile a questa:
Posso importare le API in un progetto con il comando:
npm i @google-web-components/google-chart
Il secondo strumento che intendo usare è Svelte. Svelte permette di creare facilmente delle web app. E, sopratutto, mi permette di scrivere del codice di esempio comprensibile anche a chi è alle prime armi con JavaScript (o TypeScript), CSS e HTML.
Anche in questo caso, ovviamente, è possibile usare qualsiasi altro framework, o anche nessuno. Però Svelte semplifica molto il lavoro.
Creare un grafico a colonne
Allora, comincio con il primo grafico, questo:
Comincio con il creare un componente GoogleChartColumn.svelte. Per prima cosa importo @google-web-components/google-chart:
Poi definisco i props che mi servono. La documentazione di Google è ben fatta e permette di capire cosa può servire. Per il momento mi limito alle cose fondamentali:
data: per i dati da visualizzareoptions: per configurare alcuni dettagli del grafico
Non mi interessano molte opzioni. Mi basta poter personalizzare il titolo e decidere il colore delle varie colonne. Di conseguenza i props diventano:
I dati sono di un tipo abbastanza bizzarro. Sostanzialmente sono un matrice dove la prima riga indica il nome e il tipo delle colonne:
Le righe successive invece contengono i dati effettivi:
Aggiungo una variabile dedicata alla configurazione:
Poiché uso solamente una serie di dati la leggenda è inutile, quindi la imposto come none. Modifico anche il colore dello sfondo in modo da non staccare dal resto della pagina (quindi è transparent). Infine cambio la formattazione del titolo del grafico usando le proprietà CSS.
Il codice completo del componente è:
Ma come lo posso usare effettivamente in una pagina HTML? Così:
Per ricavare i dati da inserire creo la funzione earningPerMonth:
Ovviamente questa funzione va modificata in base ai propri dati.
Creare un grafico a torta
Capito il ragionamento è facile creare anche gli altri grafici. Ovviamente ognuno ha delle caratteristiche particolari. Per esempio il grafico a torta.
Creo il file GoogleChartPie.svelte
Il grafico a torta richiede i dati divisi in due diversi props: cols e rows. Permette inoltre di passare un valore numerico (compreso tra 0 e 1) per decidere la larghezza minima delle fette della torta.
Per esempio, se imposto sliceVisibilityThreshold = 0.03 potrò vedere solamente le categorie che sono almeno il 3% del totale. Tutte quelle che sono più piccole verranno raggruppate sotto Other.
La funzione JavaScript per ottenere i dati è simile a questa:
Adesso posso inserire il grafico nella pagina con:
Usando lo stesso codice ma cambiando i valori passati ai props posso creare diversi grafici nella stessa pagina:
Creare un grafico treemap (mappa ad albero)
Wikipedia spiega bene cosa è una treemap:
Una treemap (mappa alberata o mappa ad albero) in visualizzazione delle informazioni è un metodo per mostrare dati gerarchici usando rettangoli innestati.
Penso che oramai siano chiari i passaggi da seguire. Creo il file GoogleChartTreemap.svelte:
I prop specifici di questo grafico sono:
maxDepth: The maximum number of node levels to show in the current view.maxPostDepth: How many levels of nodes beyond maxDepth to show in “hinted” fashion.minColor,midColoremaxColor
La funzione per estrarre e preparare i dati è qualcosa di simile a questo:
Mentre il codice HTML è
Creare un grafico a dispersione
Il grafico a dispersione permette di vedere se c’è qualche correlazione tra due dati. In questo esempio ho provato a mettere in relazione la lunghezza dei diversi post (misurata con il numero di parole) e il ricavo degli stessi. Inoltre ho impostato un tooltip personalizzato quando passiamo con il mouse sopra i vari punti.
Il codice del componente GoogleChartScatter.svelte è simile ai precedenti:
Ci sono 2 props specifici per questo grafico:
axisY: il titolo da mostrare sull’asse delle YaxisX: il titolo da mostrare sull’asse delle X
Aggiungo inoltre l’opzione tooltip: { isHtml: true }. A cosa serve? A poter personalizzare il tooltip dei vari punti usando HTML e CSS.
La funzione per ottenere i dati per il grafico è leggermente diversa dalle precedenti:
Ai vari array delle righe aggiungo una string contenente del codice HTML. Questo codice viene poi renderizzato dal componente e mostrato come se fosse un elemento HTML della pagina.
Il codice HTML da usare nella pagina è semplicemente:
Creare un grafico a calendario
Il quinto grafico che ho inserito è un grafico a calendario. Serve sostanzialmente per visualizzare i dati su un calendario. L’intensità del colore dei singoli giorni indica la quantità relativa al giorno. Credo che l’esempio classico sia quello mostrato nel profilo di GitHub:
Rispetto ai grafici precedenti questo richiede un po’ di CSS e un piccolo trucco. Ma prima il codice base:
In questo caso mi serve un solo props aggiuntivo, colorAxis. È un array composto dai codici dei colori da usare nei vari giorni. Di default il valore più basso è rappresentato da un bianco. Dopo aver importato il componente nella pagina mi sono però accorto che non era praticamente distinguibile dallo sfondo. Ho quindi deciso di partire da un colore più forte:
La funzione per preparare i dati è simile alle precedenti, con ovviamente alcune piccole differenze:
Bene ma non del tutto. Resta un problema legato alle dimensioni del grafico. Non so come mai ma il componente è troppo corto rispetto alla lunghezza del calendario. Devo quindi forzare un po’ le dimensioni usando una proprietà CSS:
Il secondo problema riguarda invece l’altezza. In questo caso devo calcolarla in base al numero di anni che voglio mostrare. Quindi per prima cosa mi serve capire quanti anni sono:
Poi uso la direttiva style:property:
Unendo il tutto il componente diventa:
Bene, con questo è tutto. Ovviamente questo metodo non è perfetto. Lo trovo però più semplice rispetto ad altre implementazioni che ho provato. Il codice, come al solito, è disponibile nel repository su GitHub:
Ovviamente è un work in progress, quindi ci sono ancora dei dettagli da rifinire e probabilmente nel tempo cambierò ancora qualcosa.
Invece, per quanto riguarda Svelte, ho creato una lista su Medium con i miei vari post su questo argomento:
E con questo è davvero tutto.
