How to overlap an offset time series in OH3? (Corelate yesterdays values vs. today)

Hi all,

I’m a little bit lost because I think I’ve overseeing some issues.
I’m using the offset attribute, but the only thing that happens is more or less that he truncates the last day from yesterday.

Any ideas how i can compare today and yesterdays value in an unaggregated chart?

config:
  period: D
  label: LightBrightness
  sidebar: true
slots:
  grid:
    - component: oh-chart-grid
      config:
        includeLabels: true
  xAxis:
    - component: oh-time-axis
      config:
        gridIndex: 0
  yAxis:
    - component: oh-value-axis
      config:
        gridIndex: 0
  series:
    - component: oh-time-series
      config:
        name: LightBrightess
        gridIndex: 0
        xAxisIndex: 0
        yAxisIndex: 0
        type: line
        item: LightBrightness
    - component: oh-time-series
      config:
        name: LightBrightessYesterday
        gridIndex: 0
        xAxisIndex: 0
        yAxisIndex: 0
        type: line
        offsetAmount: 1
        offsetUnit: day
        item: LightBrightness
        service: rrd4j
  tooltip:
    - component: oh-chart-tooltip
      config:
        confine: true
        smartFormatter: true
  legend:
    - component: oh-chart-legend
      config:
        bottom: 3
        type: scroll
  dataZoom:
    - component: oh-chart-datazoom
      config:
        type: inside

I assume it’s something with the series.

Thanks you so much
/Franz

I am trying to do similar, but seeing different issues I think.

I am trying to chart a comparison of my electricity usage against the previous day. So I have one time series with my monitor’s amps item, and a second time series with the same item and offset by 1 day.

When I run my chart only the ‘today’ series is shown. The offset series is not shown. There’s an entry in the legend, but no lines and nothing shows up in the tooltip for it.

config:
  period: D
  label: Power Usage
  sidebar: true
slots:
  grid:
    - component: oh-chart-grid
      config:
        includeLabels: true
  xAxis:
    - component: oh-time-axis
      config:
        gridIndex: 0
  yAxis:
    - component: oh-value-axis
      config:
        gridIndex: 0
  series:
    - component: oh-time-series
      config:
        name: Amps (Today)
        gridIndex: 0
        xAxisIndex: 0
        yAxisIndex: 0
        type: line
        item: HomeEnergyMeter_Electricmeteramps
    - component: oh-time-series
      config:
        name: Amps (Yesterday)
        gridIndex: 0
        xAxisIndex: 0
        yAxisIndex: 0
        type: line
        offsetAmount: 1
        offsetUnit: day
        item: HomeEnergyMeter_Electricmeteramps
  tooltip:
    - component: oh-chart-tooltip
      config:
        confine: true
        smartFormatter: true
  legend:
    - component: oh-chart-legend
      config:
        bottom: 3
        type: scroll
  dataZoom:
    - component: oh-chart-datazoom
      config:
        type: inside

Have the same problems here. Wasn’t able to add multiple series with same item.
Would be a nice feature.

Check out the demo Page.
login credentials are demo:demo

2 Likes

Wow cool, I got it working :smiley: Many Thanks!!!
Main thing I had to change was xaxis from oh-time-axis to oh-category-axis, change series to oh-aggregate-series and add dimension1: hour

You can absolutely compare two time series, no need to be aggregates:

The trick is that you have to define two separate time axes on the same “grid”.
Then you assign the two series (day before and now) to each of these axes (with xAxisIndex 0 & 1), also giving the second series the proper offsetAmount & offsetUnit.

YAML for the above chart:

config:
  chartType: day
  label: Temperature Comparison
  sidebar: false
  visibleTo:
    - role:administrator
slots:
  dataZoom:
    - component: oh-chart-datazoom
      config:
        show: true
        type: inside
  grid:
    - component: oh-chart-grid
      config:
        top: "120"
  series:
    - component: oh-time-series
      config:
        gridIndex: 0
        item: FlowerCare_Temperature
        name: Now
        type: line
        xAxisIndex: 0
        yAxisIndex: 0
    - component: oh-time-series
      config:
        gridIndex: 0
        item: FlowerCare_Temperature
        name: Day before
        offsetAmount: 1
        offsetUnit: day
        type: line
        xAxisIndex: 1
        yAxisIndex: 0
  tooltip:
    - component: oh-chart-tooltip
      config:
        show: true
  xAxis:
    - component: oh-time-axis
      config:
        gridIndex: 0
    - component: oh-time-axis
      config:
        gridIndex: 0
  yAxis:
    - component: oh-value-axis
      config:
        gridIndex: 0

If you wanted to add the series from 2 days ago it would be similar, add an axis, assign a new series to this new axis.

Thanks for this Yannick. Very useful.

I am however trying to do a MONTH comparison which seems to be a bit skewed:


I am guessing this is due to the different number of days in each Month (28, 30 or 31).

Any ideas on how to “fix” this?

I though of using an initial period of 30 days - but this does not seem to be supported.

Any suggestions would be appreciated.