OH3 Charts using markLine - different symbols

Setup, Configuration and Use Beginners
, ,
1

Hi

I have been using the Charts feature and have made some progress getting some custom stuff done. But I am stuck on how to set the start and end symbols of the markLine.

image
image1698Ă—325 16.5 KB

I have worked out how to change the colour and add labels etc. But have no idea how to change the end symbol. Tried all the resources I can find but no luck.

Hoping for some guidance/ideas?

My current code snippet:

    - component: oh-time-series
      config:
        name: Shelly UNI Voltage ADC
        gridIndex: 0
        xAxisIndex: 0
        yAxisIndex: 0
        type: line
        item: ShellyUNIshellyunie8db84d6b3e510163199230_VoltageADC
        markLine:
          data:
            - name: Charging
              label:
                formatter: Charging
                position: end
                show: true
              yAxis: 27.70
              symbol: diamond
              lineStyle:
                color: red
                type: solid
            - name: Idling
              label:
                formatter: Idling
                position: end
                show: true            
              yAxis: 25.50
              symbol: rectangle
              lineStyle:
                color: green
                type: solid
            - name: Discharging
              label:
                formatter: Discharging
                position: end
                show: true            
              yAxis: 23.00
              symbol: rectangle
              lineStyle:
                color: green
                type: solid

Thanks
Mark

1 Like
2

Seems like there is a difference between:
https://echarts.apache.org/en/option.html#series-line.markLine.symbol and https://echarts.apache.org/en/option.html#series-line.markLine.data.0.symbol
i.e. for some reason you can only choose the start symbol of an individual line, but you can configure both ends of all lines in a series (with an array).

So

markLine:
  symbol:
    - none
    - square
  data:
    ...
1 Like
3

Thank you. Would never have found that…

Can you help with markArea as well? How do you define the area to be marked. Not seeing any examples of this at all. Want to just mark an area between two yAxis values in a colour?

Tried:

        markArea:
          data:
            name: Test
            yAxis: 
             - 0
             - 22

Looking for something like (but on yAxis):

      markArea: {
        itemStyle: {
          color: 'rgba(255, 173, 177, 0.4)'
        },
        data: [
          [
            {
              name: 'Morning Peak',
              xAxis: '07:30'
            },
            {
              xAxis: '10:00'
            }
          ],
          [
            {
              name: 'Evening Peak',
              xAxis: '17:30'
            },
            {
              xAxis: '21:15'
            }

image
image1043Ă—781 30.8 KB

Also, see that in the docs:

Anatomy of a Chart Page

Charts are based on the Apache ECharts library. The Cheat Sheet (opens new window)on EChart’s website offers an interactive illustration of the concepts used in it. The openHAB UI currently supports only a subset of those:

  • Series: Bar, Line, Pie, Heatmap, Scatter, Gauge
  • Coordinates: Grid, Calendar
  • Other Components: Title, Legend, Tooltip, MarkPoint, MarkLine, MarkArea, DataZoon, VisualMap, Toolbox

Should the component names not match the case (e.g. markLine, markArea, etc)?

Plan to submit some examples for the docs once I have an idea of how to get some more stuff working.

Really not clear on how to convert the cheat sheet examples to OH components.

Thanks
Mark

4

All the OH3 examples seem to be for a markArea below an item.

Anyone know if markArea can be used just to colour a range for highlighting etc?

5

data is an array of arrays.
So in YAML (you can use an online tool to convert JSON to YAML) it ends up like this:

    - component: oh-time-series
      config:
        name: Living Room Temp.
        gridIndex: 0
        xAxisIndex: 0
        yAxisIndex: 0
        type: line
        item: Temperature_GF_Living
        markArea:
          silent: true
          data:
            - - name: High Range
                yAxis: 18
                itemStyle:
                  color: rgba(255, 173, 177, 0.4)
              - yAxis: 22
            - - name: Low Range
                yAxis: 10
              - yAxis: 12
                itemStyle:
                  color: rgba(177, 173, 255, 0.4)

note the two - in a row.
Tried on https://demo.openhab.org/settings/pages/chart/chart_example_combined

image
image852Ă—548 15.7 KB

1 Like
6

Thank you. Exactly what I was looking for (as you can see we have had some power issues in the last while :frowning:

image
image1917Ă—905 52.1 KB

Now just to work on the colours etc. Will probably remove the markLine in this case.

BTW I had a look at the demo site and it looks like the example is not there. Did you just test there temporarily or did you intend to leave there as an example for the future?

Cheers
Mark

7

Hi Yannick

I have been trying to do some further formatting on my charts (position the name/label etc.

Found a few examples but not able to convert themt o YAML as you suggested. THey all give me an error:

Unexpected Token O In JSON At Position 0 - I used the same example as above too:

echart example.txt (1.8 KB)

Any idea what I am doing wrong and or how to position the label and make it bold?

So in your example position “High Range” left and male it BOLD?

Many Thanks
Mark