graph_span logic at entity level to compare data over period

[deepcoder]

Question/enhancement :

It seems like graph_span is at chart level only, would it possible to enable something similar at series/entity level? The specific use case I am looking at would be to graph the same entity over 2 or more periods. Compare last 24 hours to prior 24 hours for example.

Thanks! Keep up the great work!

[RomRider]

What you want is probably an offset but at the series' level.

I can probably hack something to make it possible but a timeline is a timeline so it naturally displays data based on the time of that specific data.
For eg: the X axis information would not represent the correct time for that offsetted serie, nor would the tooltip

[deepcoder]

Yes at series level.

If I put 2 or more series/entities on a chart, all the tooltips and y-axis get figured out so as to display correct for all the series on the chart. So if you could 'fool' it to think that each series was just like the way it work now but under the covers it is just the 1st series but say 24 hours ago, and the 3rd series is the first series but 48 hours ago.

I can certainty stack three charts on vertically and compare. However, for example in temperature entities. Overlaying the temp from 1 month ago to what it is this month is a nice graph. Same with energy use.

Bar charts are kind of the classic example, but line graphs work as well:

If what I am saying is too much of a hack, drop it.

[RomRider]

I can probably make it work, but not for months. Months sucks, it's not a fixed timerange :( You'd have to offset by 30days which is not perfect but close enough.
But still X-axis info (in the tooltip) would be wrong for the offsetted series, that could be confusing for users.

Let me think about it.

[deepcoder]

I should have hacked my example better. I see you point on calendars.
being able to do -24h -48h
-1d ? -2d? -3d?
would be more than useful.
But I can see how it can out of control....

[deepcoder]

Not sure if this would help:
Under span:
add
split: 4 (or whatever)

so the listed series would replotted 'split' times
might have to restrict 'group_by' to not work if split selected

I don't think it would reduce the functionality that I am thinking about. Ideally you could still specify multiple 'series' and they would all get split. But even if the limit was a single series, still useful.

[github-actions]

🎉 This issue has been resolved in version 1.3.0-dev.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

[RomRider]

I've put an example for what you want to achieve here:
https://github.com/RomRider/apexcharts-card/tree/dev#compare-data-from-today-with-yesterday

PS: It works with all the options without restriction including group_by

[deepcoder]

Dude! You are rocking it!!! You are delivering some exceptionally great code. Thank YOU!

Giving it some initial tests now.

  - type: custom:apexcharts-card
    header:
      show: false
    series: 
    - entity: sensor.backyard_atc_mi_temperature
      type: line
    - entity: sensor.backyard_atc_mi_temperature
      offset: -1d
      type: line
    - entity: sensor.backyard_atc_mi_temperature
      offset: -2d
      type: line
    update_interval: 60s
    graph_span: 1d
    span:
      start: day
    cache: true
    apex_config:
      stroke:
        show: true
        width: 1
      title:
        text: 'Backyard Temperature Today, -1 Day, -2 Days'
        align: 'center'
        floating: false
        style:
          fontSize:  '14px'
          fontWeight:  'bold'
          fontFamily:  'Arial'
          color:  '#263238'
      chart:
        height: 450

[RomRider]

Glad it suits your need :)

[deepcoder]

Group_by : I'm not getting this one to work, any ideas what I am doing wrong?

Trying to plot sum by hour for today 24 hours and yesterday 24 hours for following sensor.
The two individual sums work as shown at bottom. But when I try to combine, the second series (-1d) does not show.
Raw data attached.

sensor.home_instantaneous_demand
timestamp: 20210129133634
instantaneous_demand: 731
unit_of_measurement: Watt
friendly_name: Home Instantaneous Demand

