MainUI:

Add-ons UIs
1

Hello all, I’ve created a chart page and added 4 timeseries. Now I have a strange behavior on my x-axis, the time axis. The ticks are set but not evenly spaced.

How can I solve this? I’ve included the code and a screenshot below.

image
image1567×926 75.1 KB

config:
  label: Temperatuur analyse
  sidebar: true
  period: 3D
slots:
  grid:
    - component: oh-chart-grid
      config: {}
  xAxis:
    - component: oh-time-axis
      config:
        gridIndex: 0
  yAxis:
    - component: oh-value-axis
      config:
        gridIndex: 0
  series:
    - component: oh-time-series
      config:
        name: Buiten
        gridIndex: 0
        xAxisIndex: 0
        yAxisIndex: 0
        type: line
        item: OutsideTemperature
    - component: oh-time-series
      config:
        name: Keuken
        gridIndex: 0
        xAxisIndex: 0
        yAxisIndex: 0
        type: line
        item: TemperatureKitchen
    - component: oh-time-series
      config:
        name: Koude kant koellus
        gridIndex: 0
        xAxisIndex: 0
        yAxisIndex: 0
        type: line
        item: TemperatureFromGroundLoop
    - component: oh-time-series
      config:
        name: Warme kant koellus
        gridIndex: 0
        xAxisIndex: 0
        yAxisIndex: 0
        type: line
        item: TemperatureToGroundLoop
  dataZoom:
    - component: oh-chart-datazoom
      config:
        show: true
        type: slider
  tooltip:
    - component: oh-chart-tooltip
      config:
        show: true
  legend:
    - component: oh-chart-legend
      config:
        show: true
  title:
    - component: oh-chart-title
      config:
        show: true
  toolbox:
    - component: oh-chart-toolbox
      config:
        show: true
2

I don’t really know what’s going here. I’ve never seen anything like it, but here are some possible things to look at.

What version of OH are you running? If you are on an old version can you update see if this is a bug that has already been fixed?

What persistence strategy are you using and how is it configured? My gut feeling is that the most likely issue here has something to do with the data that are being returned from persistence.

The chart system uses apache eCharts so you could also look around those help docs and forums. If there’s a a solution to the problem there we can probably figure out how to make it work in OH.

3

Hello Justin, thank you for your help.

I’m running Openhab 4.03 in a docker container.

For persistence, I use a jdbc configuration to postgresql.

Here is the file (only the relevant parts)


Strategies {
	Every5Minutes 		: "0 0/5 * ? * * *"
	default = everyChange
}
Items {
	OutsideTemperature : strategy = Every5Minutes
	Temperatures* : strategy = everyChange
}

One of the temperatures (Buiten temperatuur = OutsideTemperature) is not in the Temperatures group (glitch while building the configuration it seems). So it’s saved every 5 minutes. The other temperatures are at everyChange which happens every minute.

Here is a query result for the OutsideTemperature coming from the database:

image
image549×693 19.9 KB

I have tested the page with only the OutsideTemperature as a series and it gives the same result:

image
image1523×922 46.6 KB

But for completeness, here is a query result for another item:

image
image568×690 21.3 KB

Here we do see that the entries are not spaced evenly in time.

I’m going to check on the Apache forums to see for any related mentions. Thanks

4

These seem to be relevant:

but a fix is already merged since sept/2021.

https://stackoverflow.com/questions/66477681/echarts-5-axis-label-overlap
I’m not sure how I can add these parameters. I tried this:

  xAxis:
    - component: oh-time-axis
      config:
        gridIndex: 0
        axisLabel:
          hideOverlap: true

But that didn’t work.

5

I found out that you need to put eCharts parameters in an ‘options’ parameter at the config level:

So I tried this as well:

config:
  label: Temperatuur analyse
  sidebar: true
  period: 3D
  options:
    xAxis:
      axisLabel:
        hideOverlap: true

But that didn’t work either :frowning:

6

Try:

xAxis:
  - component: oh-time-axis
    config:
      gridIndex: 0
      options:
        axisLabel:
          hideOverlap: true
7

You can’t indeed define xAxis in the “root” component options because those are normally handled by subcomponents. Currently the way it’s done is you have options you defined at the root level and then those configured with subcomponents redefine sections, taking precedence. You have the list of sections here, below ...chartConfig:

There could be a better “merging” mechanism of options so that those you define would still be considered.

8

Thank you both for your help. Moving the config into the x-axis parameter did the trick:

image
image1398×887 33.4 KB

I feel a bit stupid for not trying that out myself :slight_smile:

The chart still feels strange because the axis ticks are not evenly spaced and I would expect dates as labels when the chart spans a timeseries of multiple days. But now that I know how to use echarts parameters, I’ll look for the solution there and report back here when I found a solution.