Hi,
taking inspiration from this topic and various models online, I have created two charts that āshouldā show me the thermostatās operating time.
Unfortunately, they donāt work as I would like.
The first chart should display the current monthās days from 1 to 31, with a bar for each day. I want to be able to move forward and backward through the month using the arrows on top. Initially, it seems to work, but when I start moving the cursor, it no longer functions correctly, and the months are displayed all wrong. Each time I click, the starting day changes.
The second chart should display the months of the year from January to December, with a bar for each month. This one also seems to work, but then, when I move with the sliders, it shifts by two years at a time and then behaves randomly.
Here is the code for both charts if anyone would like to help me.
Alternatively, if anyone has a working code for what Iām trying to achieve, that would be great.
Ideally, to be honest, Iād like to have a page similar to the energy monitoring page, but I havenāt found anything like that.
type: custom:plotly-graph
title: Accensione Giornaliera
entities:
- entity: sensor.time_on_termostato_soggiorno_g
name: Accensione Giornaliera
statistic: state
period: day
type: bar
texttemplate: '%{y}'
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/60;
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:
plot_bgcolor: black
height: 400
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
yaxis:
fixedrange: true
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
type: custom:plotly-graph
title: Accensione Mensile
entities:
- entity: sensor.time_on_termostato_soggiorno_m
statistic: state
period: month
type: bar
texttemplate: '%{y}'
hours_to_show: current_year
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/60;
let start = new Date((range[0] + range[1])/2.0);
start.setHours(0, 0, 0, 0);
if (h >= 24*7) start.setFullYear(start.getFullYear(), start.getMonth(), start.getDate()-start.getDay());
if (h >= 24*30) start.setDate(1);
if (h >= 24*365) start.setMonth(-1);
return [start.getTime(), start.getTime() + 1100*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:
plot_bgcolor: black
height: 400
margin:
r: 10
l: 40
b: 70
t: 40
xaxis:
range: $fn({vars}) => vars.xrange(null)
tickangle: -45
nticks: 14
fixedrange: true
yaxis:
fixedrange: true
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
thanks
at the moment is
Thank you for all the hard work.
