Hi, discovered this great Plotly extension, and created this power-energy history-graph using some example-code from some examples.
I added a function to add the the ‘live’ state info of the entity to this graph. As you can see when using this, the last column is continuously growing. (No energy-export here, due to sun-set 
)
type: custom:plotly-graph
title: Plotly
hours_to_show: current_week
time_offset: 8h
stack: false
defaults:
entity:
unit_of_measurement: kWh
texttemplate: '%{y}'
type: bar
statistic: state
period:
0s: 5minute
2h: hour
6d: day
360d: month
entities:
- entity: sensor.p1_meter_totale_energie_import
filters:
- delta
- fn: |
({xs,ys,hass,statistics}) => {
let statLast = statistics.length-1;
let lastStatisticsDateTime = new Date(statistics[statLast].end);
let lastStateDateTime = new Date(hass.states["sensor.p1_meter_totale_energie_import"].last_changed);
let stateLastStatic = statistics[statLast].state;
let stateLastState = hass.states["sensor.p1_meter_totale_energie_import"].state
let state = stateLastState-stateLastStatic;
if (state>0){
if (lastStateDateTime.getTime()>lastStatisticsDateTime.getTime()){
xs.push(lastStatisticsDateTime);
ys.push(state);
}else{
ys[statLast]+=state;
}
//debugger
}
return ({ xs,ys })
}
- store_var: import
- fn: console.log
- fn: |
({hass}) => {
console.log(hass.states["sensor.p1_meter_totale_energie_export"])
}
- entity: sensor.p1_meter_totale_energie_export
filters:
- delta
- fn: |
({xs,ys,hass,statistics}) => {
let statLast = statistics.length-1;
let lastStatisticsDateTime = new Date(statistics[statLast].end);
let lastStateDateTime = new Date(hass.states["sensor.p1_meter_totale_energie_export"].last_changed);
let stateLastStatic = statistics[statLast].state;
let stateLastState = hass.states["sensor.p1_meter_totale_energie_export"].state
let state = stateLastState-stateLastStatic;
if (state>0){
if (lastStateDateTime.getTime()>lastStatisticsDateTime.getTime()){
xs.push(lastStatisticsDateTime);
ys.push(state);
}else{
ys[statLast]+=state;
}
//debugger
}
return ({ xs,ys })
}
- store_var: export
- fn: console.log
- fn: |
({hass}) => {
console.log(hass.states["sensor.p1_meter_totale_energie_export"])
}
refresh_interval: auto
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:
barcornerradius: 15
bargap: 0.1
bargroupgap: 0.1
height: 50%
xaxis:
tickangle: -45
updatemenus:
- buttons:
- $fn({vars}) => vars.scroll( '<', -.5)
- $fn({vars}) => vars.scroll( '>', .5)
direction: right
active: -1
pad:
r: 10
t: 0
type: buttons
x: -0.1
xanchor: left
'y': -0.2
yanchor: top
- buttons:
- $fn({vars}) => vars.zoom( '1y', 24*366)
- $fn({vars}) => vars.zoom( '1m', 24*31)
- $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: 100
t: 0
type: buttons
x: 0.1
xanchor: left
'y': -0.2
yanchor: top
So far so good.
Now I have two questions, maybe some one can help, as I do not find a solution to the questions:
-
As you can see I copied the code for the ‘live’ data for the last bar (the fn: code within the entity sections), and changed to entity-name in the hass.states[ ]. I did so, because I need the name of the entity to get the current state of the entity. My question here is:
Is this name accessible as a variable, so I can make this one central code?
-
See these two graphs, both showing the same page.
The upper one is opened at 18:52 hours, and the lower one is opened at 18:56 hours.
As you can see the upper one is continuing to increase in the 18:50 column, while the lower one has a new 18:55 column and is increased there.
I assume that the statistics are not updated while viewing the page. Is there a option to update the statistics within the view-time of this page?
Thanks
