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

Ingen valgmulighet

Ved å legge til no-selection=[true] blir alle linjer vist (ingen valgmulighet).

$ {graph:scatter-plot data-uri=[/for-ansatte/arbeidsstotte/profil/nettarbeid/veiledninger/komponenter/grafer/alder-oppslutning-over-tid.csv] 
domain-x=[2001,2017] step-x=[4] domain-y=[0,40] 
description=[Grafen viser oppslutning gjennom tidene etter alder] 
decimals=[1] hide-average-line=[true] unit=[%] 
color-wheel=[#A20600,#17761E,#EDD700] no-selection=[true]}

Ikke vise punkter til noe er valgt

Hvis er veldig mange linjer og dermed punkter så er det mulig å legge inn show-nothing-before-selection=[true], som gråer ut punktene i legend og skjuler punktene i grafen inntil de blir valgt.

Antall desimaler

For å velge antall desimaler kan du bruke decimals=[] (eks. 0 for å skjule desimaler). Default er 1 desimal.

Velge enhet

Du kan velge type enhet (y-akse og ved trykk på plottepunkt) ved å bruke unit=[] (eks. %)

Steg i x-akse

For å velge steg i x-akse (tidslinje) kan du bruke step-x=[] (eks. 4 for stortingsvalg)

Fjerne gjennomsnittslinje

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

Egen CSV-fil for gjennomsnittslinje

Hvis du ønsker å bruke egen gjennomsnittslinje istedetfor default eller å ha noen andre tall for denne linjen kan du bruke custom-average-line=[<sti-til-csv>, <tekst-istedetfor-Gjennomsnitt>]

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=[].

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.

$ {graph:line-chart 
data-uri=[/for-ansatte/arbeidsstotte/profil/nettarbeid/veiledninger/komponenter/grafer/temperaturer.csv]
description=[Temperaturer mars-april]}

Problemer med tegnsett

Ved tegnsettproblemer – f.eks æ, ø og å kommer opp i grafen som rare tegn:

«For å få med æøå når vi laster opp filer på nettsiden må disse filene lagres i csv format med unicode-tegnsettet "UTF-8". Jeg fant det ikke som et alternativ i excel 2016 office-pakken, så det kan være fordelaktig å laste ned nyeste versjon av office 360. Jeg lagde filene fra scratch i R og har ikke prøvd å "encode" dem i excel (ny versjon) ennå, men det skal i teorien gå. Når en åpner en UTF-8 csv-fil i excel(2016) får en opp litt "rare" tegn som erstatter øæå, men det er bare å se bort i fra siden det blir bra når en laster det opp på nettsiden. Nettsiden godtar altså UTF-8 (med glede).»

Hvis ikke får til å lagre/eksportere som UTF-8:

1. Gå til om-arkfanen til cvs-fila og endre filtype fra application/octet-stream til text/plain
2. Endre tegnkoding under om-arkfanen fra utf-8 til iso-8859-1.

Hvis ikke det heller fungerer:

1. Ta bort tegnkoding igjen / endre tilbake til utf-8.
2. Rediger fila og skriv inn spesialtegnene på nytt. Lagre.