today and tomorrow in one graphic

[Tazzios]

My attempt to get today and tomorrow in one graphic. Unfortunately, the lines stops at the end of the day. Maybe someone else has an idea how to make it?

type: custom:apexcharts-card
header:
  show: true
  title: Today
  show_states: true
  colorize_states: true
now:
  show: true
graph_span: 2d
span:
  start: day 
yaxis:
  - id: power
    decimals: 0
    opposite: true
  - id: price
    decimals: 2
series:
  - entity: sensor.sessy_deem_power_schedule
    yaxis_id: power
    name: Power Schedule
    curve: stepline
    data_generator: |
      let hours = [];
      for(var i = 0; i < 48; i++){ hours.push(i); }
      let date = new Date().getTime() ;
      let dateindex = new Date(date).toISOString().split("T")[0];
      return hours.map((hour, index) => {
        let date = new Date(dateindex).setHours(hour,0,0);
        return [date, entity.attributes[dateindex][index]];
      });
  - entity: sensor.sessy_deem_energy_price
    yaxis_id: price
    name: Energy Price
    curve: stepline
    float_precision: 5
    data_generator: |
      let hours = [];
      for(var i = 0; i < 48; i++){ hours.push(i); }
      let date = new Date().getTime() ;
      let dateindex = new Date(date).toISOString().split("T")[0];
      return hours.map((hour, index) => {
        let date = new Date(dateindex).setHours(hour,0,0);
        return [date, entity.attributes[dateindex][index]];
      });

[Tazzios]

further attempt. some hacking and hidding with 4 datasources.

TODO:

• Space on the right
• 2 datasources instead of 4. Would solve a lot of limitations.

type: custom:apexcharts-card
header:
  show: true
  title: Sessy
  show_states: false
  colorize_states: true
now:
  show: true
graph_span: 2d
span:
  start: day
color_list:
  - orange
  - blue
  - orange
  - blue
apex_config:
  legend:
    show: false
yaxis:
  - id: power
    decimals: 0
    opposite: true
  - id: price
    decimals: 2
series:
  - entity: sensor.sessy_deem_power_schedule
    yaxis_id: power
    name: Power Schedule
    type: column
    curve: stepline
    data_generator: |
      let hours = [];
      for(var i = 0; i < 48; i++){ hours.push(i); }
      let date = new Date().getTime() ;
      let dateindex = new Date(date).toISOString().split("T")[0];
      return hours.map((hour, index) => {
        let date = new Date(dateindex).setHours(hour,0,0);
        return [date, entity.attributes[dateindex][index]];
      });
  - entity: sensor.sessy_deem_energy_price
    yaxis_id: price
    name: Energy Price
    curve: stepline
    float_precision: 5
    data_generator: |
      let hours = [];
      for(var i = 0; i < 48; i++){ hours.push(i); }
      let date = new Date().getTime() ;
      let dateindex = new Date(date).toISOString().split("T")[0];
      return hours.map((hour, index) => {
        let date = new Date(dateindex).setHours(hour,0,0);
        return [date, entity.attributes[dateindex][index]];
      });
  - entity: sensor.sessy_deem_power_schedule
    yaxis_id: power
    name: Power Schedule
    type: column
    curve: stepline
    data_generator: |
      let hours = [];
      for(var i = 0; i < 24; i++){ hours.push(i); }
      let date = new Date().getTime() + 86400000;
      let dateindex = new Date(date).toISOString().split("T")[0];
      return hours.map((hour, index) => {
        let date = new Date(dateindex).setHours(hour,0,0);
        return [date, entity.attributes[dateindex][index]];
      });
  - entity: sensor.sessy_deem_energy_price
    yaxis_id: price
    name: Energy Price
    curve: stepline
    float_precision: 5
    data_generator: |
      let hours = [];
      for(var i = 0; i < 24; i++){ hours.push(i); }
      let date = new Date().getTime() + 86400000;
      let dateindex = new Date(date).toISOString().split("T")[0];
      return hours.map((hour, index) => {
        let date = new Date(dateindex).setHours(hour,0,0);
        return [date, entity.attributes[dateindex][index]];
      });

[PimDoos]

Feel free to branch & PR for this change

[Tazzios]

I don't think it is ready for PR Because of mentioned todo's and following things:

• mouse info only shows the today schedule.
• when nextday is unknown it shows a flat line.
• Now line is shown on the minute