OH3 advanced charts

I am on openHAB version: 3.2.0~S2468-1 and try to use some advanced styling in my charts in Main UI. As the charts in openHAB are based on the ECharts I looked into the corresponding cheat sheet and would like to try out many cool features from there, but the official OH docs about charts do not really help me.

Currently I try to have a line series with a green color if the value is above 0 and red at or below zero which is quite close to the echarts example but I don’t catch how to translate the sample code there into the JAML code equivalent. On ECharts I can simplify the example to

$.get(ROOT_PATH + '/data/asset/data/aqi-beijing.json', function (data) {
    myChart.setOption(option = {
        xAxis: {
            data: data.map(function (item) {
                return item[0];
            })
        },
        yAxis: {},
        visualMap: {
            top: 50,
            right: 10,
            pieces: [{
                gt: 0,
                lt: 200,
                color: '#FD0100'
            }, {
                gt: 200,
                color: '#93CE07'
            }],
            outOfRange: {
                color: '#999'
            }
        },
        series: {
            name: 'Beijing AQI',
            type: 'line',
            data: data.map(function (item) {
                return item[1];
            }),
        }
    });
});

which yields

my oh config looks as follows:

config:
  label: GreenRock Chart
  period: D
slots:
  grid:
    - component: oh-chart-grid
      config: {}
  xAxis:
    - component: oh-time-axis
      config:
        gridIndex: 0
  yAxis:
    - component: oh-value-axis
      config:
        gridIndex: 0
    - component: oh-value-axis
      config:
        gridIndex: 0
        name: Leistung
  visualMap:
    - component: oh-chart-visualmap
      config:
        pieces: 2
        type: piecewise
      slots:
        default:
          - component: oh-chart-visualmap
            config:
              gt: 0
              color: "#FD0100"
          - component: oh-chart-visualmap
            config:
              lte: 0
              color: "#93CE07"
  series:
    - component: oh-time-series
      config:
        name: Leistung
        gridIndex: 0
        xAxisIndex: 0
        type: line
        item: Greenrock_BAT_Power
        yAxisIndex: 1
    - component: oh-time-series
      config:
        name: Ladezustand
        gridIndex: 0
        xAxisIndex: 0
        yAxisIndex: 0
        type: line
        item: Greenrock_BAT_Level

which yields:


So not completely wrong but

  • the color code is using 5 pieces not 2
  • the colors are not what I want them to be
  • all series are using the same color code

Any idea is welcome and in general I search for some explanation or the rules of how to translate the code from ECharts page into the corresponding OH YAML or a “complete documentation” of the chart capabilities in openHAB.

1 Like

Taking the eCharts page into account ist should be possible to cerate Barcharts and all the other charts as well. uuuuiiiiiii

1 Like

it should be so that 2 pcs. was
visualMap:
- component: oh-chart-visualmap
config:
pieces: 0
type: piecewise
splitNumber: 2

config:
  label: Температура Улица
  chartType: day
slots:
  grid:
    - component: oh-chart-grid
      config:
        containLabel: true
        show: true
  xAxis:
    - component: oh-time-axis
      config:
        gridIndex: 0
  yAxis:
    - component: oh-value-axis
      config:
        gridIndex: 0
  visualMap:
    - component: oh-chart-visualmap
      config:
        pieces: [
            {min: 0, max: 50, color: 'Red'},
            {min: 50, max: 60, color: 'Lime'},
            {min: 60, max: 90, color: 'Aqua'}
        ]
        type: piecewise
  series:
    - component: oh-time-series
      config:
        name: Series 1
        gridIndex: 0
        xAxisIndex: 0
        yAxisIndex: 0
        type: line
        item: Meteo_Humidity1
        service: rrd4j
  tooltip:
    - component: oh-chart-tooltip
      config:
        show: true
        orient: horizontal
  legend:
    - component: oh-chart-legend
      config:
        show: true
        orient: horizontal
  toolbox:
    - component: oh-chart-toolbox
      config:
        show: false
  calendar: []

Also a good option:

config:
  chartType: ""
  period: D
  label: Температура Улица
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
        name: °C
  visualMap:
    - component: oh-chart-visualmap
      config:
        pieces:
          - min: 0
            max: 25
            color: Blue
          - min: 25
            max: 30
            color: Lime
          - min: 30
            max: 45
            color: Red
  series:
    - component: oh-time-series
      config:
        name: Температура
        gridIndex: 0
        xAxisIndex: 0
        yAxisIndex: 0
        type: line
        item: Meteo_Temperature1
        areaStyle:
          opacity: 0.2
        markLine:
          data:
            - type: average
        markPoint:
          label:
            backgroundColor: auto
          data:
            - type: min
              name: min
            - type: max
              name: max
  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

