Articolo originale: https://www.freecodecamp.org/news/how-to-make-your-first-javascript-chart/
All'inizio del tuo viaggio come sviluppatore JavaScript, credo sia importante dedicarsi a progetti interessanti. In questo modo sarai sicuro di divertirti mentre impari, e magari troverai un'area di specializzazione che apprezzi.
Come si dice, "Fai quello che ami e non lavorerai neanche un giorno in tutta la tua vita".
In questo articolo ti inizierò alla visualizzazione dati front-end, che è la mia passione. Magari un giorno diventerà anche la tua!
Per me i momenti più gratificanti come sviluppatore sono quelli in cui posso vedere o provare i risultati di ciò che ho fatto. È molto soddisfacente creare un grafico che rivela informazioni interessanti sui suoi dati o fornisce un'esperienza interattiva che aiuta a esplorare i dettagli di un insieme di dati unico. Quanto più significativo è il risultato, tanto più l'esperienza è appagante.
Tuttavia, ho realizzato che la quantità di energie che spendi per un progetto non è necessariamente correlata con il senso di realizzazione – talvolta è fantastico anche quando è tutto relativamente semplice.
Col tempo troverai gli strumenti che ti aiutano ad essere più efficiente e, a volte, sposterai montagne con un dito. Nel campo della visualizzazione dati ci sono molte librerie e strumenti disponibili per realizzare grafici. Con gli strumenti giusti, sarai in grado di creare grafici con uno sforzo minimo, indipendentemente dal loro tipo. Personalmente credo la visualizzazione dati ricompensi ampiamente tutto il tempo e le energie investiti.
In questo tutorial utilizzerai vari strumenti per ottenere dati da internet, processarli e realizzare un bellissimo grafico visualizzabile in qualsiasi moderno browser. Puoi cliccare sui link qui sotto per scaricare il codice di esempio per ogni singolo passaggio, vedere tutto su GitHub o scaricare tutti i passaggi in un colpo qui: all-steps.zip.
Il risultato
Al termine di questo tutorial creerai questo grafico interattivo. Imparerai come ottenere i dati da internet, elaborarli e realizzare un grafico con quei dati. Sarai anche in grado di creare il tuo grafico da zero.
Dopo aver processato e graficato i dati, imparerai anche come fare degli aggiustamenti al grafico, come modificare la legenda predefinita, abilitare l'indicatore di posizione sull'asse x con descrizione e applicare annotazioni di testo per aggiungere contesto e altre informazioni al grafico.
Gli strumenti
Per iniziare ti occorrerà un browser web probabilmente come quello che stai utilizzando per leggere questo articolo. Consiglio Chrome, dato che offre un'ottima esperienza e strumenti per sviluppatori integrati.
Poi avrai bisogno di un editor di testo. Andrà bene anche qualcosa di semplice come notepad, ma suggerisco un editor di codice più avanzato come VS Code, visto che si tratta di un ambiente in cui passerai un sacco di tempo. Offre un'esperienza di programmazione più piacevole e conveniente e facilita la scrittura di HTML5, CSS e JavaScript. E cosa più importante, se dimentichi una virgoletta o una virgola da qualche parte, un editor di codice può aiutarti a trovare l'errore.
Quest'articolo può aiutarti a scegliere il miglior editor di codice per lo sviluppo web con JavaScript.
Utilizzerai la libreria JSCharting per disegnare automaticamente il grafico e aggiungere delle funzionalità interattive. Non sarà necessaria nessuna altra libreria JavaScript come jQuery o piattaforma front-end come React e Angular (comunemente usati per i progetti di siti web).
Perché JSCharting?
JSCharting è una libreria JavaScript per grafici che può creare molti tipi diversi di grafici usando SVG. È di facile approccio e utilizzo, quindi è adatta a questo tutorial. La API (Application Programming Interface, ovvero le opzioni e le impostazioni necessarie per creare i grafici) rende semplici cose complesse ed è una buona opzione per sperimentare con la visualizzazione dei dati.
Puoi utilizzare JSCharting gratuitamente per uso personale e commerciale con il brand incluso.
Con JSCharting puoi creare grafici responsivi in un paio di semplici passaggi:
- Definisci un tag
<div>nel file HTML con un id univoco. - Fornisci l'id, i dati e qualsiasi altra opzione chiamando la funzione
JSC.Chart()nel file JavaScript.
Ecco tutto. JSC realizzerà un grafico dall'aspetto professionale popolando il tag div con elementi visivi SVG. Il grafico sarà responsivo e interattivo senza alcuno sforzo aggiuntivo.
I dati
Userai un file di dati forniti dal National Center for Health Statistics (NCHS) che comprende l'aspettativa di vita di uomini e donne negli Stati Uniti.
Puoi trovarlo qui: https://data.cdc.gov/resource/w9j2-ggv5.csv.
Questo file CSV contiene dati che dividono l'aspettativa di vita per anno, razza e sesso. Userai alcuni di questi dati per disegnare una semplice linea di tendenza per uomini/donne negli ultimi 100 anni.
Il formato CSV (Comma Separated Values) è ottimo per trasmettere dati sul web. È compatto, leggibile e puoi aprirlo direttamente in Excel, il che non è male.
Senza ulteriore indugio, iniziamo!
Step 1 - Aggiungi un grafico vuoto
Il primo file zip contiene il nostro punto di partenza, che potrai riempire man mano che proseguiamo. Se ti senti perso o confuso oppure vuoi andare avanti, il file zip alla fine o quello in ogni sezione ti rimetteranno al passo.
Se invece vuoi scaricare tutti i file in un colpo usa questo link: all-steps.zip.
step1-a.zip
Questo file zip contiene i seguenti file.
index.htmljs/index.js
Il file .html è vuoto eccetto per del codice standard che lo rende un file valido e il file .js è completamente vuoto.
Il primo passaggio è aggiungere alcuni script al file della pagina HTML. Normalmente le persone suggeriscono di aggiungere i tag <script> all'interno dei tag <head>. Tuttavia, spesso è meglio aggiungere gli script che influiscono sul contenuto dell'HTML dopo il tag di chiusura </body>.
Questa tecnica fa sì che tutto l'HTML sia caricato nel DOM prima di eseguire qualsiasi codice JavaScript. Prima di poter essere creato, il grafico necessita che l'HTML sia caricato. Il DOM (Document Object Model) è una rappresentazione del codice HTML nella memoria del browser. Una volta che l'HTML viene caricato nel DOM il browser può mostrarlo e JavaScript può interagirvi.
Inizia aggiungendo la libreria JSCharting al file HTML. Apri il file index.html nell'editor che preferisci. Poi aggiungi un tag script per includere JSCharting dopo il tag di chiusura </body>. Il codice risultante alla fine del file dovrebbe essere il seguente:
</body>
<script src="https://code.jscharting.com/2.9.0/jscharting.js"></script>
</html>L'URL di questa libreria punta a un CDN (Content Delivery Network). Ospita il codice del grafico e rende conveniente e rapido aggiungere la libreria a qualsiasi pagina HTML per la prototipazione e sperimentare con i grafici. Puoi anche scaricare e usare la libreria localmente o usare il pacchetto npm nel tuo progetto, ma il CDN non richiede nessun passaggio extra.
Poi, usando la stessa tecnica, aggiungi un altro tag script facendo riferimento al file JavaScript vuoto. Aggiungi questo script dopo lo script jscharting.js, in questo modo:
</body>
<script src="https://code.jscharting.com/2.9.0/jscharting.js"></script>
<script src="js/index.js"></script>
</html>Ottimo, siamo quasi pronti per creare il grafico vuoto. L'ultima cosa che occorre fare è aggiungere un <div> segnaposto all'interno del file HTML per definire il posto in cui vogliamo disegnare il grafico.
Aggiungi questo codice HTML tra i tag <body>.
<body>
<div id="chartDiv" style="width:50%; height:300px; margin:0 auto;"></div>
</body>Il div deve avere un id in modo da poter essere individuato specificamente. In questo caso l'id è chartDiv.
Potresti aver notato l'attributo style del tag <div>. Rende il div il 50% dell'ampiezza della finestra e alto 300 pixel. Lo stile dei margini margin:0 auto; centra il div nella pagina. Il grafico riempirà il div, qualsiasi sia la sua dimensione, quindi cambiare la dimensione del div è un buon modo per controllare la dimensione del grafico.
Con il file HTML è tutto posto. Apri il file index.js e aggiungi un grafico vuoto alla pagina scrivendo il seguente codice, che include il div con l'id chartDiv:
JSC.Chart('chartDiv', {});Apri il file index.html nel browser (seleziona e trascina il file in un browser come Chrome).
Non c'è molto da vedere, ma potresti notare un piccolo logo JSC sulla pagina. Indica che un grafico è stato collegato e creato.
Step 2 - Giocare un po' con il grafico
Va bene, come test, aggiungiamo un paio di valori al grafico per poter vedere come funziona.
Tornando al file index.js, sostituisci il contenuto con il seguente codice che aggiunge più opzioni al grafico.
JSC.Chart('chartDiv', {
type: 'horizontal column',
series: [
{
points: [
{x: 'Apples', y: 50},
{x: 'Oranges', y: 42}
]
}
]
});Adesso aggiorna (F5) la finestra del browser in cui hai caricato la pagina index.html.
Bene! Hai appena creato il tuo primo grafico usando JavaScript.
Hai realizzato un grafico a barre definendo l'opzione type come 'horizontal column'. Se preferisci delle colonne verticali, imposta il valore su 'column'. Hai anche aggiunto una serie con due punti al grafico per Apples (mele) e Oranges (arance).
Tutti i dati del grafico sono fatti di una serie di punti. Una serie è semplicemente un gruppo di punti di dati. I grafici possono contenere una o più serie di dati. I punti consistono in valori che corrispondono agli assi x e y. I punti possono includere molte altre variabili e valori descrittivi.
L'esempio qui sopra contiene solo una serie di dati. Adesso diamo un'occhiata alle opzioni per un grafico con due serie. Sostituisci il contenuto del file JavaScript con questo codice.
JSC.Chart('chartDiv', {
type: 'horizontal column',
series: [
{
name:'Andy',
points: [
{x: 'Apples', y: 50},
{x: 'Oranges', y: 32}
]
},{
name:'Anna',
points: [
{x: 'Apples', y: 30},
{x: 'Oranges', y: 22}
]
}
]
});Ricaricando la finestra del browser apparirà questo grafico.
Le opzioni del grafico sembrano familiari. È ancora un grafico a barre ma stavolta c'è un altro oggetto nell'array series. Abbiamo aggiunto anche delle proprietà name per ogni serie in modo da poter identificarle nella legenda.
Se sei interessato a creare grafici differenti, come grafici radar, areogrammi, grafici a torta, diagrammi di Gannt o anche mappe di calore, dai un'occhiata alla galleria di esempio di JSCharting e al codice sorgente (opzioni dei grafici) usato per creare i grafici. Puoi imparare rapidamente come usare le altre funzionalità copiando gli esempi disponibili.
Step 3 - Preparare i dati
Il formato CSV è costituito da dati separati da virgole. Il file contiene righe, ognuna delle quali rappresenta un record o un'entrata. Normalmente la prima riga di valori contiene i nomi di ogni valore separato da virgola (colonna). Le righe successive contengono i valori veri e propri.
name,age
chris,26
mike,34Il CSV è leggibile, ma ci sono variazioni di questo formato. A volte se i valori contengono virgole (come gli indirizzi di posta), il formato non funziona così com'è, quindi ogni valore va racchiuso tra virgolette. In questo modo le virgole all'interno delle virgolette vengono ignorate e il formato può ancora funzionare usando solo le virgole fuori dalle virgolette per separare i valori.
"name","age","parents"
"Chris","26","Gregory, Mary"
"Mike","34","David, Sarah"I valori possono essere separati usando un carattere diverso come un carattere di tabulazione al posto delle virgole.
Ma non restiamo impantanati in questi cavilli. JSCharting fornisce vari strumenti che aiutano con questo processo e ne useremo uno per smettere di preoccuparci del formato CSV e convertirlo in JSON (JavaScript Object Notation). Il risultato sarà un array di oggetti. Ogni oggetto rappresenta una riga con proprietà che hanno un nome. La prima riga nel file CSV viene usata per definire i nomi di queste proprietà.
Questo è l'URL dei dati che ci interessano: https://data.cdc.gov/resource/w9j2-ggv5.csv.
Puoi cliccarci su per scaricarlo e aprirlo in Excel.
In ogni caso, scaricherai e accederai a questi dati CSV in tempo reale usando del codice JavaScript. Il codice qui sotto potrebbe essere leggermente disorientante all'inizio, ma è breve e puoi riusarlo per ottenere programmaticamente qualsiasi file CSV, di testo o JSON da internet. È simile alla vecchia tecnologia AJAX ma più semplice da usare.
Di nuovo, sostituisci il contenuto del file index.js con il seguente codice:
fetch('https://data.cdc.gov/resource/w9j2-ggv5.csv')
.then(function (response) {
return response.text();
})
.then(function (text) {
csvToSeries(text);
})
.catch(function (error) {
//Qualcosa è andato storto
console.log(error);
});
function csvToSeries(text) {
console.log(text);
}Perché è così complicato? Perché quando richiedi un file, non diventa immediatamente disponibile. C'è un ritardo e devi aspettare che il file arrivi. Quindi prima richiedi il file da un altro sito usando fetch().
fetch('https://data.cdc.gov/resource/w9j2-ggv5.csv')Poi il codice all'interno della funzione argomento di then(...) viene chiamato con la risposta quando questa arriva. Questa funzione converte la risposta in testo e la restituisce, passando il risultato alla funzione argomento del then() successivo.
.then(function (response) {
return response.text();
})La funzione argomento del then(...) successivo chiama la funzione csvToSeries() e le passa il testo come argomento.
.then(function (text) {
csvToSeries(text);
})Nella funzione catch() puoi specificare cosa fare se qualcosa va storto. Ad esempio, la connessione si interrompe o l'URL non è corretto.
.catch(function (error) {
//Qualcosa è andato storto
console.log(error);
});In questo caso l'errore viene inviato alla console.
Nella funzione csvToSeries() passiamo il testo alla console come verifica.
function csvToSeries(text) {
console.log(text);
}Nota: la funzione nativa fetch() non è supportata da Internet Explorer 11. Se vuoi supportare questo browser puoi usare la funzione JSC.fetch() in dotazione con JSCharting. Fornisce la stessa funzionalità ma aggiungi supporto aggiuntivo per IE11.
Trascina il file index.html nella finestra del browser (o ricarica la pagina se è ancora aperta) e premi F12. In questo modo aprirai la finestra degli strumenti per sviluppatori del browser Chrome. Di default, la metà inferiore della finestra dei DevTools mostrerà l'output nella console. È qui che viene inviato il testo quando esegui del codice come:
console.log(text);
Puoi anche incollare o scrivere del codice nella finestra di questa console ed eseguirlo. Prova a incollare l'intero snippet di codice precedente nella finestra della console (dopo il carattere >) e premi invio. Otterrai lo stesso risultato come output. Può essere molto utile per testare una riga di codice e sperimentare.
A questo punto hai recuperato il testo del file CSV da internet e lo hai inviato alla console per verificare che funziona. Adesso possiamo iniziare a lavorarci su.
Diamo un'occhiata a questo file di dati per farci un'idea di cosa c'è dentro: https://data.cdc.gov/resource/w9j2-ggv5.csv
Ho usato Excel per ordinare le righe in base alla colonna dell'anno, per poter analizzare le righe di dati per ogni anno.
Ogni anno contiene 9 righe con dati basati su razza e sesso. Siamo interessati soltanto ai valori evidenziati per maschi (male) e femmine (female) di tutte le razze (All races) per ogni anno. Creerai due serie di dati basate sulle righe evidenziate. Una serie per i valori delle femmine e una per i valori dei maschi.
Ora che hai un'idea di cosa dobbiamo fare, procediamo.
Utilizziamo la funzione JSC.csv2Json() per convertire il testo in formato JSON e passarlo alla console per vedere cosa fa.
Aggiorna la funzione csvToSeries() con il seguente codice:
function csvToSeries(text) {
let dataAsJson = JSC.csv2Json(text);
console.log(dataAsJson)
}Ricarica il browser per vedere l'output aggiornato nella console.
La console mostra un array di 1062 entrate. Ecco una di queste entrate:
{year: 1900, race: "All Races", sex: "Both Sexes", average_life_expectancy: 47.3, mortality: 2518}Nota: la console può mostrare array e oggetti per un controllo, e puoi espandere o comprimere le sezioni nella console per esplorare i dettagli.
Il nome della proprietà average_life_expectancy è un po' lungo, ma ti servirà. Per evitare di scriverlo più di una volta, definiamo una variabile per conservarne il nome. Quando dobbiamo usare questa proprietà, possiamo scrivere semplicemente il nome della variabile lifeExp. Sarà row[lifeExp] invece di row.average_life_expectancy.
Aggiungi questa riga in cima alla funzione csvToSeries().
function csvToSeries(text) {
const lifeExp = 'average_life_expectancy';
...Puoi elaborare i dati usando del semplice JavaScript. Il risultato finale che desideriamo è costituito da due serie di punti che includono un anno e un'aspettativa di vita per ogni punto.
Aggiorna la funzione csvToSeries() con il seguente codice:
function csvToSeries(text) {
const lifeExp = 'average_life_expectancy';
let dataAsJson = JSC.csv2Json(text);
let male = [], female = [];
dataAsJson.forEach(function (row) {
//add either to male, female, or discard.
console.log(row);
});
}Definisce degli array per i dati relativi a maschi (male) e femmine (female). Poi chiama la funzione dataAsJson.forEach() passando la funzione callback function(row){...} come argomento. La funzione forEach() eseguirà la funzione callback per ogni elemento nell'array dataAsJson. Per ora chiameremo console.log(row) su ogni riga che incontra la funzione callback.
Ricarica il browser e controlla l'output sulla console.
Aggiungiamo un po' logica per filtrare i dati che vogliamo e mostrare il risultato nella console. Sostituisci la funzione csvToSeries() con questo codice.
function csvToSeries(text) {
const lifeExp = 'average_life_expectancy';
let dataAsJson = JSC.csv2Json(text);
let male = [], female = [];
dataAsJson.forEach(function (row) {
//add either to male, female, or discard.
if (row.race === 'All Races') {
if (row.sex === 'Male') {
male.push({x: row.year, y: row[lifeExp]});
} else if (row.sex === 'Female') {
female.push({x: row.year, y: row[lifeExp]});
}
}
});
console.log([male, female]);
}All'interno della funzione callback decidiamo se la riga è di nostro interesse oppure se scartarla.
if (row.race === 'All Races') {
if (row.sex === 'Male') {
//add data to male array
male.push({x: row.year, y: row[lifeExp]});
} else if (row.sex === 'Female') {
//add data to female array
female.push({x: row.year, y: row[lifeExp]});
}
}La logica verifica se il valore row.race sia uguale a 'All Races'. In tal caso, verifica se la proprietà row.sex sia uguale a 'Male' o 'Female'. Se la riga corrisponde a uno dei due, aggiunge i dati all'array male o female come un oggetto di punti {x, y}. Nota come l'uso della variabile lifeExp definita precedentemente aiuta ad accorciare il codice.
Alla fine, hai usato console.log([male, female]) per passare le variabili male e female alla console per poter verificare che tutto è andato come previsto.
Dopo aver aggiornato il browser, la console mostra il risultato composto da due array, ognuno di 118 punti che vanno dal 1900 al 2017
Infine, invece di passare il risultato alla console, racchiudi questi punti all'interno di un array di due serie che il grafico può usare direttamente e restituiscilo.
Aggiungi questo codice alla fine della funzione csvToSeries():
return [
{name: 'Male', points: male},
{name: 'Female', points: female}
];Se i valori restituiti sono stati inviati alla console, dovrebbero produrre questo risultato.
Come puoi vedere, la logica per filtrare le righe è piuttosto semplice e puoi adattarla per ottenere altri dettagli dall'insieme di dati.
Per imparare di più sulla gestione dei file CSV usando le utilità di JSCharting, guarda questo tutorial. Quando sarai pronto per una gestione di dati più complessi, l'utilità JSC.nest() può essere usata per creare serie e punti da dati JSON con pochissimo codice.
Step 4 - Mettere tutto insieme
La sezione della gestione dei dati costituisce il passaggio più difficile, ma è necessaria per manipolare ed estrarre i dati di interesse da qualsiasi file CSV. È adesso che si mette insieme tutto e poi arriverà quel fantastico senso di realizzazione.
Inizia aggiungendo una funzione renderChart() alla fine del file index.js. Passeremo le serie di dati a questa funzione come argomento.
function renderChart(series){
JSC.Chart('chartDiv', {
series: series
});
}Nella funzione argomento di then() che chiama csvToSeries(), passa il risultato series alla funzione renderChart() per vedere cosa accade nel browser.
.then(function (text) {
let series = csvToSeries(text);
renderChart(series);
})Adesso ricarica il browser. Dovresti vedere questo grafico che utilizza i dati CSV elaborati nella sezione precedente. Bello, vero?
Wow, cos'è successo nel 1918? L'aspettativa di vita si è ridotta un sacco. Secondo Wikipedia c'è stata una pandemia influenzale dovuta al virus H1N1 che ha sterminato una porzione della popolazione mondiale. Questo sfortunato evento ci mostra come visualizzare i dati possa dare informazioni che sarebbero meno evidenti guardando solo ai numeri.
Hai creato un grafico usando il tipo di serie lineare di default e sembra andare bene, ma puoi fare alcuni aggiustamenti e ritocchi per migliorarlo.
Per prima cosa, aggiungi un titolo in cima per spiegare il contenuto del grafico e un'annotazione in basso per citare la fonte dei dati. Aggiorna la funzione constructor JSC.Chart() in modo da passare le seguenti opzioni:
function renderChart(series){
JSC.Chart('chartDiv', {
title_label_text: 'Life Expectancy in the United States',
annotations: [{
label_text: 'Source: National Center for Health Statistics',
position: 'bottom left'
}],
series: series
});
}
Una volta ricaricata la pagina dovresti vedere il grafico aggiornato.
Hai aggiunto un'annotazione con label_text (testo etichetta) e un'impostazione position (posizione). Possiamo usare un'altra annotazione anche per il titolo, ma in questo caso era più semplice usare title_label_text.
È facile controllare la posizione delle annotazioni usando valori come 'top right' (in alto a destra) o 'inside bottom right' (all'interno in basso a destra). Il valore 'inside' vuol dire che l'annotazione viene posizionata all'interno dell'area del grafico in cui ci sono i dati. Questo esempio mostra le varie impostazioni di posizionamento.
La legenda mostra la somma dei valori dei punti per ogni serie, ma la somma non è importante per questo set di dati. Puoi ridurre le colonne della legenda in modo che mostrino l'icona della serie e il nome usando:
legend_template: '%icon,%name'Ma non è affatto necessario che utilizzi una legenda. Sarà più pulito etichettare le linee stesse. Con queste opzioni puoi disabilitare la legenda e fare in modo di mostrare il nome delle serie in corrispondenza dell'ultimo punto:
legend_visible: false,
defaultSeries_lastPoint_label_text: '<b>%seriesName</b>',
Il token '%seriesname' è uno dei tanti che possono essere usati in qualsiasi testo di etichetta per mostrare dettagli puntuali e calcoli.
Infine, abilitiamo l'indicatore sull'asse x con descrizione per mostrare l'aspettativa di vita maschile e femminile per ogni anno. Su dispositivi mobili puoi toccare lo schermo per vedere l'indicatore. Usando un PC, la descrizione viene visualizzata passando con il puntatore del mouse sul grafico.
xAxis_crosshair_enabled: true,Potresti chiederti il perché di tutti quei trattini bassi nel nome della proprietà. Questo non è il vero nome, ma un modo abbreviato per scrivere:
xAxis: {crosshair: {enabled: true}},Potresti trovare più conveniente specificare un'impostazione con i trattini bassi e JSCharting sarà in grado di capire ciò che intendi.
Il testo predefinito è chiaro, ma personalizziamolo un po'.
Dato che vengono mostrate informazioni su ogni punto che l'indicatore incontra, il testo è definito all'interno delle opzioni del punto. La proprietà defaultPoint definisce le opzioni dei punti che verranno ereditate automaticamente da tutti i punti.
defaultPoint_tooltip: '%seriesName <b>%yValue</b> years',
Per più informazioni su questa funzionalità dai un'occhiata a questo tutorial.
Applicando tutte queste opzioni il tuo codice dovrebbe essere come il seguente. Sostituisci l'intera funzione renderChart() con questo codice.
function renderChart(series){
JSC.Chart('chartDiv', {
title_label_text: 'Life Expectancy in the United States',
annotations: [{
label_text: 'Source: National Center for Health Statistics',
position: 'bottom left'
}],
legend_visible: false,
defaultSeries_lastPoint_label_text: '<b>%seriesName</b>',
defaultPoint_tooltip: '%seriesName <b>%yValue</b> years',
xAxis_crosshair_enabled: true,
series: series
});
}
Ricarica ancora la finestra del browser.
Ce l'hai fatta!
Hai recuperato i dati in CSV usando JavaScript. Poi li hai convertiti in formato JSON e li hai filtrati in due serie. Con queste serie hai creato un fantastico grafico interattivo usando JSCharting e lo hai configurato per dargli un aspetto professionale.
Puoi personalizzare e modificare ulteriormente il grafico per soddisfare requisiti specifici. Visita la sezione tutorial di JSCharting per imparare di più su argomenti specifici o trovare grafici simili a quelli che vuoi realizzare nella galleria di esempio e prendere ispirazione da essi per continuare il tuo viaggio nella visualizzazione dei dati.
Se ti imbatti in qualche problema con JSCharting, contatta il team di supporto. Saranno felici di aiutarti a risolvere qualsiasi problema potresti incontrare.
Sfida bonus
Non abbiamo usato tutti i dati disponibili nel file CSV. Prova a sperimentare per fare pratica e divertirti.
Crea questo grafico usando ciò che hai imparato.
Questo file zip contiene la risposta:
Riesci a immaginare che altri grafici potresti realizzare con questi dati? Continua a fare esperimenti e assapora ogni minuto!