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.