See daily consumption/solar panel energy

[proven yoke]

Hello!

I'm trying to add an Apexcharts-card in order to have the HomeWizard visualisation in Home Assitant.
I'm trying to follow this post: https://community.home-assistant.io/t/apexcharts-card-a-highly-customizable-graph-card/272877/2050 .

When using my Home Wizard P1 meter values, the card shows the cumulative values. I would like to get the daily values (from midnight till midnight) instead, pref realtime. I'm trying to set up a home dashboard and this would help us visualise when it's the right time to use power (i.e. washing machine).

I'm a novice in HA though so I'm kind of clueless on how to make this a 24 realtime chart instead of cumulative values.
The picture is an example of the electricity values just being a cumulative graph and thus not showing much.

yaml: https://pastebin.com/vmAAnfGb

[elder willow]

if you want real time, you need to use the power sensor

[proven yoke]

Care to elaborate?

[elder willow]

That's what power shows you

[proven yoke]

I tried adding a utility based on the meter but the results are off

[elder willow]

Also what the home Wizard dashboard shows

[proven yoke]

Got it to work! Thanks

[dusky sentinel]

@proven yoke mind sharing your solution? Would be interested to try as well.

[proven yoke]

Sadly I can't area fill with the line of the power but it's basically still the same result.

Here's the yaml of both the power chart

cards:
  - type: vertical-stack
    cards:
      - type: custom:apexcharts-card
        experimental:
          color_threshold: true
          brush: true
        span:
          start: day
          offset: +0d
        graph_span: 1d
        header:
          show: true
          title: Electricity
          show_states: true
          colorize_states: true
        apex_config:
          legend:
            show: false
          grid:
            strokeDashArray: 0
            borderColor: rgb(52,52,52)
          xaxis:
            axisBorder:
              show: false
              color: rgb(52,52,52)
            tickAmount: 1
            axisTicks:
              show: false
            labels:
              style:
                colors: rgb(128,128,128)
          yaxis:
            decimalsInFloat: 0
            min: -3000
            max: 3000
            tickAmount: 5
            labels:
              style:
                colors: rgb(128,128,128)
        all_series_config:
          type: line
          curve: smooth
          stroke_width: 2
          group_by:
            func: avg
            duration: 5min
          extend_to: false
        series:
          - entity: sensor.p1_meter_vermogen
            name: Grid
            float_precision: 0
            color_threshold:
              - value: 0
                color: rgb(30,227,137)
              - value: 0.01
                color: rgb(66,73,241)
            show:
              in_header: true
              header_color_threshold: true```

        experimental:
          color_threshold: true
          brush: true
        span:
          start: day
          offset: +0d
        graph_span: 1d
        now:
          show: true
        header:
          show: true
          title: Gas
          show_states: true
          colorize_states: true
        apex_config:
          legend:
            show: false
          grid:
            strokeDashArray: 0
            borderColor: rgb(52, 52, 52)
          xaxis:
            axisBorder:
              show: false
              color: rgb(52, 52, 52)
            tickAmount: 1
            axisTicks:
              show: false
            labels:
              style:
                colors: rgb(128,128,128)
          yaxis:
            decimalsInFloat: 3
            min: 0
            max: 0.04
            tickAmount: 4
            labels:
              style:
                colors: rgb(128,128,128)
        all_series_config:
          show:
            legend_value: false
          extend_to: false
          type: area
          curve: smooth
          stroke_width: 2
          group_by:
            func: avg
            duration: 5min
          color_threshold:
            - value: 0
              opacity: 0.2
            - value: 0.02
              opacity: 0.7
        series:
          - entity: sensor.dagelijks_gasverbruik
            name: Gas
            color: rgb(254, 0, 144)
            float_precision: 3```

Yaml for gas chart. This is based on a helper sensor made for daily gas usage and does have the area filled as a gradient

[dusky sentinel]

What is the unit of your sensor.p1_meter_vermogen sensor?

Ah it was expecting the input sensor in W instead of kW.. I will play with that, thanks! 🙂