Graf

Vis grafer ud fra data.

Det er muligt at få vist flere former for grafer, herunder cirkeldiagrammer m.m. vha. ChartJS. Konfigurationen består af tre dele; "type", "options" og "datasets". "type og "options" angives på funktionen mens "datasets" angives på laget. Alle parameter til både "options" og "datasets" fra dokumentationen kan benyttes. Bemærk at vi pt. benytter version 2.9.4 som default og at der er forskel på den og den seneste version. Det anbefales at benytte seneste version ved at angive ChartJSVersion i konfigurationen.

I tillæg til den normale ChartJS, er det muligt at benytte plugin'et chartjs-plugin-datalabels. Det eneste du skal gøre er at tilføje det til konfigurationen under options. Derudover er det muligt at have en speciel konfiguration til hvert dataset.

Options

Herunder findes en beskrivelse af de enkelte egenskaber, der kan angiver til denne funktion.

disable

• Type: boolean
• Default: false

Skal kontrollen deaktiveres. Herved fungerer det, som om kontrollen ikke var tilføjet. Kan bruges til midlertidig at fjerne en kontrol.

detach

• Type: string

Angiv en reference til et alternativ html-element, som denne kontrol skal vises i. Det kan benyttes til at placere indholdet af en kontrol et andet sted på sin side. Hvis detach har værdien "abc", så skal der tlføjes et element til HTML'en på denne form: <div data-widget-detach="abc"/>. Hvis elementet ikke findes, så fungerer kontrollen, som hvis detach ikke var angivet.

css

• Type: string | string[]

Angiv en sti til en css-fil, der skal loades efter denne kontrol. Herved vil det være muligt at lave en brugertilpasset style af kontrollen.

className

• Type: string

Tilføj en speciel CSS class til elementet. Dette kan bruges til at styre hvordan elementet ser ud eller placeres på siden.

type

• Type: string

Angiv hvilken type graf, der skal vises. Se hvilke typer, der er at vælge imellem her.

ChartJSVersion

• Type: number
• Default: 2

Angiv hvilken version af ChartJS, der skal bruges. Som default benyttes versoin 2. Dette er for at være baggudkompatibel. Det anbefales at benytte versoin 4, der er den seneste version i skrivende stund.

options

• Type: ocject

Options er afhængig af hvilken type, der er valgt. Se dokumentationen for detaljer.

Eksempler

Eksempler, der bruger denne komponent:

• Cirkeldiagram chart

  Brug Septima Widget til at vise data som grafer. Grafer kan vises på forskellige former afhængig af data.

• Graf chart

  Få vist en graf med data. Data kan for eksempel komme fra egen service eller fra en offentlig tjeneste. Graferne er responsive, så de automatisk tilpasser sig den side, de bliver sat ind på.

• Stakket diagram chart

  Grafer med Septima Widget kan vises på mange forskellige former afhængig af data.

• Søjlediagram med labels chart

  Brug plugin'et 'chartjs-plugin-datalabels' til at vise labels i graferne

• Søjlediagram med speciel tooltip chart

  Det er muligt at styre hvordan tooltip på søjlerne skal se ud