[OH3] Charts with Apache ECharts Options

Add-ons UIs
1

Hi,

Running on OH3.1 I made a page showing an chart with 4 switch items… I would like to have one tooltip-axis that combines all of this grids? I have read this post https://community.openhab.org/t/oh3-charts-with-apache-echarts/111505
where Yannick suggest to use

options:
    axisPointer:
      link:
        xAxisIndex: all

But can’t get this working… don’t know how to translate the Documentation - Apache Echarts into YAML…

this is the chart

image
image1375×857 21.3 KB

and YAML code:

config:
  chartType: ""
  period: h
  label: Bewegingsmelding
slots:
  grid:
    - component: oh-chart-grid
      config:
        includeLabels: true
        height: "150"
        show: true
        containLabel: true
        bottom: "10"
    - component: oh-chart-grid
      config:
        show: true
        containLabel: false
        height: "150"
        bottom: "170"
    - component: oh-chart-grid
      config:
        show: true
        containLabel: false
        height: "150"
        bottom: "330"
    - component: oh-chart-grid
      config:
        show: true
        containLabel: false
        height: "150"
        bottom: "490"
    - component: oh-chart-grid
      config:
        show: true
        containLabel: false
        height: "150"
        bottom: "650"
  xAxis:
    - component: oh-time-axis
      config:
        gridIndex: 0
    - component: oh-time-axis
      config:
        gridIndex: 1
    - component: oh-time-axis
      config:
        gridIndex: 2
    - component: oh-time-axis
      config:
        gridIndex: 3
    - component: oh-time-axis
      config:
        gridIndex: 4
  yAxis:
    - component: oh-value-axis
      config:
        gridIndex: 0
    - component: oh-value-axis
      config:
        gridIndex: 1
    - component: oh-value-axis
      config:
        gridIndex: 2
    - component: oh-value-axis
      config:
        gridIndex: 3
    - component: oh-value-axis
      config:
        gridIndex: 4
  series:
    - component: oh-time-series
      config:
        name: VISU_IB_INKOMHAL
        gridIndex: 0
        xAxisIndex: 0
        yAxisIndex: 0
        type: line
        areaStyle: {}
      slots:
        markArea:
          - component: oh-mark-area
            config:
              name: VISU_IB_INKOMHAL
              item: VISU_IB_INKOMHAL
    - component: oh-time-series
      config:
        name: VISU_IB_LIVING
        gridIndex: 1
        type: line
        areaStyle: {}
        xAxisIndex: 1
        yAxisIndex: 1
      slots:
        markArea:
          - component: oh-mark-area
            config:
              name: VISU_IB_LIVING
              item: VISU_IB_LIVING
    - component: oh-time-series
      config:
        name: VISU_IB_KEUKEN
        gridIndex: 2
        xAxisIndex: 2
        yAxisIndex: 2
        type: line
        areaStyle: {}
      slots:
        markArea:
          - component: oh-mark-area
            config:
              name: VISU_IB_KEUKEN
              item: VISU_IB_KEUKEN
    - component: oh-time-series
      config:
        name: VISU_IB_WASPLAATS
        gridIndex: 3
        xAxisIndex: 3
        yAxisIndex: 3
        type: line
        areaStyle: {}
      slots:
        markArea:
          - component: oh-mark-area
            config:
              name: VISU_IB_WASPLAATS
              item: VISU_IB_WASPLAATS
    - component: oh-time-series
      config:
        name: Alarm ingeschakeld
        gridIndex: 4
        xAxisIndex: 4
        yAxisIndex: 4
        type: line
        areaStyle: {}
      slots:
        markArea:
          - component: oh-mark-area
            config:
              name: VISU_IB_IN_VD
              item: VISU_IB_IN_VD
  tooltip:
    - component: oh-chart-tooltip
      config:
        confine: true
        smartFormatter: true
        show: true
        orient: vertical
        xAxisIndex:
          - 0
          - 1
          - 2
          - 3
          - 4
  axisPointer:
    - component: oh-chart-axispointer
      config:
        link:
          xAxisIndex: all
  legend:
    - component: oh-chart-legend
      config:
        type: scroll
        show: true
        top: "1"
  dataZoom:
    - component: oh-chart-datazoom
      config:
        type: slider
        show: true
        xAxisIndex:
          - 0
          - 1
          - 2
          - 3
          - 4
        bottom: "10"

Could someone help me where to put this axisPointer option?

thanks!

2

That could be a nice thing with a repeat etc.

3

Here, under config:

config:
  chartType: ""
  period: h
  label: Bewegingsmelding
  options:
    axisPointer:
      link:
        xAxisIndex: all
slots:
  ...

The final ECharts configuration is a “merge” of the transformation of the components in the slots (grid etc.) and this options object taken as-is.
(Note that the merging is only done on top-level properties that are not covered by components so you can’t define grids with the grid option under the options config parameter of the chart page, same thing for axes, series and other components; however you can specify most ECharts options under grid in the oh-chart-grid components).
The objects that aren’t supported in options and are taken from subcomponents are listed below in that return statement:

1 Like
4

Hi Yannick,

@ysc Thanks for your help and additional information. It works perfect!
You have done a fantastic job with OH3!

Many thanks!

1 Like