Day ahead prices graph: group bars & mark current hour

I have the following graph for my dynamic energy prices. I have 2 questions to optimize this graph:

  • I have a value for every 15minutes, but I want to group them per hour (are always the same per hour). Can I do this in the graph or do I need to get rid of the extra values?
  • Can I mark the current hour block? So I can see immedtaley what the current price is?

config:
  label: Elia prices
  period: D
  sidebar: true
  future: false
  chartType: day
slots:
  dataZoom:
    - component: oh-chart-datazoom
      config:
        show: true
        type: inside
  grid:
    - component: oh-chart-grid
      config: {}
  legend:
    - component: oh-chart-legend
      config:
        left: center
        orient: horizontal
        show: true
        top: bottom
  series:
    - component: oh-time-series
      config:
        gridIndex: 0
        item: elia_data
        markLine:
          data:
            - label:
                color: rgb(205, 112, 51)
                fontSize: 20
                formatter: "{c} avg"
                position: insideEndTop
                show: true
              lineStyle:
                color: rgb(205, 112, 51)
                width: 2
              name: average
              type: average
          symbol: none
        markPoint:
          data:
            - name: min
              type: min
              itemStyle:
                color: green
            - name: max
              type: max
              itemStyle:
                color: red
          symbol: circle
        name: spot
        service: influxdb
        type: bar
        xAxisIndex: 0
        yAxisIndex: 0
  tooltip:
    - component: oh-chart-tooltip
      config:
        show: true
  xAxis:
    - component: oh-time-axis
      config:
        axisPointer:
          handle:
            backgroundColor: blue
            show: true
          label:
            backgroundColor: gray
            show: true
          snap: true
        gridIndex: 0
        name: period
  yAxis:
    - component: oh-value-axis
      config:
        gridIndex: 0
        name: c€/kWh
        scale: true

This can be achieved by using an aggregate series instead of a time series.

No, that’s not possible AFAIK, but you could check if ECharts (our charting library) supports that, in that case you can likely set the required config through the code tab.

I was trying this, but was setting the x-axis incorrect. ok now:

1 Like

I tried it now via a markPoint: using a item which corresponds the current time & the numericState of the item which I’m displaying:

markPoint:
          data:
            - itemStyle:
                color: rgb(0, 0, 204)
              yAxis: =items.elia_data.numericState
              xAxis: =items.mqtt_dsmr_electricity.state
              name: current price
              value: =items.elia_data.numericState
              symbol: circle

It’s also possible to add a manual data-series, but I prefer my above method

- component: oh-data-series
      config:
        type: bar
        data:
          - =[items.mqtt_dsmr_electricity.displayState.split('-')[2].split(':')[0].split('
            ')[1],items.elia_data.numericState]
        xAxisIndex: 0
        yAxisIndex: 0
        color: rgb(255, 255, 255)
1 Like