Description
Discussed in #314
Using the following versions:
lovelace-plotly-graph-card: 3.3.3
Home Assistant: 2023.9.3
Originally posted by mwolter805 September 29, 2023
Hello,
Great integration, thanks for your work on this! I've used plotly in the past and was excited to see it available for home assistant.
I'm attempting to create a bar chart for energy usage of several circuits in my house. I think I've cobbled it together well enough that it displays the info, however, there are several gaps in the data scrolling.
I've searched through the discussions and haven't found anything related to this. It appears the first period for the chart is lost and when scrolling it is never obtained. I've seen reference in other discussions regarding HA not data for the first period. Is there a way to fill the gaps filled?
Thanks again for all your work on this.
In the animation below, I scroll to an earlier time period, then click the 1 day button and the chart is missing bars for 7am, 4am and 1am
However, if I were to click the button for 1d directly, this data for 4am and 1am appears. Still missing 7am though.
type: custom:plotly-graph
hours_to_show: 6h
entities:
- entity: sensor.emporia_vue_2_1_circuit_1_energy
visible: legendonly
- entity: sensor.emporia_vue_2_1_circuit_2_energy
- entity: sensor.emporia_vue_2_1_circuit_3_energy
- entity: sensor.emporia_vue_2_1_circuit_4_energy
- entity: sensor.emporia_vue_2_1_circuit_5_energy
- entity: sensor.emporia_vue_2_1_circuit_6_energy
- entity: sensor.emporia_vue_2_1_circuit_7_energy
- entity: sensor.emporia_vue_2_1_circuit_8_energy
- entity: sensor.emporia_vue_2_1_circuit_9_energy
- entity: sensor.emporia_vue_2_1_circuit_10_energy
- entity: sensor.emporia_vue_2_1_circuit_11_energy
visible: legendonly
- entity: sensor.emporia_vue_2_1_circuit_12_energy
- entity: sensor.emporia_vue_2_1_circuit_13_energy
- entity: sensor.emporia_vue_2_1_circuit_14_energy
visible: legendonly
fn: |
$fn({getFromConfig, vars})=> {
const range = getFromConfig("visible_range");
const width = range[1] - range[0];
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": [Date.now()-1000*60*60*h, Date.now()],
}
}
],
label,
method: "animate",
})
}
layout:
height: 400
barmode: group
xaxis:
autorange: true
updatemenus:
- buttons:
- $fn({vars}) => vars.scroll( '<', -.5)
- $fn({vars}) => vars.scroll( '>', .5)
direction: right
active: -1
pad:
r: 10
t: 10
type: buttons
x: 1
xanchor: right
'y': 1
yanchor: top
- buttons:
- $fn({vars}) => vars.zoom( '1y', 24*365)
- $fn({vars}) => vars.zoom( '1m', 24*30)
- $fn({vars}) => vars.zoom( '1w', 24*7)
- $fn({vars}) => vars.zoom( '1d', 24)
- $fn({vars}) => vars.zoom( '1h', 1)
direction: right
active: -1
pad:
r: 10
t: 10
type: buttons
x: 0
xanchor: left
'y': 1
yanchor: top
defaults:
entity:
statistic: state
filters:
- fn: |-
(params) => {
const ys = [];
ys.push(0);
for (let i = 1; i < params.statistics.length; i++){
if (params.statistics[i-1].state > params.statistics[i].state) {
ys.push(params.statistics[i].state);
} else {
ys.push(params.statistics[i].state-params.statistics[i-1].state);
}
};
return { ys };
}
- filter: i>0
type: bar
width: $fn () => 60*60*60*1
period:
6h: hour
7d: day
6M: month
yaxes:
fixedrange: true
autorange_after_scroll: true
config:
scrollZoom: false
doubleClickDelay: 600