How to make a network monitoring card


I have sensors upload/download. How create similar card?
Image taken from here Netdata - Home Assistant

Here is my network monitopring dashboard, that has charts simililar to what you want to achieve:

And here is the code for just the chart part of monitor card:

            - type: custom:apexcharts-card
              update_interval: 5s
              graph_span: 5m
              show:
                loading: false
              apex_config:
                chart:
                  height: 250px
                grid:
                  show: true
                  strokeDashArray: 0
                  borderColor: '#444444'
                  position: back
                  xaxis:
                    lines:
                      show: true
                  yaxis:
                    lines:
                      show: true
                yaxis:
                  forceNiceScale: true
                xaxis:
                  type: datetime
                  axisTicks:
                    show: true
                  tickAmount: 6
                  labels:
                    format: HH:mm
                  lines:
                    show: true
                fill:
                  type: gradient
                  gradient:
                    type: vertical
                    shade: dark
                    stops:
                      - 0
                      - 90
                    opacityFrom:
                      - 1
                      - 0.2
                    opacityTo:
                      - 0.2
                      - 1
              series:
                - entity: sensor.internet_speed_in1
                  color: var(--green1)
                  name: IN
                - entity: sensor.internet_speed_out1
                  color: var(--green4)
                  name: OUT
                  invert: true
                - entity: input_number.zero_value
                  color: var(--green4)
                  name: ' '
              all_series_config:
                stroke_width: 1
                type: area

Hope this helps to start…

2 Likes

This is a cool option ).
Sad that “mini-graph-card” does not have it & users have to use card-mod to achieve same.

Hi @mirekmal,

The information of the access point shown just above the Wifi throughput, is that a custom card or did you use cardmod?

All the cards are standard available cards (text-diver, markdown, apex chart) just put together into vertical stack. Here is full card code for one device:

type: custom:vertical-stack-in-card
cards:
  - type: custom:text-divider-row
    text: AP-GROUND
  - type: markdown
    content: >
      <ha-icon icon="mdi:information-variant"></ha-icon> Mesh Node: {{
      states('sensor.draytek_ap_g_model') }}

      <ha-icon icon="mdi:alert-outline"></ha-icon> FW Ver: {{
      states('sensor.draytek_ap_g_firmware') }}                  

      <ha-icon icon="mdi:clock-check-outline"></ha-icon> Uptime: {{
      states('sensor.draytek_ap_g_uptime') }}
  - type: custom:text-divider-row
    text: WI-FI Throughput
  - type: custom:apexcharts-card
    update_interval: 5s
    graph_span: 5m
    show:
      loading: false
    apex_config:
      chart:
        height: 250px
      grid:
        show: true
        strokeDashArray: 0
        borderColor: '#444444'
        position: back
        xaxis:
          lines:
            show: true
        yaxis:
          lines:
            show: true
      yaxis:
        forceNiceScale: true
      xaxis:
        type: datetime
        axisTicks:
          show: true
        tickAmount: 6
        labels:
          format: HH:mm
        lines:
          show: true
      fill:
        type: gradient
        gradient:
          type: vertical
          shade: dark
          stops:
            - 0
            - 90
          opacityFrom:
            - 1
            - 0.2
          opacityTo:
            - 0.2
            - 1
    series:
      - entity: sensor.lan_speed_ap_g_in
        color: var(--pink1)
        name: IN
      - entity: sensor.lan_speed_ap_g_out
        color: var(--pink3)
        name: OUT
        invert: true
      - entity: input_number.zero_value
        color: var(--pink3)
        name: ' '
    all_series_config:
      stroke_width: 1.5
      type: area

Tricky part are actual throughput sensors and device info - for all om my devices I use SNPM monitoring to get this data.

1 Like

Thanks, this looks great!

I did not find some properties in the documentation, for example “xaxis”… when they are deleted, at first glance nothing changes…

type: custom:apexcharts-card
update_interval: 5s
header:
  show: true
  title: Synology Network
graph_span: 6h
show:
  loading: false
apex_config:
  chart:
    height: 250px
  grid:
    show: true
    strokeDashArray: 0
    borderColor: '#444444'
    position: back
    xaxis:
      lines:
        show: true
    yaxis:
      lines:
        show: true
  yaxis:
    forceNiceScale: true
series:
  - entity: sensor.synologynas_download_throughput
    color: '426F2A'
    name: Download
  - entity: sensor.synologynas_upload_throughput
    color: '892937'
    name: Upload
    invert: true
all_series_config:
  stroke_width: 2
  type: area

apexchart-card implements full apex graphics library that is very extensive. Not everything is documented in card documentation. For more advanced functions you can refer to official apex documentation, where you can find tons of additional settings. In particular option you refers to is causing vertical lines (for xaxis) to be shown, but true is also default value. If you change this to false you will see the difference. So it here probably as remnant from the time I created this chart and was playinf with different settings.