OH3: Charts/Graphs/Plots

Hello, it’s getting fun to work with the new UI! Now I would like to integrate charts. I have read somewhere that the new UI is so powerful that tools like Grafana are no longer needed to generate graphs as shown in the example.

I have no idea how to start. Can anyone give me an example?

I’m mainly using RRD4J for this right now. I tried it briefly with InfluxDB and it didn’t work but I didn’t look into whether that was my problem or a bug yet.

I have rrd4j set as my default and I currently have a profile to save everything. There is a reason for this. In MainUI you will find scattered here and there a button labeled “Analyze”. Clicking on that will generate a chart of what ever you are looking at. Here is the chart I see when I click on “Analyze All” on my Humidity card in the “Properties” tab. I show this because I didn’t set anything up to generate this chart. All I had to do was build the semantic model so my humidity sensors are properly tagged and make sure the humidity Items are saved to the default persistence.

You can change how the chart looks in controls and change the time period by clicking D in the upper right corner.

You can even put the chart of an Item behind the Item’s card so no matter where you look at it you can see a history of it’s state.

And there’s that "Analyze button again.

I bring these up to point out that a lot of charting capability “just happens”. You don’t have to do much of anything to get them.

If you want to create a chart manually though, go to Settings -> Pages and click the + icon at the bottom right. Choose “Chart” from the list.

I don’t know what everything here does so you’ll have to play around . To create a simple line chart:

  1. give it a reasonable ID, Label, and set the visibility settings as desired.
  2. Change the Chart Type and Initial Period as desired.
  3. Add Grid
    a. Click the + in the upper left to add the Y-axis, click the newly created axis to configure it

    b. Click the + in the lower right to add the X axis, click the newly created axis to configure it
    c. Click “Add Time Series” and then click the menu to edit the series

    d. Choose the Item and other charting parameters for that time series.
    e. Repeat c-d for all the Items you want to chart.

    f. You can add additional components like tool tips, a legend, title, etc at the bottom.
  4. Repeat 3 to add additional charts to the page.

At any time you can toggle the live view in the bottom right corner or by typing ctrl-r.

Save the page as you go (ctrl-s, button at top right).

When done, depending on the settings you chose, you will see a new entry in the left menu for the new chart page.

Obviously this doesn’t cover everything but it should give you enough to get started.

1 Like

Hi,

Thanks for the introduction! For most cases the first approach, clicking on the default widget, is sufficient. The second approach, one chart per page is not interesting for me.
I think of a “Default Chart Widget” which I can assign directly to the item or group via metadata. Here you could probably develop your own widget, but I don’t have the starting point.

1 Like

Who said one chart per page? You can put as many charts on one page as you want. Just add another Grid (or one of the other ones). That’s why I have step 4.

Thank you, so far understood. But I like to combine different things like switches, status and diagrams. This is also propagated in the model approach of OH3.

What I have in mind is the possibility to combine diagrams in the pages with other things.

Maybe this can be done with the corresponding default widgets for the automatically generated views?

image

1 Like

I had the same question but i am not sure if its possible as charts are pages and its probably not possible to use them as widgets

On a side note, could you share the YAML for this one? seems good. thanks!!
image

So i am testing OH3 in a VM as well and ported some of my functionalities from OH2 to OH3.
I started generating pages and my approach was to create tabbed pages, one overview and one graph page.
While i can see my volumes from each speaker in a graph very nicely, i’m not able to show any switches in a graph. On the “analyze button” within the items i can see that there are persisted values, but a graph on a graph’s page is always empty.
Is there a known bug or am i missing anything?

If I remember correctly, the default database stores only numbers.

Okay, but why do i have persistency data on the item’s “analyze button” then?

rrd4j can save switches and contacts too. Here’s a chart of one of my contacts saved to rrd4j.

However, notice that it’s an area chart, not a line chart. What type of chart are you trying to create?

1 Like

i tried a line chart, what is an area chart? Aggregate series?

I don’t know for sure. This is how it charts by default when I click, on Analyze. When I open “controls” it says it’s an Area chart. I don’t know much more than that.

Yes i see the same in the “analyze” chart… Hm! Maybe this is not possible right now in the charts pages…

Hmm, could be dependent on the binding you use. It would be interesting to compare how switches are tagged herein.

Anything that you can do from Analyze should be possible from the Charts Pages. It’s the same code that drives both.

Also, you can click on the Analyze tab and save the chart that is created and use that elsewhere.

Beyond that I don’t know. We’ll need someone who knows more than I do to figure that out.

No, a Switch Item is a Switch Item and it doesn’t matter to Persistence (or anything else in OH) what type of binding it’s linked to. That’s sort of the whole point of Items in the first place.

Yeah, that’s a good hint, saving the chart from the analyze-button works! Will have a look in the “code” section what differs from mine! Thanks!!!

Due to the hint of @rlkoshak i found out the differences to show a switch item on a charts page.

If you add a time series in the pages chart builder a time series looks something like:

- component: oh-time-series
      config:
        gridIndex: 0
        xAxisIndex: 0
        yAxisIndex: 0
        type: line
        name: Bewohner
        item: presence

If you generate a chart from the “Analyze Button” the time series looks like:

- component: oh-time-series
      config:
        name: Bewohner
        gridIndex: 0
        xAxisIndex: 0
        yAxisIndex: 0
        type: line
        areaStyle: {}
      slots:
        markArea:
          - component: oh-mark-area
            config:
              name: presence
              item: presence

With that in mind you are able to generate Switch-Charts from within the pages-section! Thanks!

1 Like

Hello,
actually I am playing with the chart function of the main UI, very nice, thank you @ysc for this.
Can somebody give me a hint how to format the number on the axis in the code section. Actually I have a the number on the y axis like this example: 1,168.5 and I want to have this format: 1168,5.
Any Ideas?

Thank you!

Thanks @rlkoshak for sharing the way to prepare the chart page.

Let me ask a question related to Graphs as a part of Analyze for every Item.
Initialy it worked well, but suddenly, after I took time to define more precisely the semantic classes for all the Point, it display just the value for the Item, but after clicking Analyze, it is without any graph line.

Example what I set-up. For all Thermostat Thing Items i defined Point-Measurement instead of pure Point, and Point-SetPoint instead of Point.

Anyone has same experience and possible solution for it?

UPDATE: As I also have former OH2 items&sitemaps, I see that the Channels defined via Items can be well analyzed with a graph.



image