Whenever I first go to a specific dashboard (or whenever I force-reload that dashboard), my Apexcharts card won’t populate data.
I need to navigate to a different dashboard and back in order for the data to show up (see video):
This is 100% consistent.
It doesn’t work with navigation to a different view in the same dashboard, and it works 100% of he time if I navigate to ANY other dashboard and back. Also, 100% of the times I force-reload while on the page, the graph disappears again until after I change dashboard.
This is the lovelace card in question:
type: custom:tabbed-card
options: {}
tabs:
- label: Electricity prices
card:
type: custom:apexcharts-card
header:
show: true
title: Electricity Prices (Total)
show_states: false
graph_span: 2d
now:
show: true
color: red
span:
start: day
series:
- entity: sensor.electricity_price_total
name: Total
data_generator: |
return entity.attributes.total_today.map((entry) => {
return [new Date(entry.start), entry.value];
});
type: column
show:
legend_value: false
in_header: false
- entity: sensor.electricity_price_total
name: Total
data_generator: |
return entity.attributes.total_tomorrow.map((entry) => {
return [new Date(entry.start), entry.value];
});
type: column
show:
legend_value: false
in_header: false
- entity: sensor.nordpool_kwh_dk2_dkk_3_095_0
name: Raw
data_generator: |
return entity.attributes.raw_today.map((entry) => {
return [new Date(entry.start), entry.value];
});
type: column
show:
legend_value: false
in_header: false
- entity: sensor.nordpool_kwh_dk2_dkk_3_095_0
name: Raw
data_generator: |
return entity.attributes.raw_tomorrow.map((entry) => {
return [new Date(entry.start), entry.value];
});
type: column
show:
legend_value: false
in_header: false
yaxis:
- min: 0
attributes:
icon: mdi:currency-eur
show_name: false
show_icon: true
show_state: false
- label: Electricity use
card:
type: custom:sankey-chart
show_names: true
sections:
- entities:
- entity_id: sensor.home_power_consumption
name: Total
children:
- sensor.dishwasher_power_consumption_w
- sensor.dryer_power_w
- sensor.openevse_current_power_usage
- sensor.basement_media_power_electric_consumption_w
- sensor.office_electric_consumption_w
- sensor.shed_power_electric_consumption_w
- sensor.wemo_outdoor_current_power
- sensor.all_lights_power_w
- sensor.all_speakers_power_w
- sensor.all_switches_power_w
- sensor.server_power_w
- entities:
- sensor.dishwasher_power_consumption_w
- sensor.dryer_power_w
- sensor.openevse_current_power_usage
- sensor.basement_media_power_electric_consumption_w
- sensor.office_electric_consumption_w
- sensor.shed_power_electric_consumption_w
- sensor.wemo_outdoor_current_power
- sensor.all_lights_power_w
- sensor.all_speakers_power_w
- sensor.all_switches_power_w
- sensor.server_power_w
attributes:
icon: mdi:lightning-bolt
show_name: false
show_icon: true
show_state: false
- label: Electricity chart
card:
type: vertical-stack
cards:
- type: gauge
entity: sensor.home_power_consumption
min: 0
name: Current Electricity Usage
max: 5000
needle: true
severity:
green: 0
yellow: 750
red: 2500
- type: custom:config-template-card
variables:
- entity: sensor.openevse_current_power_usage
name: Car Charger
- entity: sensor.all_lights_power_w
name: Lights
- entity: sensor.all_speakers_power_w
name: Speakers
- entity: sensor.all_switches_power_w
name: Switches
- entity: sensor.basement_media_power_electric_consumption_w
name: Basement Media
- entity: sensor.office_electric_consumption_w
name: Office
- entity: sensor.shed_power_electric_consumption_w
name: Shed
- entity: sensor.dishwasher_power_consumption_w
name: Dishwasher
- entity: sensor.dryer_power_w
name: Dryer
- entity: sensor.espresso_electric_consumption_w
name: Espresso
- entity: sensor.wemo_outdoor_current_power
name: Chicken Coop
- entity: sensor.server_power_w
name: Server & Network
entities:
- sensor.openevse_current_power_usage
- sensor.all_lights_power_w
- sensor.all_speakers_power_w
- sensor.all_switches_power_w
- sensor.basement_media_power_electric_consumption_w
- sensor.office_electric_consumption_w
- sensor.dishwasher_power_consumption_w
- sensor.dryer_power_w
- sensor.espresso_electric_consumption_w
- sensor.shed_power_electric_consumption_w
- sensor.wemo_outdoor_current_power
- sensor.server_power_w
element:
type: custom:bar-card
entities: >-
${vars.filter(v => states[v.entity].state > 0).sort((v1,v2) =>
states[v2.entity].state-states[v1.entity].state)}
direction: right
entity_row: true
min: 0
max: ${ Math.max(...vars.map(v => states[v.entity].state))}
height: 20px
stack: vertical
decimal: 1
icon: mdi:flash
positions:
icon: 'off'
indicator: outside
name: inside
value: inside
severity:
- color: '#a1a1a18a'
from: 0
to: 2
- color: '#3ea8328a'
from: 2
to: 10
- color: '#85a8328a'
from: 10
to: 50
- color: '#a8a4328a'
from: 50
to: 200
- color: '#a887328a'
from: 200
to: 500
- color: '#a867328a'
from: 500
to: 1000
- color: '#a846328a'
from: 1000
to: 3000
- color: '#a832328a'
from: 3000
to: 10000
style: "states > * {\n margin: 1px;\n}\nbar-card-name,\nbar-card-value {\n font-size: 0.9rem;\n color: '#ffffffaa';\n font-weight: bold;\n}\nbar-card-value\t{\n font-weight: bolder;\n}\nbar-card-indicator {\n margin-top: 4px;\n transform: scaleY(-1);\n}"
attributes:
icon: mdi:gauge-low
show_name: false
show_icon: true
show_state: false
In this video, I:
- Load the dashboard (no graph)
- Navigate to the Energy dahsbaord and back again (graph appears)
- Force reload (no graph)
- Navigate to a different dashboard and back (graph appears again)
