Nice card!
I’m in the process of migrating my apexcharts cards to plotly and spent too much time on one issue. How do I apply smoothing filters and use show_value at the same time? The show_value always gets distorted by the filters and I would really like it to show the actual current value of the sensor.
Thanks in advance!
You could readd the real last known point at the end:
filters:
- fn: ({ys, vars}) => vars.last = ys.at(-1)
- ...smoothing...
- fn: ({xs,ys,vars}) => ({xs: [...xs, Date.now()], ys: [...ys, vars.last]})
Otherwise you can have the entity twice but only use the last point of the second one and then group them
1 Like
hi, I’m experiencing a strange behavior with the scrolling buttons.
I have this chart that shows the daily values of how long the boiler was on, month by month.
Initially, the values are displayed correctly, but when I scroll to the previous month using the scroll button, I see very thin bars.
However, if I keep going back to the beginning of the data, the chart goes back to normal, and if I then scroll forward through the months, I can see all the values properly.
type: custom:plotly-graph
title: Giornaliero
entities:
- entity: sensor.time_on_caldaia_g
name: Accensione Giornaliera Caldaia
statistic: state
period: day
type: bar
texttemplate: "%{y:.2f}"
textfont:
color: white
marker:
color: rgba(66,105,208,0.7)
hours_to_show: current_month
fn: |
$fn({getFromConfig, vars}) => {
const range = getFromConfig("visible_range");
const width = range[1] - range[0];
vars.xrange = (h) => {
if (h === null) h = (width)/1000/60/59;
let start = new Date((range[0] + range[1])/2.0);
start.setHours(12, 0, 0, 0);
if (h >= 24*7) start.setFullYear(start.getFullYear(), start.getMonth(), start.getDate()-start.getDay());
if (h >= 24*30) start.setDate(0);
if (h >= 24*365) start.setMonth(0);
return [start.getTime(), start.getTime() + 1000*60*60*h];
}
vars.scroll = (label, p) => ({
args: [
{
layout: {
"xaxis.range": [range[0] + width*p, range[1] + width*p],
}
}, {
transition: {
duration: 150,
}
}
],
label,
method: "animate",
})
vars.zoom = (label, h) => ({
args: [
{
layout: {
"xaxis.range": vars.xrange(h),
}
}
],
label,
method: "animate",
})
}
layout:
barcornerradius: 30%
plot_bgcolor: black
height: 390
margin:
r: 10
l: 40
b: 70
t: 40
xaxis:
range: $fn({vars}) => vars.xrange(null)
tickangle: -45
tickformat: "%d %b"
nticks: 20
fixedrange: true
gridcolor: rgba(238,235,235,0.3)
yaxis:
fixedrange: true
gridcolor: rgba(238,235,235,0.3)
updatemenus:
- buttons:
- $fn({vars}) => vars.scroll( '<', -1.0)
- $fn({vars}) => vars.scroll( '>', 1.0)
direction: right
active: -1
pad:
t: -40
r: 1
type: buttons
xanchor: right
x: 1
can someone help me?
thanks
Try with:
filters:
- filter: i>0
The issue is that home assistant “invents” a data point at the beginning of the requested intervl, and plotlyjs sees that the distance between the first and following data points is very short so it makes skinny bars
1 Like
Try with
time_offset: -1m
Bar charts are as you see a bit quirky because of these details.
Instead of filtering and offsetting, you could also use the resample filter which would force the data points to be evenly spaced
2 Likes
It works with
time_offset: 1m
Hi.
I am wanting to make that same graph, but I have solar panels, so the hourly energy can go up or down. I would like the bars to stay with the last value of each hour (it is what I pay or sell).
Would you know how I can change it? If I use “period: hour” as it is, it makes me the average, and “max” or “min” is not useful either because they are not the values I am looking for.
“statistic: state” doesn’t work for my (leaves the graph blank).
Thanks.