Un tutorial sul drill-down di FusionCharts in jQuery

Pubblicato: 2022-03-11

La visualizzazione dei dati ne semplifica la lettura

Quando si tratta di analisi dei dati, la maggior parte delle aziende si affida a MS Excel o Fogli Google. Sebbene questi siano strumenti potenti, è difficile notare le tendenze, tanto meno avere un senso da grandi righe di dati del foglio di calcolo. Gestire i dati presentati in questo modo non è molto interessante, ma una volta aggiunta la visualizzazione a quei dati, le cose diventano più facili da gestire e questo è l'argomento del tutorial di oggi: creare grafici interattivi usando jQuery.

Gestire i dati del foglio di calcolo è noioso.

È difficile notare le tendenze dalle righe di dati del foglio di calcolo, ma una volta aggiunta la visualizzazione...

Twitta

Userò la libreria di grafici JavaScript di FusionCharts per questo progetto in quanto offre un'ampia libreria di oltre 90 grafici, è compatibile con tutti i browser ed è abbastanza facile da lavorare. Offre anche un plugin dedicato per jQuery che semplificherà il nostro lavoro.

Inizierò creando un grafico di base utilizzando la libreria JavaScript principale di FusionCharts e il suo plug-in per grafici jQuery, quindi aggiungerò la funzionalità di drill-down. Il drill-down consente di passare da un grafico all'altro facendo clic su un grafico di dati.

Il termine "trama di dati" è contestuale; si riferisce a una colonna in un istogramma, linee in un grafico a linee, fette di torta in un grafico a torta. Facendo clic su un grafico di dati dal grafico principale, ti viene presentato un grafico figlio, che mostra i dati relativi un livello più profondo.

Facendo clic su un diagramma di dati sul grafico principale verrà visualizzato un grafico figlio.

Capire FusionCharts

Prima di iniziare il tutorial, esaminiamo l'anatomia di base di FusionCharts. Ogni grafico è composto da questi elementi chiave:

Didascalia: Il titolo sul grafico. Spiega cosa viene tracciato.
Sottodidascalia: il testo sotto la didascalia che specifica informazioni aggiuntive sul grafico, spesso indica un periodo di tempo da cui sono stati raccolti i dati.
Legenda: mostra un simbolo per ogni tracciato di dati sul grafico. Una trama particolare può essere abilitata o disabilitata facendo clic sulla rispettiva icona della legenda.
Grafico dei dati: si tratta di rappresentazioni dei dati sul grafico. Un grafico di dati può essere una colonna in un istogramma, linee in un grafico a linee o sezioni a torta in un grafico a torta.
Descrizione comando: testo che appare quando si passa il mouse su un grafico di dati, utilizzato per trasmettere informazioni aggiuntive su quel particolare grafico di dati.

Realizzazione di un diagramma di drill-down

Prima di iniziare, ecco uno screenshot del grafico che creeremo in questo tutorial. Puoi vedere JSFiddle qui o accedere al codice sorgente completo del progetto sul mio repository GitHub.

Un'anteprima del progetto jquery finale di questo tutorial.

Ho suddiviso il processo di creazione di un diagramma dettagliato in cinque passaggi, quindi iniziamo.

Passaggio 1: inclusione di file JavaScript e creazione del contenitore del grafico

Innanzitutto, dobbiamo includere tutti i file JS da cui dipende il nostro progetto utilizzando il tag <script> . Se la pagina non esiste già, crea un documento HTML vuoto e includi i file sottostanti nella sezione <head> . Ora abbiamo bisogno dei seguenti quattro file:

jQuery minimizzato
Libreria JS principale di FusionCharts (include sia fusioncharts.js che fusioncharts.charts.js )
Plugin jQuery di FusionCharts

La nostra sezione <head> ora apparirà così:

 <!-- jQuery --> <script type="text/javascript" src="jquery.min.js"></script> <!-- FusionCharts JS file --> <script type="text/javascript" src="js/fusioncharts.js"></script> <script type="text/javascript" src="js/fusioncharts.charts.js"></script> <!-- jQuery charts plugin --> <script type="text/javascript" src="js/jquery-plugin.js"></script> <!-- custom theme file (optional) --> <script type="text/javascript" src="js/toptal.js"></script>

Ora che abbiamo tutte le dipendenze incluse, è il momento di creare il contenitore <div> per il grafico e incorporarlo nella nostra pagina con il seguente codice HTML:

 <div>drill-down chart will load here</div>

Ora possiamo selezionarlo usando il selettore $ di jQuery all'interno del codice:

 $("#drill-down-chart")

Nota: se hai più di un grafico sulla tua pagina, avrai bisogno di un contenitore separato per ogni grafico con un id univoco .

La visualizzazione dei dati ne facilita la lettura.

Passaggio 2: ottenere e strutturare i dati

