gradient graph yesterday, today, tomorrow

[ikke-zelf]

After @katla50 posted a suggestion on how the graph could look like, I tried to make It as I would like it.
Still struggling to also get a consumed price per hour in a graph column bar, but for starters it's okay for now.

[ikke-zelf]

type: custom:apexcharts-card
header:
  show: true
  title: Electriciteitsprijs (€/kwh) en verbruik
  show_states: true
  colorize_states: true
  standard_format: true
now:
  show: true
  color: rgb(0, 255, 0)
  label: Now
graph_span: 3d
span:
  start: day
  offset: '-1d'
apex_config:
  stroke:
    width: 2
  dataLabels:
    enabled: true
  fill:
    type: gradient
    gradient:
      shadeIntensity: 1
      inverseColors: false
      opacityFrom: 0.45
      opacityTo: 0.05
      stops:
        - 10
        - 50
        - 75
        - 1000
  legend:
    show: false
yaxis:
  - id: price
    decimals: 2
    show: true
  - id: usage
    show: true
    opposite: true
series:
  - entity: sensor.current_electricity_market_price
    yaxis_id: price
    extend_to: now
    name: Prijs gisteren
    unit: €/kwh
    float_precision: 3
    type: area
    curve: stepline
    color: lightblue
    show:
      legend_value: false
  - entity: sensor.average_electricity_price_today
    yaxis_id: price
    extend_to: now
    name: Prijs vandaag
    unit: €/kwh
    float_precision: 3
    type: area
    curve: stepline
    color: ''
    show:
      legend_value: false
    data_generator: |
      return entity.attributes.prices_today.map((record, index) => {
        return [record.time, record.price];
      });
  - entity: sensor.average_electricity_price_today
    yaxis_id: price
    extend_to: now
    name: Prijs morgen
    unit: €/kwh
    float_precision: 3
    type: area
    curve: stepline
    color: rgb(0,128,128)
    show:
      legend_value: false
    data_generator: |
      return entity.attributes.prices_tomorrow.map((record, index) => {
        return [record.time, record.price];
      });
  - entity: sensor.nuts_hourly_energy
    yaxis_id: usage
    unit: kw
    type: column
    stroke_width: 5
    name: Verbruik
    color: purple
    group_by:
      func: max
    show:
      legend_value: true

[jjtoard]

High, Very nice graph. Added it right away but my graph is missing the tomorrow part. At the top it stays at N/A and no graph.

[katla50]

sorry for the bad formatting in my previous post, but here is my apexchart example that shows price and power consumption

type: custom:apexcharts-card
header:
  show: true
  title: Strømpris og Forbruk
  show_states: true
  standard_format: true
now:
  show: true
  color: rgb(0, 255, 0)
graph_span: 3d
span:
  start: day
  offset: '-1d'
apex_config:
  stroke:
    width: 2
  dataLabels:
    enabled: true
  fill:
    type: gradient
    gradient:
      shadeIntensity: 1
      inverseColors: false
      opacityFrom: 0.45
      opacityTo: 0.05
      stops:
        - 10
        - 50
        - 75
        - 1000
  legend:
    show: false
  yaxis:
    - id: price
      show: true
      decimalsInFloat: 1
      floating: false
      forceNiceScale: true
      extend_to: end
    - id: usage
      show: true
      opposite: true
      decimalsInFloat: 1
      floating: false
      forceNiceScale: true
      extend_to: end
series:
  - entity: sensor.kjetil_current_electricity_market_price
    yaxis_id: price
    extend_to: now
    name: Pris NÅ
    unit: kr/kwt
    type: area
    curve: stepline
    color: tomato
    show:
      legend_value: false
  - entity: sensor.kjetil_average_electricity_price_today
    yaxis_id: price
    extend_to: now
    name: Pris slutt idag
    unit: kr/kwt
    type: area
    curve: stepline
    color: tomato
    show:
      legend_value: false
    data_generator: |
      return entity.attributes.prices_today.map((record, index) => {
         return [record.time, record.price];
       });
  - entity: sensor.kjetil_average_electricity_price_today
    yaxis_id: price
    extend_to: now
    name: Pris slutt imorgen
    unit: kr/kwt
    type: area
    curve: stepline
    color: tomato
    show:
      legend_value: false
    data_generator: |
      return entity.attributes.prices_tomorrow.map((record, index) => {
        return [record.time, record.price];
       });
  - entity: sensor.stromtime_utility
    yaxis_id: usage
    unit: kw
    type: column
    name: Forbruk Nå
    color: rgb(0,93,136)
    group_by:
      func: max
    show:
      legend_value: false

This is a modified chart from powersaver.no

[Mariusthvdb]

o thats nice, never thought of mapping those together....
my e tiny is in Watts, and, since I am new to the data_generator, would like to ask if you can help me do a /1000 operation on that, so I can use the same graph you do.

          - entity: sensor.netto_verbruik
            yaxis_id: power
            unit: W

so Id need something for the

             data_generator: |
               return entity.state.map((record, index) => {
                 return [record.time, record.state/1000];
               });

above is wrong obviously, but to show what Id like to do.

thanks for your suggestion.

btw, I get the extraneous warnings on these options, so for now I commented them.

#             decimalsInFloat: 1
#             floating: false
#             forceNiceScale: true
#             extend_to: end