This graph shows inbound and outbound network traffic for an interface. The data is passed into Home Assistant for both. Is there a graph card that I can use to create something like this?
May be apexcharts card?
Just a speculation.
Also, it is possible to create this with mini-graph-card + card-mod.
I tried with apex charts card, but I don’t think I’m going about it correctly. This is my code:
type: custom:apexcharts-card
graph_span: 2h
header:
show: true
title: ApexCharts-Card
show_states: true
colorize_states: true
series:
- entity: sensor.truenas_system_bond02_rx
- entity: sensor.truenas_system_bond02_tx
transform: return x * -1;
But that produces negative values below the x axis, like this:
That’s not what I’m after…
can you help get me pointed in the correct direction with mini-graph-card and card-mod?
You need to find the main cardmod thread - 1st post - fantastic link - mini-graph-card - one of links will be what you need
Did you try a labels formatter, something like this:
yaxis:
- show: true
decimalsInFloat: 0
labels:
formatter: |
EVAL: (val) => Math.abs(val)
Not helpful.
You need a ready code? No one is obliged to do that. Be grateful for a link to a solution. It is not a big deal to find the main cardmod thread. And believe me , posting answers like yours “not helpful” will not give you a respect.
2 Likes
Here is a link to main cardmod thread - 🔹 Card-mod - Add css styles to any lovelace card.
It is not difficult to find it, most popular custom plugins have dedicated threads in “share your projects”. And I am not giving an exact link to a particular solution - instead I am giving a link to a LIST of solutions (more helpful for users); besides, I mostly do not have an access to PC and usually posting from a mobile where it is not possible to easily navigate and post links then.
No, I don’t need code. But I also don’t need an answer that amounts to “go search for it.”
You’re rude, and condescending, and represent everything that is wrong with this forum.
1 Like
I also was on my mobile yesterday, here an improved and verified code for you to just copy/paste
apex_config:
yaxis:
labels:
formatter: |
EVAL: (val) => Math.abs(val)
I’m also still strugling with all these options of the powerfull card, but there are not many things that can’t be solved with it.
So, you are not asking a ready code, and do not accept advices where exactly it can be found, and reacting with “not helpful”, and then telling a person “you are rude”.
Go find another forum or better another Earth.
1 Like
That’s awesome, thank you. Got me a bit closer! This code:
type: custom:apexcharts-card
graph_span: 2h
header:
show: true
title: Network (bond02)
show_states: true
colorize_states: true
apex_config:
yaxis:
labels:
formatter: |
EVAL: (val) => Math.abs(val)
tooltip:
"y":
formatter: |
EVAL: (val) => Math.abs(val)
series:
- name: Receive
entity: sensor.truenas_system_bond02_rx
- name: Send
entity: sensor.truenas_system_bond02_tx
transform: return -x;
Now produces this:
But I think I can sort out the negative display thing on the states. I’ll update shortly with the code so it can actually help other people, instead of “go search for it” like that other guy.
You really did not get the point and keep expressing it stubbornly. I directed you to tutorial which is known for many people. The tutorial which accumulates many examples. And your post will only be found when someone either is given an exact link to your post OR finds your post out of hundreds of search results. It is good that you are sharing your solution - but it is stupid that you are saying “it will help better than that unhelpful answers from that guy”
I am done here). .
To get started adding and editing cards for charts, or customising the existing ones, I read that you go to your user image bottom left, and select to enable “Advanced Mode”, and that after a reboot it ought to be showing some locations in the add-on File editor where charts and stuff will need to go. I’m not seeing my config/www directory so I created an empty one, logged out, logged in, nothing happening yet.
“Note: If you do not see the Resources Tab, you will need to
enable Advanced Mode in your User Profile
Using YAML: Add following code to lovelace section”
I’m not seeing anything called “Resources” or “lovelace”. What is needed next?
So, the fix for the text display of the negative values was a LITTLE more involved than I had thought… There might have been an easier way to do this, but this works, so I’m happy enough.
type: custom:stack-in-card
mode: vertical
cards:
- type: custom:button-card
show_icon: false
show_name: true
name: Network (bond02)
styles:
card:
- box-shadow: none
- border: none
- padding: 6px 12px 6px 12px
name:
- font-size: 16px
- font-weight: 600
grid:
- grid-template-areas: "\"n n\" \"rx tx\""
- row-gap: 4px
custom_fields:
rx:
- justify-self: start
- font-size: 18px
tx:
- justify-self: start
- font-size: 18px
custom_fields:
rx: >-
[[[ const s = states["sensor.truenas_system_bond02_rx"]; const v = (s &&
s.state !== "unknown" && s.state !== "unavailable") ? Number(s.state) :
0; return `Receive: <span
style="color:#0095D5;font-weight:600;">${v.toFixed(2)} Mbit/s</span>`;
]]]
tx: >-
[[[ const s = states["sensor.truenas_system_bond02_tx"]; const v = (s &&
s.state !== "unknown" && s.state !== "unavailable") ? Number(s.state) :
0; return `Send: <span
style="color:#E68D37;font-weight:600;">${v.toFixed(2)} Mbit/s</span>`;
]]]
- type: custom:apexcharts-card
graph_span: 2h
header:
show: false
card_mod:
style: |
ha-card {
box-shadow: none;
border: none;
padding: 0 6px 10px 6px;
margin-top: -6px;
}
apex_config:
stroke:
width: 3
yaxis:
labels:
formatter: |
EVAL: (val) => Math.abs(val)
tooltip:
"y":
formatter: |
EVAL: (val) => Math.abs(val)
legend:
show: false
series:
- name: Receive
entity: sensor.truenas_system_bond02_rx
color: "#0095D5"
- name: Send
entity: sensor.truenas_system_bond02_tx
color: "#E68D37"
transform: return -x;
Produces this card:
Thank you so much for the assist!!
looks nice.
I could also manage to remove the seconds from the x-axis.
apex_config:
stroke:
width: 3
xaxis:
labels:
datetimeFormatter:
hour: 'HH:mm'
minute: 'HH:mm'
Did you ever had a look at the new Ring-Tile-Card?
1 Like
Oh my goodness, the amount of work you’ve just created for me… Lol!
Looks awesome, I’ve a ready thought of many places I’d like to use that. They have several examples that look better than what I’ve got as well, like wind-rose-card…
Too many projects right now, but I’ve added that to my list. Thank you!!!