[OH3] Charts with Apache ECharts

[Nico_R (Nico)]

Hey guys,

with the upgrade to openHAB 3 I experimented a little bit with the new charts.
I got a lot of information from apache echarts (Apache ECharts).

My example for inspiration.
Based on Influx DB.

In the example you can see the configruation of:

- markPoint

- chart-datazoom

- chart-tooltip

- Definition ,markLine’'
see in the yaml
- gradient Color of ,areaStyle’'
see in the yaml
- Definition of line-color with ,lineStyle’'
see in the yaml

and so on…

Yaml Example

config:
  label: Klima Wohnzimmer
  sidebar: true
  period: W
slots:
  grid:
    - component: oh-chart-grid
      config:
        show: true
        left: 50
        right: 50
        height: 35%
    - component: oh-chart-grid
      config:
        show: true
        left: 50
        right: 50
        top: 50%
        height: 35%
  xAxis:
    - component: oh-time-axis
      config:
        gridIndex: 0
        name: Uhrzeit
        boundaryGap: false
        axisLine:
          onZero: true
    - component: oh-time-axis
      config:
        show: false
        gridIndex: 1
        name: Uhrzeit
        boundaryGap: false
        position: top
        axisLine:
          onZero: true
  yAxis:
    - component: oh-value-axis
      config:
        gridIndex: 0
        min: "17"
        max: "25"
        name: Temperatur
        axisLabel:
          formatter: "{value} °C"
    - component: oh-value-axis
      config:
        gridIndex: 0
        show: false
        min: "0"
        max: "5"
        name: Ventilstellung
        nameLocation: center
        splitLine:
          show: false
    - component: oh-value-axis
      config:
        gridIndex: 1
        inverse: true
        min: "0"
        max: "100"
        name: Luftfeuchtigkeit
        nameLocation: center
        splitLine:
          show: false
  series:
    - component: oh-time-series
      config:
        name: Ist Temp. Indoor
        gridIndex: 0
        xAxisIndex: 0
        yAxisIndex: 0
        type: line
        lineStyle:
          color: rgb(226, 170, 14)
        item: act_temp_WZ
        smooth: true
        markPoint:
          itemStyle:
            color: rgb(226, 170, 14)
          data:
            - type: max
              name: Höchsttemperatur
            - type: min
              name: Tiefsttemperatur
        markLine:
          data:
            - type: average
              name: Average
    - component: oh-time-series
      config:
        name: Soll Temp. Indoor
        gridIndex: 0
        xAxisIndex: 0
        yAxisIndex: 0
        type: line
        lineStyle:
          color: rgb(70, 123, 168)
        item: set_temp_WZ
    - component: oh-time-series
      config:
        name: Ventilstellung
        gridIndex: 0
        xAxisIndex: 0
        yAxisIndex: 1
        type: line
        lineStyle:
          color: rgb(98, 217, 81)
        step: end
        areaStyle: {}
        item: state_ventil_WZ
    - component: oh-time-series
      config:
        name: Luftfeuchtigkeit
        gridIndex: 1
        xAxisIndex: 1
        yAxisIndex: 2
        type: line
        lineStyle:
          color: rgb(70, 123, 168)
        areaStyle:
          color:
            type: linear
            x: 0
            y: 0
            x2: 0
            y2: 1
            colorStops:
              - offset: 0
                color: rgb(70, 123, 168, 0.0)
              - offset: 0.5
                color: rgb(70, 123, 168, 0.5)
              - offset: 1
                color: rgb(70, 123, 168, 1.0)
        item: hum_WZ
        smooth: true
  title:
    - component: oh-chart-title
      config:
        show: true
        text: Klima Test
  tooltip:
    - component: oh-chart-tooltip
      config:
        show: true
        orient: vertical
        trigger: axis
        axisPointer:
          type: cross
  legend:
    - component: oh-chart-legend
      config:
        show: true
        orient: horizontal
  dataZoom:
    - component: oh-chart-datazoom
      config:
        show: true
        type: slider
        orient: horizontal
        start: 30
        end: 70
        xAxisIndex:
          - 0
          - 1

[BobMiles]

Hi,

if you’d share the YAML code, maybe this could be useful for others, too!

All the best,

Bob

[Nico_R (Nico)]

Hi @BobMiles ,

i’ve updated my post with the yaml.
Have fun

best,
Nico

[BobMiles]

Thanks a lot!

[ysc (Yannick Schaus)]

Good stuff!

Little trick, you can define raw ECharts options in the options parameter on the chart itself, at the root level. They will be merged with the components’ options.
For instance, since you have multiple grids with similar charts in them, you might want to link the axis pointers:

  options:
    axisPointer:
      link:
        xAxisIndex: all

Example here: demo
(login first with demo/demo and try again if it doesn’t work)
Docs: Documentation - Apache ECharts

[Nico_R (Nico)]

Nice trick!

Thanks a lot @ysc !