Lage grafer med Javascript

av Ole Petter den 14. september 2019

Sist oppdatert: 15 september, 2019 kl 12:17

---

Et bra verktøy for å lage grafer med javascript er chart.js. Ved hjelp av dette biblioteket er det enkelt å lage oversiktlige grafer, histogrammer, pai-diagrammer og mer.

For å lage en god graf eller et bra diagram trenger man mye data, for eksempel hvis man skal lage en graf som viser historiske oljepriser eller boligpriser over en lengre periode.

JSON

En tidkrevende måte å lage data er å fylle det inn manuelt selv. Men en bedre måte er å hente data fra biblioteker som samler disse dataene og deler dem via http i XML, JSON eller andre formater.

JSON er den mest populære datatypen for å sende innhold fra databaser og gjøre den tilgjengelig for andre, enten via API nøkkel, Token eller også ofte helt fritt uten noen autentisering.

I dette eksempelet brukes en API fra Barchart:
https://www.barchart.com/ondemand/api

En god ressurs som viser detaljert hvordan man kobler til eksterne API-er via Javascript, er denne linken fra taniarascia.com

https://www.taniarascia.com/how-to-connect-to-an-api-with-javascript/

Det finnes flere måter å prosessere data fra en ekstern kilde, en populær metode er «XML HttpRequest», som støttes av alle moderne nettlesere. Denne metoden gjør at utviklere kan oppdatere en nettside uten at den trenger å lastes inn på nytt, innholdet oppdateres live.

For mer informasjon om XML HttpRequest, besøk W3Schools leksjon om dette emnet: https://www.w3schools.com/xml/xml_http.asp

Tips for å komme i gang

For å komme i gang med chart.js, er første steg å besøke chart.js sin hjemmeside: https://www.chartjs.org/docs/latest/getting-started/ og laste ned javascript-kildekoden for chart.js sitt bibliotek.

Deretter må det opprettes en html-fil eller eventuelt en php-fil som viser diagrammet, og en javascript-fil hvor dataen til grafen hentes.

Jeg har i dette tilfellet opprettet en mappe med to filer, henholdsvis index.html og app.js. Index-filen viser diagrammet ved hjelp av canvas, som er HTML sitt element som brukes til å vise grafiske filer fra Javascript.

app.js må inkluderes i index.html-filen for å fremstille grafen.

app.js tar seg av Javascript-koden som lager diagrammet. For å vise grafen brukes id – i dette tilfellet myChart. Dette er den samme id som brukes på index.html, hvor grafen vises grafisk.

Koden i app.js er et Javascript objekt, som ligner veldig på JSON i kode, og i stedet for å bruke statiske tall, er det bedre å bruke tall fra eksterne kilder.

Hente data fra API

For å fylle grafen med data fra et eksternt nettsted må det brukes en metode som er nevnt tidligere i artikkelen, nemlig XML HttpRequest. Chart.js biblioteket må også inkluderes for å fremstille diagrammet grafisk.

Steg 1 – index.html og app.js

Første steg er å lage to filer, index.html og app.js. Førstnevnte inneholder kun link til app.js, samt canvas-elementet som viser diagrammet.

Deretter i app.js må det sjekkes om tilgangen er godkjent ved å bruke readyState, som returnerer statuskoden til klienten.

«readyState == 4» betyr at operasjonen er ferdig og hvis «status == 200» betyr det at operasjonen enten pågår eller er ferdigstilt. Da kan data som er sendt i JSON format «parses» og brukes i nettleseren.

Steg 2 – JSON.parse

Da er neste steg å spørre etter data ved å hente de fra javascriptobjektet. Objekter har ulike egenskaper, eller «properties». I dette tilfellet brukes variabelen myObj til å lagre responsen eller spørringen.

For å hente data fra et javascript-objekt må man gå inn i variabelen som holder JSON-dataen som er «parset» og velge hvilken egenskap man vil hente. På bildet ovenfor er fremgangsmåten slik:

Steg 3 – tegne diagrammet

For å tegne diagrammet brukes «map»-funksjonen, som er en innebygget javascript-funksjon som går gjennom hvert element i objektet i rekkefølge.
Ved hjelp av denne funksjonen er det enkelt å sette inn dataene i diagrammet.

Variablene «data» og «labels» brukes for å fylle de nødvendige feltene i diagrammet. For å tegne diagrammet fylles disse variablene inn i konfigurasjonsfeltet i objektblokken til diagrammet.

Steg 4 – xmlhttp.open/send

Siste steg for å hente dataene til modellen er å bruke funksjonen xmlhttp.open() og xmlhttp.send() som henholdsvis starter en ny forespørsel til serveren, og sender den.

Første parameter i open-funksjonen er hvilken http-metode som skal brukes, i dette tilfellet «GET».

Det andre parameteret er Url til forespørselen. Url-en forespørselen skal sendes til lagres i en variabel kalt requestUrl, og denne brukes som det andre parameteret i xmlhttp.open-funksjonen.

Det tredje parameteret er om forespørselen er asynkron eller synkron. True betyr asynkron, som innebærer at data kan sendes til siden uten at den trenger å lastes inn på nytt.

Steg 5 – vise diagrammet

Til slutt må diagrammet vises på nettsiden, index.html. Dette gjøres som nevnt i canvas-elementet.

Kildekoden