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 ¨C 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.