HA Jule-tip #23: Avancerede grafer med ApexCharts

Anders 23. december 20229. januar 2023 1 Comment

I gårdagens jule-tip viste jeg, hvordan du kan bruge History Explorer card til at lave grafer over historikken af dine HA data.

I dag handler det om en anden måde til at lave avancerede grafer i dine dashboards. Nemlig ved at bruge ApexCharts.

ApexCharts er et af mine yndlingskort, som jeg bruger en del i mine dashboards. Eksempelvis til visning af temperaturer, system status, elpriser, strømforbrug og historik for opladning af elbiler.

Du har i ApexCharts næsten ubegrænsede muligheder for at tilpasse grafernes indhold og udseende. Du kan bruge det til at oprette en række forskellige typer af grafer:

Eksempler på forskellige typer af grafer lavet med ApexCharts

Sådan gør du

Du skal starte med at installere ApexCharts frontend udvidelsen fra HACS. Du kan finde en detaljeret guide til installationen af ApexCharts her.

Når ApexCharts komponenten er installeret, er du klar til at tilføje avancerede grafer til til dit dashboard. Dette kræver dog, at du tilføjer grafen ved brug af YAML kode, da ApexCharts desværre ikke understøtter brug af GUI.

Jeg har lavet tre forskellige eksempler på grafer, som illustrerer brugen af ApexChart og de mere avancerede funktioner.

Eksempel 1

I dette eksempel laves en graf med det aktuelle forbrug af CPU, hukommelse og diskplads på min HA server:

Denne kode er brugt til at lave grafen:

type: custom:apexcharts-card
chart_type: radialBar
apex_config:
  chart:
    height: 300px
header:
  show: true
  title: Home Assistant System Status
  show_states: true
  standard_format: true
  colorize_states: true
series:
  - entity: sensor.processor_use
    name: CPU
  - entity: sensor.memory_use_percent
    name: Hukommelse
    color: orange
  - entity: sensor.disk_use_percent_home
    name: Disk

Som det fremgår af kode, skal du starte med at angive en chart_type, som kan være enten line, scatter, pie, donut eller radialBar. Sidstnævnte er brugt i ovenstående eksempel.

Under apex_config kan du lave avancerede tilpasninger af stort set alle elementer i grafer. I dette eksempel har vi bare angivet størrelsen på grafen. I de næste eksempler laver vi flere tilpasninger af forskellige dele af grafen.

Under header angives overskrift på grafen samt hvordan om værdier skal vises i toppen af grafen.

Under series tilføjes de sensorer, som skal indeholdes i grafen. I eksemplet er der brugt tre sensorer, hvor navn og evt. farven i grafen er tilpasset.

Eksempel 2

Dette er et mere avanceret eksempel, der viser de mange muligheder for at tilpasse graferne:

Eksempel på avanceret brug af ApexCharts

I dette eksempel er der lavet flere tilpasninger:

Grafen bruger long term statistics data, der summeres pr. måned
Søjler er farvet efter værdi
Værdi er tilføjet i toppen af hver søjle
Søljer er afrundet i toppen
Værdier på x-aksen er roteret 33 grader
Værdier på x-aksen er formateret med danske forkortede månedsnavne
Danske månedsnavne er også brugt i menuen, der kommer frem, når musen bevæges over én af søljerne
Der er tilføjet mulighed for zoome ind og ud i grafen

Denne kode er brugt til at lave grafen:

type: custom:apexcharts-card
apex_config:
  chart:
    height: 300px
    zoom:
      enabled: true
    toolbar:
      show: true
      tools:
        zoom: false
        zoomin: true
        zoomout: true
        pan: false
        reset: false
        download: false
    defaultLocale: da
    locales:
      - name: da
        options:
          months:
            - Januar
            - Februar
            - Marts
            - April
            - Maj
            - Juni
            - Juli
            - August
            - September
            - Oktober
            - November
            - December
          shortMonths:
            - JAN
            - FEB
            - MAR
            - APR
            - MAJ
            - JUN
            - JUL
            - AUG
            - SEP
            - OKT
            - NOV
            - DEC
  xaxis:
    labels:
      show: true
      format: MMM 'yy
      tickAmount: 12
      rotate: '-33'
      rotateAlways: true
      style:
        fontSize: 12px
        fontWeight: 600
  tooltip:
    x:
      format: MMMM yyyy
  dataLabels:
    enabled: true
    style:
      colors:
        - '#fff'
      fontSize: 9px
    distributed: false
    background:
      enabled: false
  plotOptions:
    bar:
      borderRadius: 10
      columnWidth: 75%
      dataLabels:
        position: top