Does not plot second series, see first picture:

  - type: custom:apexcharts-card
    header:
      show: false
    series: 
    - entity: sensor.home_instantaneous_demand
      type: column
      group_by:
        func: sum
        duration: 1h
        fill: 'zero'
    - entity: sensor.home_instantaneous_demand
      offset: -1d
      type: column
      group_by:
        func: sum
        duration: 1h
        fill: 'zero'
    update_interval: 60s
    graph_span: 1d
    span:
      start: day
    cache: true
    apex_config:
      chart:
        height: 450
      title:
        text: 'SCE Watts Today, Yesterday'
        align: 'center'
        floating: false
        style:
          fontSize:  '14px'
          fontWeight:  'bold'
          fontFamily:  'Arial'
          color:  '#263238'
      yaxis:
          show: true
          showAlways: true
          showForNullSeries: true
          seriesName: undefined
          opposite: false
          reversed: false
          logarithmic: false
          tickAmount: 6
          min: 0
          max: 1000000
          forceNiceScale: true
          floating: false
          decimalsInFloat: 0

These two plot fine:

title: T11 Multiple Bar History
panel: true
cards:
- type: vertical-stack
# - type: grid
  # columns: 1
  cards:
  - type: custom:apexcharts-card
    header:
      show: false
    series: 
    - entity: sensor.home_instantaneous_demand
      # color: blue
      type: column
      group_by:
        func: sum
        duration: 1h
        fill: 'zero'
    update_interval: 30s
    graph_span: 24h
    span:
      start: day
      # offset: -1d
    cache: true
    apex_config:
      title:
        text: 'SCE Watts per Hour Today 24h'
        align: 'center'
        floating: false
        style:
          fontSize:  '14px'
          fontWeight:  'bold'
          fontFamily:  'Arial'
          color:  '#263238'
      chart:
        height: 450
      yaxis:
          show: true
          showAlways: true
          showForNullSeries: true
          seriesName: undefined
          opposite: false
          reversed: false
          logarithmic: false
          tickAmount: 6
          min: 0
          max: 1000000
          forceNiceScale: true
          floating: false
          decimalsInFloat: 0

  - type: custom:apexcharts-card
    header:
      show: false
    series: 
    - entity: sensor.home_instantaneous_demand
      # color: blue
      type: column
      group_by:
        func: sum
        duration: 1h
        fill: 'zero'
    update_interval: 30s
    graph_span: 24h
    span:
      start: day
      offset: -1d
    cache: true
    apex_config:
      title:
        text: 'SCE Watts per Hour Yesterday 24h'
        align: 'center'
        floating: false
        style:
          fontSize:  '14px'
          fontWeight:  'bold'
          fontFamily:  'Arial'
          color:  '#263238'
      chart:
        height: 450
      yaxis:
          show: true
          showAlways: true
          showForNullSeries: true
          seriesName: undefined
          opposite: false
          reversed: false
          logarithmic: false
          tickAmount: 6
          min: 0
          max: 1000000
          forceNiceScale: true
          floating: false
          decimalsInFloat: 0

home_instantaneous_demand-2-days.csv.zip

[deepcoder]

Adding to prior comment. Data plots without 'grooup_by':

  - type: custom:apexcharts-card
    header:
      show: false
    series: 
    - entity: sensor.home_instantaneous_demand
      type: line
    - entity: sensor.home_instantaneous_demand
      offset: -1d
      type: line
    update_interval: 60s
    graph_span: 1d
    span:
      start: day

[RomRider]

Interesting, let me have a look. I think I introduced a bug. All those timestamps makes my brain hurt haha 😂

[deepcoder]

You and my Postgresql server ;-)

I realized I was doing 'sum', but should have been doing 'avg'. But even if I change this, the 2nd series (-1d) does not plot.

[github-actions]

🎉 This issue has been resolved in version 1.3.0-dev.2 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

[RomRider]

Would you mind trying that new version please?

[deepcoder]

Yes, I am getting correct data for both periods, yeah! Thanks!
I am getting some phantom data for bins beyond the current time. Is there something I need to configure different to stop it a current time? I will continue to test.

Yaml, picture and data below, thank you for your work! :

