Control a water heater and ground source heat pump based on cheap hours of spot priced electricity

Tutorials & Examples Solutions
152

The general docs are quite short: Chart Pages | openHAB

However, there is a link to the official Apache ECharts docs which are available at Cheat Sheet - Apache ECharts

Here are a couple of examples for your convenience. Before you dive into the wonderful world of the Charts, make sure that you have created an Item with a name “spot_price”, “nibe_control”, “waterheater_control” or whatever are the exact names of the control points that you write to your InfluxDB with the Rules. This way openHab Charts can “see” the data that you have in the database even though you have bypassed openHab persistence layers by saving the data directly from the Rules.

Chart like this:

image
image1673×952 58.2 KB

Can be achieved with a chart configuration like this: (copy-paste this to the “code” tab and then you can go back to the “design” tab to see how it looks like in the click-click UI). Some parts of the ECharts capabilities are not configurable directly with the openHab chart UI but each of the chart components can be edited as YAML and you can find hints in the official ECharts documentation what kind of attributes and values are available. For example a line chart can be configured to be a step-line by adding a “step: middle” attribute and value.

config:
  label: Tuntihinnat ja ohjaukset
  sidebar: true
  chartType: day
  order: "-15"
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
        splitLine:
          show: false
    - component: oh-value-axis
      config:
        gridIndex: 0
        show: false
        splitLine:
          show: false
        max: "5"
        min: "0"
  series:
    - component: oh-time-series
      config:
        name: Tuntihinnat
        gridIndex: 0
        xAxisIndex: 0
        yAxisIndex: 0
        type: line
        step: middle
        item: spot_price
        areaStyle:
          opacity: "0.4"
        markLine:
          data:
            - name: Avg
              type: average
              label:
                distance: -150
    - component: oh-time-series
      config:
        gridIndex: 0
        xAxisIndex: 0
        type: line
        item: fmi_forecast_temperature
        markLine:
          data:
            - name: Avg
              type: average
              label:
                distance: -100
        yAxisIndex: 1
        name: Sääennuste
    - component: oh-time-series
      config:
        gridIndex: 0
        xAxisIndex: 0
        type: bar
        stack: foo
        item: nibe_control
        yAxisIndex: 2
        name: "Nibe: kompressori"
        service: influxdb
    - component: oh-time-series
      config:
        name: Lämminvesivaraaja
        gridIndex: 0
        xAxisIndex: 0
        type: bar
        stack: foo
        item: waterheater_control
        yAxisIndex: 2
        service: influxdb
    - component: oh-time-series
      config:
        name: "Nibe: Käyttöveden lämmitys"
        gridIndex: 0
        xAxisIndex: 0
        type: bar
        stack: foo
        item: nibe_water_control
        yAxisIndex: 2
        service: influxdb
    - component: oh-time-series
      config:
        name: Auton lataus
        gridIndex: 0
        xAxisIndex: 0
        type: bar
        stack: foo
        item: car_charging_control
        yAxisIndex: 2
        service: influxdb
  tooltip:
    - component: oh-chart-tooltip
      config:
        show: true
        orient: horizontal
  legend:
    - component: oh-chart-legend
      config:
        show: true
        orient: horizontal
1 Like