FusionCharts accetta dati in entrambi i formati JSON e XML, ma ho scelto di utilizzare JSON poiché è diventato il formato standard per lo scambio di dati tra le app Web. L'array di dati JSON per un grafico di base contiene un oggetto per ogni grafico di dati e all'interno di ciascun oggetto di grafico di dati definiamo la rispettiva etichetta e valore. Quella struttura assomiglia a:

 "data": [{ "label": "Q1", "value": "850000", }, { "label": "Q2", "value": "2070000", },... // more data objects ]

Mentre tracciamo il nostro grafico drill-down, il suo JSON diventa più complesso. Il collegamento tra i grafici padre e figlio richiede un'altra coppia key - value all'interno di ogni oggetto dell'array di dati. La nuova chiave (chiamata ovviamente link ) conterrà l'id del grafico figlio che otterrai quando si fa clic sul grafico dei dati padre. Il formato per definire l' id del grafico figlio è newchart-dataFormat-childId . Dal momento che stiamo usando JSON, sappiamo che qualunque cosa colleghiamo avrà l'aspetto di newchart-json-childId . Ecco come lo definiamo per il nostro grafico:

 "data": [{ "label": "Q1", "value": "850000", "link": "newchart-json-q1" }, { "label": "Q2", "value": "2070000", "link": "newchart-json-q2" }, ... // more data objects]

Passaggio 3: inserimento dei dati del grafico

Una volta che hai i dati pronti, è il momento di inserire il grafico nella tua pagina usando il metodo insertFusionCharts fornito dal plugin jQuery:

 $("#drill-down-chart").insertFusionCharts({ type: 'column2d', id: "mychart", width: '100%', height: '450', dataFormat: 'json', dataSource: { "chart": { "caption": "Quarterly Revenue for 2015", "paletteColors": "#9EA5FC", "xAxisName": "Quarter (Click to drill down)", "yAxisName": "Revenue (In USD)", // more chart configuration options }, "data": [ // see step-2 for explanation ], "linkedData": [ // explained in step-4 ] } })

Analizziamo lo snippet di codice sopra:

type definisce il tipo di grafico padre che stiamo tracciando. In questo caso, column2d . Ogni grafico nella libreria FusionCharts ha un alias univoco. Puoi trovare l'alias per il grafico che desideri tracciare nella pagina dell'elenco dei grafici di FusionCharts.
id imposta l'id univoco per il grafico, da non confondere con l'id dell'elemento <div> che contiene il nostro grafico. L' id di un grafico viene utilizzato per selezionare un grafico per l'applicazione di gestori di eventi e metodi di chiamata. Ne faremo uso nel passaggio 5.
width e height impostano la dimensione del grafico in pixel o percentuale. Larghezza 100% indica al grafico di occupare l'intera larghezza del contenitore.
Definiamo il formato dei dati utilizzando l'attributo dataFormat . Stiamo usando JSON per il nostro esempio, ma ci sono anche altri formati di dati accettabili, come un URL XML. Per ulteriori informazioni sui formati dei dati, fare riferimento alla pagina della documentazione ufficiale di FusionCharts.
dataSource contiene il contenuto effettivo del grafico e l'oggetto chart al suo interno contiene le opzioni di configurazione del grafico, ad esempio didascalia e sottodidascalia. L'array data dovrebbe apparire familiare poiché l'abbiamo realizzato nel passaggio 2 (contiene i dati da tracciare) e linkedData contiene il contenuto per il grafico figlio (il grafico che si ottiene dopo aver fatto clic su un grafico di dati sul grafico padre).

Correlati: assumi il 3% dei migliori architetti freelance di Big Data.

Passaggio 4: creazione dell'array di dati collegati per i grafici figlio

Ora che abbiamo definito il grafico padre, è il momento di creare un grafico figlio per ogni grafico di dati, un processo molto simile alla creazione del grafico padre. L'array linkedData , creato con il metodo 'insertFusionCharts', definirà un oggetto separato per ogni grafico figlio. Ecco come appaiono i dati per il primo grafico figlio:

 "linkeddata": [{ "id": "q1", "linkedchart": { "chart": { "caption": "Monthly Revenue", "subcaption": "First Quarter", "paletteColors": "#EEDA54, #A2A5FC, #41CBE3", "labelFontSize": "16", // more configuration options }, "data": [{ "label": "Jan", "value": "255000" }, { "label": "Feb", "value": "467500" }, //more data] } }, //content for more child charts

id è l'id del singolo grafico figlio che abbiamo definito nel passaggio 2. linkedChart è simile a dataSource del passaggio 3 in quanto contiene il contenuto effettivo di quel grafico. Ci sono numerosi altri attributi che vanno all'interno dell'oggetto grafico, che tratterò in dettaglio nella sezione successiva, "Migliorare il design con gli attributi del grafico".

Passaggio 5: configurazione di drill-down personalizzata

Diversi tipi di grafici

Finora, il nostro codice di esempio ha entrambi i grafici padre e figlio che condividono lo stesso tipo di grafico. Se vuoi eseguire il drill-down su un tipo di grafico diverso (dalla colonna alla torta, ad esempio), puoi farlo associando l'evento fusionchartsrendered .

 $('#drill-down-chart').bind('fusionchartsrendered', function(event, args) { FusionCharts.items['mychart'].configureLink({ type: "doughnut2d", overlayButton: { message: 'BACK', // Set the button to show diff message bgColor: '#FCFDFD', borderColor: '#cccccc' } }); });

Nel codice precedente, l'evento fusionchartsrendered chiamerà il metodo configureLink , che definisce il tipo di tutti i grafici figlio più eventuali opzioni del pulsante di sovrapposizione. Puoi anche specificare tipi di grafici separati per ogni grafico figlio. Ci sono molte opzioni disponibili nel metodo configureLink , quindi potresti trovare utile rivedere la sua documentazione di riferimento API da FusionCharts.

Rendering di grafici in diversi div

Un'altra cosa interessante che puoi fare è rendere il grafico figlio in un contenitore diverso anziché nello stesso del suo genitore. Per questo, definisci un contenitore HTML <div> separato dopo il contenitore del grafico padre e passa il suo id all'attributo renderAt come mostrato di seguito:

 $('#chart-container').bind('fusionchartsrendered', function(event, args) { FusionCharts.items['mychart'].configureLink({ type: "doughnut2d", renderAt:"chart-container2", overlayButton: { message: 'BACK', // Set the button to show diff messafe bgColor: '#FCFDFD', borderColor: '#cccccc' } }); });

Il valore assegnato all'attributo renderAt specifica l'id del <div> in cui verrà visualizzato il grafico figlio ( chart-container2 ).

Miglioramento del design con gli attributi del grafico

Seguendo questo tutorial otterrai un grafico funzionale, ma sarà alquanto brutto se lo lasci così. Per una presentazione più accattivante, dovrai utilizzare gli "attributi del grafico" cosmetici. Gli attributi del grafico sono definiti all'interno dell'oggetto chart e utilizzati per personalizzare le opzioni di rendering. Potrebbe essere utile fare riferimento al grafico esplicativo di FusionCharts durante la revisione di questi attributi chiave configurabili:

paletteColors definisce il colore dei grafici dei dati. Se dai qui un solo colore, tutte le colonne saranno di quel colore. Se dai più colori, la prima colonna assumerà il primo valore, la seconda colonna assumerà il secondo valore e così via.
plotSpacePercent controlla lo spazio tra le colonne. Il valore predefinito per questo è 20 (il valore è un int, ma l'unità è una percentuale) e l'intervallo consentito è 0-80. Un valore zero farà raggruppare le colonne e attaccarsi l'una all'altra.
baseFont definisce la famiglia di caratteri del grafico. Puoi usare qualsiasi tipo di carattere che ti piace; Ho usato Open Sans di Google nel mio grafico. Includi semplicemente il file del carattere esterno nella tua pagina HTML per usarlo nel tuo grafico.
plotToolText ti consente di personalizzare i suggerimenti. Usando macro come $label e * $dataValue , puoi mostrare informazioni specifiche su un particolare diagramma di dati dall'interno di un <div> , quindi modellare quel <div> usando CSS inline. Ecco cosa ho fatto nel nostro esempio:

 "plotToolText": "<div>$label: $dataValue</div>"

theme consente di definire gli attributi del grafico in un file diverso e applicarli una volta qui invece di ingombrare l'oggetto grafico con numerosi attributi del grafico. Puoi trovare il file del tema per questo tutorial - toptal.js - all'interno della cartella JS del repository GitHub del progetto.

Questo è tutto ciò che tratterò, ma ci sono più di cento attributi per un grafico, quindi se vuoi esplorare ulteriormente, visita la pagina degli attributi del grafico di FusionCharts e cerca il tuo particolare tipo di grafico.

Altre risorse FusionCharts e jQuery

Anche se ho trattato gli elementi più importanti nella creazione di un grafico drill-down utilizzando jQuery, ci sono buone probabilità che tu abbia bisogno di aiuto quando provi a farlo da solo. Per quel momento, ecco alcune risorse aggiuntive:

Plugin per grafici jQuery: per trovare ispirazione, visita la pagina ufficiale del plugin per grafici jQuery per vedere alcuni esempi dal vivo.
Documentazione: se non riesci a capire qualcosa, la documentazione è il primo posto in cui dovresti cercare. Ecco i collegamenti utili per il plug-in jQuery e il grafico drill-down (noto anche come grafici collegati).
Demo: ogni libreria di grafici offre campioni dal vivo per mostrare le sue capacità e FusionCharts non è diverso. Vai alla sua galleria demo di oltre 800 campioni dal vivo, con il codice sorgente completo se hai bisogno di qualche idea. Ci sono buone probabilità che qualunque cosa tu stia cercando di fare sia già disponibile. Non c'è bisogno di ricominciare da zero; basta biforcare il violino e procedere da lì!
Altre estensioni: se non utilizzi JavaScript vanilla o jQuery, puoi esplorare più plug-in e wrapper offerti da FusionCharts in questa pagina. Hanno plugin dedicati per una varietà di librerie e framework come Angular, React, Java, ASP.NET ecc.

PS: sarò presente nella sezione commenti qui sotto, quindi sentiti libero di pubblicare qualsiasi domanda tu possa avere sul mio articolo. Sono felice di aiutare!

Correlati: Data mining per l'analisi predittiva dei social network