Split energy consumption by periods and present them on a dashboard

[exogadget]

Guys, please help me, I’m confused.

I have idea to compare the energy consumption at the specific time periods, every day during a month. Sorry if it’s not a new idea, but I didn’t find related topics!
I see it similar to this presentation:

where every part of bars is a sensor’s data.
But I don’t have idea how to do it. I don’t know which card to choose to show it on the dashboard, I tried ApexCharts-Card, but couldn’t get it to work,

Maybe a table form will be better, but what table form card to use?

The code is here:

type: custom:apexcharts-card
graph_span: 31d
stacked: true
color_list:
- "#00f0f0"
- "#00c0c0"
- "#00a0a0"
- "#008080"
- "#006060"
- "#003f3f"
now:
show: true
label: Now
color: var(--secondary-color)
header:
show: true
title: ApexCharts-Card
show_states: true
colorize_states: true
all_series_config:
type: column
stack_group: energy_time_mark
series:
- entity: sensor.energy_at_01_time
name: Wakeup Time
- entity: sensor.energy_at_02_time
name: Work Time Start
- entity: sensor.energy_at_06_time
name: Time 06
- entity: sensor.energy_at_03_time
name: Work Time Stop
- entity: sensor.energy_at_05_time
name: Dark Time
- entity: sensor.energy_at_04_time
name: Bed Time

To get this data I’ve created a package with definitions:

    input_datetime:
      time_01:
        name: Time 01
        has_time: &only_time true
    
      time_02:
        name: Time 02
        has_time: *only_time
.....
      time_06:
        name: Time 06
        has_time: *only_time

and input_number & sensor:

    input_number:
        energy_at_time_01:
            name: Energy at Time 01
            min: &energy_min 0
            max: &energy_max 99999.99
            step: &energy-step 1
            mode: &energy_mode box
            unit_of_measurement: &energy_unit kWh
            icon: &energy_icon mdi:meter-electric
        energy_at_time_02:
            name: Energy at Time 02
            min: *energy_min
            max: *energy_max
            step: *energy-step
            mode: *energy_mode
            unit_of_measurement: *energy_unit
            icon: *energy_icon
........

    template:
      - sensor:
          - name: energy_at_01_time
            unique_id: 90afb412-d2f6-565d-a8e3-1944fb23eba4
            unit_of_measurement: "kWh"
            state: >
                {% if states('input_number.energy_at_time_01') not in ['unknown', 'unavailable'] %}
                    {{ states('input_number.energy_at_time_01') | float(0) }}
                {% else %}
                    0
                {% endif %}          
            device_class: &energy_class energy
            state_class: &energy_state measurement

          - name: energy_at_02_time
            unique_id: 5d3b18ec-4fca-513a-b6f3-3d2edd137339
            unit_of_measurement: "kWh"
            state: >
                {% if states('input_number.energy_at_time_02') not in ['unknown', 'unavailable'] %}
                    {{ states('input_number.energy_at_time_02') | float(0) }}
                {% else %}
                    0
                {% endif %}          
            device_class: *energy_class
            state_class: *energy_state
..........
Also there are the automations to set the energy data, example is below:

      - id: a0342cd6
        alias: Set Energy at Time 01
        description: ""
        triggers:
          - trigger: time
            at: input_datetime.time_01
        conditions: []
        actions:
          - action: input_number.set_value
            metadata: {}
            data:
              value: "{{ states('sensor.daily_energy') | float }}"
            target:
              entity_id: input_number.energy_at_time_01
........

[JohnFLoki]

Can you please make an better example? I am not sure what you are trying to achive.
You already have the

@exogadget

every part of bars is a sensor’s data

and the

@exogadget

energy consumption at the specific time periods, every day during a month

When you want a table you can export the view on the three dots and download data.

[exogadget]

Sorry for confusing, Sir.

The main idea was to collect data at the specific moments of day and present it as stacked bars on a bar card similar to this:

I tried ApexCharts Card without success and, I’m sure that I made error/s on this step, but I couldn’t figure out where and what exactly:

The code:

type: custom:apexcharts-card
graph_span: 31d
stacked: true
color_list:
  - "#00f0f0"
  - "#00c0c0"
  - "#00a0a0"
  - "#008080"
  - "#006060"
  - "#003f3f"
now:
  show: true
  label: Now
  color: var(--secondary-color)
header:
  show: true
  title: ApexCharts-Card
  show_states: true
  colorize_states: true
all_series_config:
  type: column
  stack_group: energy_time_mark
series:
  - entity: sensor.energy_at_01_time
    name: Wakeup Time
  - entity: sensor.energy_at_02_time
    name: Work Time Start
  - entity: sensor.energy_at_06_time
    name: Time 06
  - entity: sensor.energy_at_03_time
    name: Work Time Stop
  - entity: sensor.energy_at_05_time
    name: Dark Time
  - entity: sensor.energy_at_04_time
    name: Bed Time

All sensors are working properly, example:

[JohnFLoki]

So you want the energy individual device graph for a other type of sensor?

[exogadget]

Not sure that clearly understood your question, but seems no, I don’t need the “graph for a other type of sensor”.
I want to see a chart with stacked bars which represents values of a set of sensors (energy1…6) for every day during the week or month for example.

Example - we have an array:
date time value
1/12 6:00 2.2
1/12 13:00 3.2
1/12 17:00 3.5
…
31/12 6:00 1.3
31/12 13:00 2.5
31/12 17:00 5.5

How to present it on a dashboard in clear and understandable, and convenient for comparison, way? I see it like a chart:

[JohnFLoki]

Do you want the graph from your first screenshot to be embedded in your dashboard?
Then you can use these.