# test 11
title: T11 Multiple Bar History
panel: true
cards:
- type: vertical-stack
# - type: grid
  # columns: 1
  cards:

  - type: custom:apexcharts-card
    header:
      show: false
    series: 
    - entity: sensor.home_instantaneous_demand
      type: column
      group_by:
        func: avg
        duration: 1h
    - entity: sensor.home_instantaneous_demand
      offset: -1d
      type: column
      group_by:
        func: avg
        duration: 1h
    update_interval: 5m
    graph_span: 24h
    span:
      start: day
    cache: true
    apex_config:
      title:
        text: 'SCE Average Watts per Hour Today & Yesterday 24h'
        align: 'center'
        floating: false
        style:
          fontSize:  '14px'
          fontWeight:  'bold'
          fontFamily:  'Arial'
          color:  '#263238'
      chart:
        height: 450
      yaxis:
          show: true
          showAlways: true
          showForNullSeries: true
          seriesName: undefined
          opposite: false
          reversed: false
          logarithmic: false
          tickAmount: 6
          min: 0
          max: 2000
          forceNiceScale: true
          floating: false
          decimalsInFloat: 0


  - type: custom:apexcharts-card
    header:
      show: false
    series: 
    - entity: sensor.home_instantaneous_demand
      # color: blue
      type: column
      group_by:
        func: avg
        duration: 1h
        fill: 'zero'
    update_interval: 5m
    graph_span: 24h
    span:
      start: day
      # offset: -1d
    cache: true
    apex_config:
      title:
        text: 'SCE Average Watts per Hour Today 24h'
        align: 'center'
        floating: false
        style:
          fontSize:  '14px'
          fontWeight:  'bold'
          fontFamily:  'Arial'
          color:  '#263238'
      chart:
        height: 450
      yaxis:
          show: true
          showAlways: true
          showForNullSeries: true
          seriesName: undefined
          opposite: false
          reversed: false
          logarithmic: false
          tickAmount: 6
          min: 0
          max: 2000
          forceNiceScale: true
          floating: false
          decimalsInFloat: 0

  - type: custom:apexcharts-card
    header:
      show: false
    series: 
    - entity: sensor.home_instantaneous_demand
      # color: blue
      type: column
      group_by:
        func: avg
        duration: 1h
        fill: 'zero'
    update_interval: 5m
    graph_span: 24h
    span:
      start: day
      offset: -1d
    cache: true
    apex_config:
      title:
        text: 'SCE Average Watts per Hour Yesterday 24h'
        align: 'center'
        floating: false
        style:
          fontSize:  '14px'
          fontWeight:  'bold'
          fontFamily:  'Arial'
          color:  '#263238'
      chart:
        height: 450
      yaxis:
          show: true
          showAlways: true
          showForNullSeries: true
          seriesName: undefined
          opposite: false
          reversed: false
          logarithmic: false
          tickAmount: 6
          min: 0
          max: 2000
          forceNiceScale: true
          floating: false
          decimalsInFloat: 0

phantom-3day-data.csv.zip

[RomRider]

I believe you are missing fill: 'zero' in the first config

[deepcoder]

That was the mistake, fixed. Thanks you!

# test 11
title: T11 Multiple Bar History
panel: true
cards:
- type: vertical-stack
# - type: grid
  # columns: 1
  cards:

  - type: custom:apexcharts-card
    header:
      show: false
    series: 
    - entity: sensor.home_instantaneous_demand
      color: orange
      type: column
      group_by:
        func: avg
        duration: 1h
        fill: 'zero'
    - entity: sensor.home_instantaneous_demand
      color: blue
      offset: -1d
      type: column
      group_by:
        func: avg
        duration: 1h
        fill: 'zero'
    update_interval: 5m
    graph_span: 24h
    span:
      start: day
    cache: true
    apex_config:
      title:
        text: 'SCE Average Watts per Hour Today & Yesterday 24h'
        align: 'center'
        floating: false
        style:
          fontSize:  '14px'
          fontWeight:  'bold'
          fontFamily:  'Arial'
          color:  '#263238'
      chart:
        height: 450
      yaxis:
          show: true
          showAlways: true
          showForNullSeries: true
          seriesName: undefined
          opposite: false
          reversed: false
          logarithmic: false
          tickAmount: 6
          min: 0
          max: 2000
          forceNiceScale: true
          floating: false
          decimalsInFloat: 0

[github-actions]

🎉 This issue has been resolved in version 1.3.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