OH3 chart last 24 hour

Setup, Configuration and Use Items & Sitemaps
1

I am experimenting with charts and so far so good. Currently, my chartType is set to Day. So every day the chart starts again at midnight, completing itself from left to right as the dat progresses.

I tried modifying this to 24 hour to show the ‘running’ (or past) 24 hours. But somehow, I get this weird line:

Schermafbeelding 2021-07-01 om 18.19.05
Schermafbeelding 2021-07-01 om 18.19.052560×1600 176 KB

There must be an option or something that I miss but so far I can’t find it :grimacing:

Any suggestions please?

YAML:

config:
  label: Grafiek keukenwaarden
  chartType: day
  options:
    color:
      - red
      - blue
      - "#59f42f"
slots:
  grid:
    - component: oh-chart-grid
      config:
        includeLabels: true
        height: 75%
        bottom: 50px
        show: false
  xAxis:
    - component: oh-category-axis
      config:
        gridIndex: 0
        categoryType: day
        weekdayFormat: default
        monthFormat: default
        show: false
  yAxis:
    - component: oh-value-axis
      config:
        name: °C
        scale: false
        gridIndex: 0
    - component: oh-value-axis
      config:
        name: "%"
        scale: false
        gridIndex: 0
    - component: oh-value-axis
      config:
        name: ""
        scale: false
        gridIndex: 0
        show: false
  series:
    - component: oh-aggregate-series
      config:
        name: Temperatuur
        gridIndex: 0
        xAxisIndex: 0
        yAxisIndex: 0
        type: line
        item: tempKeuken
        dimension1: hour
        areaStyle:
          opacity: 0.2
        smooth: true
        showSymbol: false
    - component: oh-aggregate-series
      config:
        name: Luchtvochtigheid
        gridIndex: 0
        xAxisIndex: 0
        yAxisIndex: 1
        type: line
        item: humKeuken
        dimension1: hour
        areaStyle:
          opacity: 0.2
        smooth: true
        showSymbol: false
    - component: oh-aggregate-series
      config:
        name: Luchtkwaliteit
        gridIndex: 0
        xAxisIndex: 0
        yAxisIndex: 2
        type: line
        item: iaqKeuken
        dimension1: hour
        areaStyle:
          opacity: 0.2
        smooth: true
        showSymbol: false
  tooltip:
    - component: oh-chart-tooltip
      config:
        show: true
        orient: vertical
        trigger: axis
  legend:
    - component: oh-chart-legend
      config:
        show: true
        bottom: "10"
        type: scroll
2

Same bug here… I copy pasted exactly the example from the demo site. It looks like the graph tries to plot 25 points instead of 24 and it sticks together 23:00 from current and previous day.

image
image855×553 26.5 KB

3

Figured it out… the chart type needs to be “day”

config:
chartType: day

4

@ottawahacker I have that in my YAML in post #1 but still draws the weird stuff.

Could you post your complete chart config please?

Just to be sure, I am looking for the past 24 hours from ‘now’. So if it is now 10am, chart should display 10am yesterday till 10am today.

5

You are right - I only got my charts working in “day” mode. I haven’t been able to find a workaround that issue and with dynamic scale, I end up with the same issue. I suspect the graph is missing a feature to have a “dynamic” x axis that would setup the min/max values for the last 24hrs and order the values accordingly.