Aggiunta di grafici al tuo sito con Highcharts

Tutti si occupano di dati e molto spesso vengono presentati in tabelle di dati di grandi dimensioni. Rappresentare e leggere attraverso lunghi tavoli su un sito web può essere molto complicato. I grafici sono utili per far capire alle persone il cambiamento e la tendenza alla base dei dati. 

Recentemente, quando stavo cercando di trovare un modo semplice per inserire un grafico interattivo su un sito web, ho trovato Highcharts e l'ho utilizzato in vari progetti da allora. 

In questa serie di articoli, esamineremo Highcharts, perché è fantastico e come possiamo implementarlo nei nostri progetti basati sul web.

Che cosa è affascinante per Highcharts?

• È interattivo. Puoi passare il mouse su un oggetto per maggiori dettagli e puoi anche fare clic sugli elementi nella legenda del grafico per attivarli e disattivarli. 
• Compatibilità. Si basa su JavaScript, esegue il rendering in un browser Web, quindi anche IE 6 o un iPad possono mostrarti quelle splendide carte. Highcharts utilizza altri framework JS come framework jQuery, MooTools, Prototype o Highcharts Standalone. Hai bisogno di una delle librerie e highcart.js per creare grafici.
• Molti tipi di grafici. Grafici elevati supporta i tipi di linee, spline, aree, areepline, colonne, barre, piezometri, dispersioni, spigoli angolari, arearange, areeplinerange, columnrange e polari. Vedremo esempi per quelli più comunemente usati: colonne, barre, linee e grafici a torta.
• Nutrire Highcharts è facile. Gli Highcharts possono caricare dati da dati locali, file locali o persino da un server remoto. Può prendere dati analizzati da CSV, JSON, file XML o qualsiasi altro database.
• Salva o stampa i tuoi grafici. Una delle caratteristiche sorprendenti che ho trovato è che puoi stampare o esportare il grafico che vedi attualmente. Si può salvare un grafico come file PDF, JPG, PNG o SVG.
• Facile da configurare, la messa a punto non è un problema. Aggiungi alcune righe di codice e i tuoi dati e grafici verranno disegnati. Con la sua documentazione per l'utente ben scritta e il riferimento alle API, i principianti non si perderanno e gli sviluppatori esperti saranno i benvenuti.
• Licenza flessibile. L'uso di Highcharts è gratuito per siti non commerciali e i prezzi sono flessibili per i progetti commerciali.
• Tema-able. Al momento, ci sono quattro temi predefiniti dall'aspetto moderno o puoi renderlo unico con qualche gusto e conoscenza CSS.

Prima di utilizzare Highcharts la prima volta, vediamo quale tipo di grafico utilizzare nelle attività comuni.

Quale grafico usare quando?

I grafici a barre e i grafici a colonne sono simili in modo che ognuno utilizza lunghi rettangoli per confrontare più valori, ma la loro differenza risiede nell'orientamento del loro grafico. I grafici a barre sono orientati orizzontalmente e i grafici a colonna sono verticali. 

Nel mio semplice esempio, metto a confronto le vendite di un negozio web immaginario per fonte in una distribuzione mensile (confrontando le vendite di ciascun mese tra loro). Come puoi vedere qui sotto, se vuoi confrontare solo una piccola quantità di dati e il grafico a barre si adatta allo schermo con cui stai attualmente lavorando, allora la soluzione migliore è quella di andare con il grafico a barre. 

Al contrario, è necessario utilizzare i grafici a colonne se si dispone di limitazioni verticali, ad esempio con schermate orientate al paesaggio. Vedi il confronto qui sotto.

Grafici a lineerappresentare le informazioni con la serie di punti dati e linee rette. Mostrano particolari cambiamenti di dati a intervalli di tempo uguali. Viene spesso utilizzato per visualizzare la tendenza in una serie temporale. 

Nel mio esempio, utilizzo la stessa tabella dati che ho usato sotto per confrontare più set di dati. Come puoi vedere, è facile confrontare l'andamento delle fonti di vendita dei mesi precedenti.

Grafici a tortasono diagrammi circolari divisi in settori in cui ogni settore mostra la dimensione relativa di ciascun valore. Sono utili quando vuoi confrontare i dati che fanno parte del tutto. Ogni fetta di torta rappresenta il suo valore numerico della somma. 

Nel mio esempio, mostro la distribuzione di diverse vendite di tipo sorgente di un dato periodo.

Anatomia degli Highcharts

Per comprendere i seguenti esempi di codice, è necessario conoscere i concetti di base che costituiscono Highcharts.

Queste sono le parti principali di un grafico:

• Titolovisualizza il nome di un grafico in alto
• I sottotitoli sonoposto proprio sotto il titolo
• La serie si riferisce auna o più serie di dati presentate su un grafico
• I suggerimenti sonodescrizioni di particolari dati visualizzati passando sopra una parte di un grafico
• Leggendavisualizza il nome e / o il simbolo di ogni serie su un grafico. Facendo clic sul nome della serie in una legenda, è possibile abilitare o disabilitare la serie.
• Stampa e scarica, lasciamo che gli utenti stampino o esportino il grafico. 

Aggiungere il tuo primo grafico

In questo esempio, importiamo alcuni dati di esempio da un file CSV, li elaboriamo e presentiamo i dati in un istogramma in un file HTML. 

Vediamo la configurazione di base: 

• Devi creare un file HTML con qualsiasi nome tu voglia
• Nella stessa directory è necessario un file CSV (valori separati da virgola)

Nel mio esempio, utilizzo un file di testo in cui i valori sono separati da virgola e i record sono separati da nuove linee.

Il contenuto del colonna data.csv file che stiamo usando: 

Vendite per sorgente, gennaio, febbraio, marzo, aprile, maggio, giugno, luglio Motore di ricerca, 60,64,57,61,54,58,61 annunci, 30,39,32,40,37,33,41 affiliati, 20,18,23,27,19,23,27 Newsletter, 29,22,23,27,19,32,34 Offline / Biologico, 50,47,44,40,48,51,53

Nell'HTML capo, dobbiamo includere l'ultima versione di jQuery, Highcarts.js, il modulo di esportazione opzionale e il nostro codice JavaScript personalizzato che prepara e crea il nostro grafico. 

Nel corpo, abbiamo bisogno di un contenitore div dove può essere disegnato il grafico.

Come puoi vedere, le prime cose da impostare sono il tipo di grafico e il nome del contenitore. Quindi impostiamo titolo, sottotitolo e titolo dell'asse y con il nostro testo personalizzato. Il contenuto delle categorie per l'asse xe i dati della serie vengono elaborati e associati in seguito dopo aver analizzato correttamente i dati CSV. 

Il nostro JavaScript ha fatto questi semplici passaggi: 

1. Imposta le opzioni
2. Analizza il CSV
3. Creato il grafico

Sono tre semplici passaggi per un grafico davvero bello per i nostri dati.

In arrivo…

Questo era un articolo introduttivo su come iniziare ad usare Highcharts. 

Nel prossimo articolo, continueremo a esaminare la libreria e come possiamo utilizzarla per il rendering di informazioni in altri tipi di grafici,.