Chart with item deactivated by default

Add-ons UIs
1

Hi,

I’m trying to create a chart page that offers an item but is deactivated i.e. has no chart line/bar until the user interactively enables it by clicking in the header line with the available items.
Does anyone know how to accomplish that ?

Background is that I would need three scales for which there is no optically satisfying solution I know of. So I want to enable the user to toggle between items that have different scales.

2

The echarts legend has a selected property which is an object containing the series names and true or false for initial draw state. So in the oh-chart-legend on your page you would have a config such as:

- component: oh-chart-legend
  config:
    bottom: 3
    type: scroll
    selected:
      series_1_name: true
      series_2_name: false
      series_3_name: false

Additionally (and perhaps more easily), if you only want one series displayed at a time you can just set selectedMode instead:

- component: oh-chart-legend
  config:
    bottom: 3
    type: scroll
    selectedMode: single

With that the first series will be automatically selected and the others unselected and clicking on any series will switch to just that series.

Here’s the echarts legend docs:

1 Like
3

Great! To the point what I was looking for. Once more thanks a lot, Justin.

4

Side note: oh-chart-legend - Legend | openHAB isn’t exactly useful, maybe you could give it an update?

PS: do you also know the option that allows the user to interactively add desired values to a predefined chart ? thanks again

5

It’s true, there are enough questions about chart customization coming up these days it might be time for an advanced chart doc page. There are certainly users with a better grasp of the charts than I have who would be more well suited for this, however.

You cannot, to my knowledge, add data points to any series that has been generated from an item’s historical data. You can add a generic oh-data-series which allows you to put whatever data you want into an array in it’s data config parameter.

For example, this series:

    - component: oh-data-series
      config:
        type: line
        data:
          - =[0,60]
          - =[1,60]
        xAxisIndex: 1
        yAxisIndex: 0

Just draws a line across one of my temperature charts at 60 degrees.