Grafer

Hvordan lage interaktive grafer i en artikkelmal.

Kakediagram

Et kakediagram, sirkeldiagram, sektordiagram, eller smultringdiagram, er et sirkulært diagram delt opp i ulike sektorer som illustrerer forholdet mellom ulike størrelser. Diagrammet fungerer best dersom du kun har èn dataserie med syv eller færre kategorier. Merk at du bare kan ha ett diagram av denne typen i en html-fil.

Data

For et kakediagram må datamaterialet legges i to linjer, den første linja skal inneholde tittel eller beskrivelse, og den andre skal vise de tilhørende verdiene. For eksempelet over ser datasettet slik ut:

Desktop, Mobil, Tablet
58.9%, 38.4%, 2.7%

En lenke til datasettet skal brukes legges inn i koden med paramenteren: data-uri=[dataset.csv].

Dataene som skal vises frem i den enkelte grafen må ligge i en tekstfil av typen ".csv". Det er mulig å konvertere data til denne filtypen ved bruk av Excel. Dataene må være kommaseparert.

Beskrivelse

En beskrivelse av grafen skal legges inn for å sørge for at brukere som f.eks. bruker skjermlesere får en beskrivelse av grafens innhold. Denne teksten blir i tillegg synlig som figurtekst.

Eksempel: Hvilke enheter bruker uio.no sine brukere?

Grafen viser hvilke enheter brukerne av uio.no har brukt i tidsrommet 18. - 24. mai 2020.

$ {graph:doughnut data-uri=[/for-ansatte/arbeidsstotte/profil/nettarbeid/
veiledninger/komponenter/grafer/enheter.csv] title=[Enhet] unit=[%] 
description=[Hvilke enheter bruker uio.no sine brukere?]}

Egendefinerte farger

I utgangspunktet skal grafene brukes med UiO sine forhåndsdefinerte farger. Dersom det er behov for egendefinerte farger, f.eks. for å legge inn partifargene, kan dette defineres ved å legge til "color-wheel"-parameteren. Merk at dersom du gjør dette, må du selv sørge for at fargekontrasten er i henhold til universell utforming, som sier at ikke-tekstlig innhold skal ha et kontrastforhold på minst 3:1 mot farge(r) som ligger ved siden av.

Eksempel med bruk av "color-wheel"

$ {graph:doughnut data-uri=[/for-ansatte/arbeidsstotte/profil/nettarbeid/
veiledninger/komponenter/grafer/enheter.csv] title=[Enhet] 
unit=[%] color-wheel=[#aa0000,#0000aa] 
description=[Hvilke enheter bruker uio.no sine brukere?]}

Hierarkisk søylediagram

Eksempel: Befolkningssammensetningen i Oslo i 2020.

$ {graph:hbar-chart data-uri=[/for-ansatte/arbeidsstotte/profil/nettarbeid/veiledninger/komponenter/grafer/
befolkning.csv] description=[Befolkning, kjønn, alder, og år]}

Befolkning, etter kjønn, alder og år

Dataformat i hierarkisk søylediagram eller stolpediagram

Første rad kan vere være tall 1-n (må være der for å kunne lese filen som CSV). Antall kolonner nå være lik dypeste node, n rader og endenode/-verdi er siste kolonne i rad som ikke er blank / "". Ved å legge til en kolonne først for for eksempel sted, kunne man først fått opp søylediagrammed fordelt på sted, deretter kjønn.

kjønn,alder,antall
Menn,0 år,4 647
Menn,1 år,4 283
Menn,2 år,4 280
Menn,3 år,4 243
Menn,4 år,4 047
Menn,5 år,4 080
Menn,6 år,3 770
Menn,7 år,3 847
Menn,8 år,3 799
...

Alternativt CSV format

Om ønskelig kan .csv-filen formateres på følgende måte: to kolonner, n rader, childnames må være unike over hele treet og endenode/-verdi detekteres som tall. Dette betyr at childnames ikke må starte med en 1-9. De første to radene må være som under, og de første undernodene må kobles til root-parent:

name,parent
root,null

<childname-1>,root
<child-child-1-name>,<childname-1>
<child-child-2-name>,<childname-1>
<value float or int>,<child-child-1-name>
<value float or int>,<child-child-2-name>
...
<childname-n>,root
...

For å ta i bruk alternativt CSV-format, må "alternative-csv-format-unique-nodes"-variablen settes til =[true].

$ {graph:hbar-chart data-uri=[/for-ansatte/arbeidsstotte/profil/ 
nettarbeid/veiledninger/komponenter/grafer/tree-alternative-unique-nodes.csv] 
alternative-csv-format-unique-nodes=[true]}

Parameter for å skalere x-akse

Om ønskelig er det mulig å skalere x-aksen. Dette gjøres ved å ta i bruk "pow"-variablen, med ønskelig skaleringsverdi, f.eks. "pow=[0.5]" for å få kvadratroten.

$ {graph:hbar-chart data-uri=[/for-ansatte/arbeidsstotte/profil/ 
nettarbeid/veiledninger/komponenter/grafer/chordate.csv] pow=[0.5]}

Spredningsplot

Eksempel: Fordeling av popularitet på ulike partier gjennom tidene

$ {graph:scatter-plot data-uri=[/for-ansatte/arbeidsstotte/profil/
nettarbeid/veiledninger/komponenter/grafer/scatter-plot.csv] 
domain-x=[1957,2017] domain-y=[0,57] title-select=[Parti] 
description=[Grafen viser ulike partier sin oppslutning over tid]}

(hide-average-line=[true] kan brukes for å ta bort gjennomsnitt linje)

Grafen viser ulike partier sin oppslutning over tid

Dataformat

Tre kolonner, n rader, første rad har faste navn: year, name, total. Du kan ikke endre disse, og de må stå med bare små bokstaver.

year,name,total
1957,RV,
1957,SV,
1957,DNA,56.20%
1957,Venstre,8.90%
1957,KrF,10.10%
1957,Sp,8.70%
1957,Høyre,14.80%
1957,FrP,
1957,Andre,
1957,MDG,
1965,RV,
1965,SV,4.70%
1965,DNA,45.90%
1965,Venstre,10.90%
1965,KrF,6.10%
...

Linjediagram

Et linjediagram brukes for å vise verdier for gitte datoer, for eksempel statistikk over værdata som under. Merk at csv-filen må være på formen:

date,value
2020-03-02,3.6
2020-03-03,1.6
2020-03-04,-0.7
2020-03-05,0.2
2020-03-06,-0.6
2020-03-09,4.9
...

Du kan altså ikke bytte ut datoformatet eller overskriftene date og value.

Datapunktene skilles med et komma og verdiene kan være positive heltall eller desimaltall.
Merk: Alle tall lavere enn -0.6 forsvinner fra grafen.

Temperaturer mars-april

$ {graph:line-chart 
data-uri=[/for-ansatte/arbeidsstotte/profil/nettarbeid/veiledninger/komponenter/grafer/temperaturer.csv]
description=[Temperaturer mars-april]}
Publisert 26. mai 2020 12:07 - Sist endret 1. sep. 2020 10:27