Coming closer, thanks:

  series:
    - component: oh-time-series
      config:
        gridIndex: 0
        item: Greenrock_BAT_Level
        name: Ladezustand
        type: line
        xAxisIndex: 0
        yAxisIndex: 0
        color: 'Blue'
    - component: oh-time-series
      config:
        gridIndex: 0
        item: Greenrock_BAT_Power
        name: Leistung
        type: line
        xAxisIndex: 0
        yAxisIndex: 1
  visualMap:
    - component: oh-chart-visualmap
      config:
        pieces: [
            {min: 1, color: '#76b729'},
            {max: 0, color: '#aa1800'}
        ]
        type: piecewise

But the visual map is still applied to all data series, any idea how to change that? I’d like to have a constant color (which is correct in the legend BTW) for some series.

And last but not least, please tell me how you found that…

https://echarts.apache.org/en/option.html#visualMap-piecewise

Try it like this

  series:
    - component: oh-time-series
      config:
        id: 0
        gridIndex: 0
        item: Greenrock_BAT_Level
        name: Ladezustand
        type: line
        xAxisIndex: 0
        yAxisIndex: 0
        color: 'Blue'
    - component: oh-time-series
      config:
        id: 1
        gridIndex: 0
        item: Greenrock_BAT_Power
        name: Leistung
        type: line
        xAxisIndex: 0
        yAxisIndex: 1
  visualMap:
    - component: oh-chart-visualmap
      config:
        pieces: [
            {min: 1, color: '#76b729'},
            {max: 0, color: '#aa1800'}
        ]
         seriesIndex: 0
        type: piecewise

You need to assign an id to the series and add it to visualMap: seriesIndex: id

config:
  chartType: ""
  period: D
  label: Температура Улица
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
        name: °C
  visualMap:
    - component: oh-chart-visualmap
      config:
         pieces:
          - min: 0
            max: 25
            color: Blue
          - min: 25
            max: 30
            color: Lime
          - min: 30
            max: 45
            color: Red
         seriesIndex: 0
  series:
    - component: oh-time-series
      config:
        id: 0
        name: Температура
        gridIndex: 0
        xAxisIndex: 0
        yAxisIndex: 0
        type: line
        item: Meteo_Temperature1
        areaStyle:
          opacity: 0.2
        markLine:
          data:
            - type: average
        markPoint:
          label:
            backgroundColor: auto
          data:
            - type: min
              name: min
            - type: max
              name: max
    - component: oh-time-series
      config:
        id: 1
        name: Температура 1
        gridIndex: 0
        xAxisIndex: 0
        yAxisIndex: 0
        type: line
        color: Fuchsia
        item: Meteo_Temperature
  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

1 Like

Yes, that did the trick - together with the fact that arrays in the echarts docs convert to

xxx:
  - one
  - two

Thanks a lot!

Finally my Solar battery status chart looks like this:


and the code for everyone interested:

config:
  label: GreenRock Chart
  period: D
  sidebar: true
slots:
  grid:
    - component: oh-chart-grid
      config: {}
  series:
    - component: oh-time-series
      config:
        gridIndex: 0
        item: Greenrock_BAT_Level
        name: Ladezustand
        type: line
        xAxisIndex: 0
        yAxisIndex: 0
        markPoint:
          data:
            - type: min
              name: Min
    - component: oh-time-series
      config:
        gridIndex: 0
        item: Greenrock_BAT_Power
        name: Leistung
        type: line
        xAxisIndex: 0
        yAxisIndex: 1
  visualMap:
    - component: oh-chart-visualmap
      config:
        pieces:
          - gt: 1
            color: "#76b729"
          - lte: 0
            color: "#aa1800"
        type: piecewise
        text:
          - Laden
          - Entladen
        seriesIndex: 1
  xAxis:
    - component: oh-time-axis
      config:
        gridIndex: 0
  yAxis:
    - component: oh-value-axis
      config:
        gridIndex: 0
        name: Ladestand [%]
        nameLocation: middle
        nameGap: 25
    - component: oh-value-axis
      config:
        gridIndex: 0
        name: Leistung [W]
        nameLocation: middle
        nameGap: 35
        min: -2000
        max: 2000
  legend:
    - component: oh-chart-legend
      config:
        top: 3
        type: scroll
  dataZoom:
    - component: oh-chart-datazoom
      config:
        type: slider

Yes, whoever in the openHAB team came up with the idea to integrate ECharts: I definitely owe him/her a beer! This is simply fantastic!

Has this capability markedly increased in OH v3.2 vs. 3.1?

hello, is there a way to specify the Charts of the “actionAnalyzer” to? I am looking for a way to customize ,for example the x-min-value and the color, at the “configure Widget” menu.

like this way:

config:
                          action: analyze
                          actionAnalyzerItems: =[props.RoomTemperature,props.HeatSetpoint]
                          "actionAnalyzerColor: =...."

thanks for help