header:
  show: true
  title: Opladning af elbiler
  show_states: false
  standard_format: true
graph_span: 1y
span:
  start: year
experimental:
  color_threshold: true
series:
  - entity: sensor.ehmawz7t_lifetime_energy
    type: column
    name: Opladt kWh
    float_precision: 0
    extend_to: now
    show:
      datalabels: true
      legend_value: false
    statistics:
      type: sum
      period: day
      align: start
    group_by:
      func: diff
      duration: 1month
      start_with_last: true
    color_threshold:
      - value: 0
        color: green
      - value: 250
        color: orange
      - value: 300
        color: red
      - value: 400
        color: darkred

Eksempel 3

Dette er endnu et eksempel på avanceret brug af ApexCharts:

I dette eksempel er der lavet flere tilpasninger:

Grafen bruger long term statistics data, der summeres pr. time
Grafen indeholder 4 sensorer, men kun 2 vises i selve grafen
Grafen indeholder to forskellige y-akser til hhv. indendørs og udendørs temperaturer
Y-akser indeholder titel og er formateret med farver
Grafen indeholder data for 1 måned, men viser kun én uge ad gangen
Der er mulighed for at vælge en længere eller kortere periode i mini-grafen (brush)
Der er tilføjet mulighed for zoome ind og ud i grafen samt eksportere data

Denne kode er brugt til at lave grafen:

type: custom:apexcharts-card
experimental:
  brush: true
brush:
  selection_span: 1week
apex_config:
  dataLabels:
    enabled: true
    offsetY: -12
    distributed: true
  chart:
    height: 350px
    zoom:
      enabled: true
    toolbar:
      show: true
      tools:
        zoom: false
        zoomin: true
        zoomout: true
        pan: false
        reset: false
        download: true
  grid:
    show: true
    borderColor: '#78909C'
  xaxis:
    labels:
      show: true
      format: dd/MM
      tickAmount: 12
    axisBorder:
      show: true
      color: '#78909C'
    axisTicks:
      show: true
      color: '#78909C'
header:
  title: Temperaturer
  show: true
  show_states: true
  colorize_states: true
  standard_format: true
graph_span: 1month
yaxis:
  - id: ude
    decimals: 1
    apex_config:
      tickAmount: 5
      title:
        text: Udendørstemperatur i °C
        rotate: '-90'
      axisBorder:
        show: true
        color: '#78909C'
  - id: inde
    min: 0
    max: 30
    decimals: 1
    opposite: true
    apex_config:
      tickAmount: 5
      title:
        text: Indendørstemperatur i °C
        rotate: '-90'
      axisBorder:
        show: true
        color: '#78909C'
span:
  end: hour
series:
  - entity: sensor.netatmo_weather_home_ude_temperature
    name: Ude
    yaxis_id: ude
    float_precision: 2
    stroke_width: 2
    color: orange
    show:
      in_brush: true
    statistics:
      type: max
      period: hour
      align: start
  - entity: sensor.ude_min_temp
    name: Dagens min
    color: red
    yaxis_id: ude
    show:
      in_chart: false
      in_header: true
  - entity: sensor.ude_max_temp
    name: Dagens max
    color: green
    yaxis_id: ude
    show:
      in_chart: false
      in_header: true
  - entity: sensor.netatmo_weather_home_inde_temperature
    name: Inde
    yaxis_id: inde
    float_precision: 2
    stroke_width: 2
    statistics:
      type: max
      period: hour
      align: start

Flere eksempler?

Ovenstående viser en lille del af alle de muligheder, som ApexCharts giver for at lave avancerede grafer. For flere eksempler, kan du se dette indlæg hos SmartHomeScene. Du kan også finde eksempler på den officielle dokumentation for ApexCharts.js.