Grafer p? nettsidene

Merk at desimaltall i csv-filene m? v?re med punktum

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. 

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
146292,95243,6765

Legg lenke til datasettet inn i koden med paramenteren: data-uri=[navn-pa-ditt-dataset.csv].

Dataene som skal vises frem i den enkelte grafen m? ligge i en tekstfil av typen ".csv". Lagre datafilen i samme mappe som nettsiden, eller i en annen mappe som samler eventuelt flere datafiler. Det er lurt ? velge et filnavn som gj?r det enkelt for andre ? skj?nne hva dette er data p?.

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] unit=[] decimals=[0] title=[Enheter] unit=[%] 
description=[Hvilke enheter bruker uio.no sine brukere?]}

Antall desimaler

For ? velge antall desimaler kan du bruke decimals=[0-n]. Default er 1 desimal.

Skjule summeringen

Hvis du ?nsker ? skjule summering, typisk n?r tallene er prosenter fra f?r, kan du bruke remove-sum=[true]

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?]}

Vise tabell med alle data i accordion

Hvis ?nsker ? vise tabell med data under accordion med overskrift "Oversikt i tabellform" kan du legge til show-table=[true]. Denne er normalt skjult og til bruk for skjermleser. Hvis du ?nsker egendefinert overskrift kan du legge til ekstra parameter: show-table-heading=[].

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]}

Dataformat i hierarkisk s?ylediagram / 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 kan du bruke alternative-csv-format-unique-nodes=[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]}

Vanlig s?ylediagram

Eksempelet har ogs? definert color-wheel=[] for egne farger p? s?ylene

$ {graph:hbar-chart-simple data-uri=[/for-ansatte/arbeidsstotte/profil/nettarbeid/veiledninger/komponenter/grafer/partier-oppslutning-2013.csv] 
description=[Stolpediagrammet viser fordelingen av oppslutningen p? alle partiene] 
unit=[%] color-wheel=[#A20600,#D96262,#E82215,#589A5E,#17761E,#EDD700,#006357,#3C92BD,#005694,#C4C4C4]}

Eksempel p? csv-fil:

R?dt, SV, Ap, Sp, MDG, KrF, Venstre, H?yre, FrP, Andre
3.60, 10.90, 13.60, 5.50, 10.00, 5.50, 17.30, 20.90, 10.90, 1.80

Vise tabell med alle data i accordion

Hvis ?nsker ? vise tabell med data under accordion med overskrift "Oversikt i tabellform" kan du legge til show-table=[true]. Denne er normalt skjult og til bruk for skjermleser. Hvis du ?nsker egendefinert overskrift kan du legge til ekstra parameter: show-table-heading=[].

Mer plass til tekst p? y-aksen

Hvis trenger mer plass til tekst p? y-aksen kan du legge inn overstyring av plass p? venstresiden med override-margin-left=[] (f.eks. 200, er default 130)

Spredningsplot

Eksempel: Fordeling av popularitet p? ulike partier gjennom tidene

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

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%
...

Multiple valg og egendefinerte farger

Ved ? legge til multiple=[true] kan du velge flere linjer om gangen og ved ? legge til color-wheel=[] kan du definere egne farger

$ {graph:scatter-plot data-uri=[/for-ansatte/arbeidsstotte/profil/
nettarbeid/veiledninger/komponenter/grafer/partier-oppslutning-over-tid.csv] 
domain-x=[1957,2013] step-x=[4] domain-y=[0,57] unit=[%] title-select=[Parti] 
description=[Grafen viser ulike partier sin oppslutning over tid] 
hide-average-line=[true] multiple=[true] color-wheel=[#A20600,#D96262,#E82215,#17761E,#EDD700,#006357,#3C92BD,#005694,#C4C4C4,#589A5E]}