OH3 graph in Card/Widget?

Is it possible to show a graph on a layout page? I want a part of the page to show a graph and the rest cards/widgets.

Yes, but I think you will have to build your own custom widget with the chart. That widget can then be added to the layout page.

1 Like

Okey. I have searched for info but haven’t found anything. So it should be possible to have a graph that I have configured in oh3 to show up on a page?

If you have configured a graph through the UI and saved that configuration, then most likely you are talking about having created a chart page. These are standalone pages, like the layout pages, and although you can easily cross link them in any number of ways, you cannot easily include a page as a widget in the grid of a layout page.

However, all the pieces that make up the chart pages can also be accessed by the custom widget creation UI under the Developer Tools.
image
If you look through the docs page on the custom widget components you will see that there’s a whole section on the various components of a chart.

Then, if you go to the configuration page of one of the charts you have made, and press the code button at the top you will see the yaml code that configures that particular chat and how that code utilizes the various components. It’s yaml code just like that which you can use in the custom widget editor to create a card that has a chart on it.

If you have not done any widget creation yet, then this will take a little longer to learn than a simple UI configuration process, but will be worth it in the end as you will have opened up the most powerful feature of the Main UI’s interface builder.

Alternatively if you don’t want a full-fledged chart but are just interested in a single trendline, the oh-cells that you can include on layout pages have a built in feature to display one item’s persisted data in the background of the item:
image

I see where you are going. After clicking around I can se a whole new world opening. I will have to dig in more on how to create widgets.

OH3 is like a new world, just awesome!

Have you made any progress on this? I’m trying to do the same but so far my attempts at using oh-chart directly in a widget or on a normal page have been met with emptiness.

this might guide you to find the root cause in case your charts are empty. Make sure you have a persistence service up and running and check if the UI shows a graph:

Thank you, in my case I can see data in the graphs I create on an actual graph page. But I would like to create a custom widget which among other elements has a graph.

I’m guessing what I see when I click the ‘code’ button for a graph is actually hosted inside an ‘oh-graph-page’, simply embedding the same code in an ‘oh-graph’ component in a custom widget does not work.

I’m right now trying to find which slots are supported by the oh-graph component. Or if that is even the way to go… .vue files are completely new to me, so different from 6502 assembly :smiley:.

Hmm, I’m getting the impression that oh-chart is not yet available in 3.0.x, but only got added to the main branch in January.

The component above that @JustinG shared is not oh-chart but oh-trend.

I am using this a lot in my widgets, mostly f7 cards. Here is a snipplet:

            - component: oh-trend
              config:
                trendItem: =[props.itemTemp]
                style:
                  --f7-theme-color-bg-color: transparent
                  background: var(--f7-theme-color-bg-color)
                  filter: opacity(20%)
                  position: absolute
                  width: 100%
                  height: 100%
                  top: 0
                  left: 2
                  z-index: 0
1 Like

Not quite. The complete code from one of the chart pages that you build in the chart editor needs to be in an oh-chart component which itself is best served if it’s on something else with a background such as a card.

Chart card example yaml
component: f7-card
config: {}
slots:
  default:
    - component: oh-chart
      config:
        chartType: ""
        period: D
        label: Full Temperature Tracking
      slots:
        grid:
          - component: oh-chart-grid
            config:
              includeLabels: true
        xAxis:
          - component: oh-time-axis
            config:
              gridIndex: 0
        yAxis:
          - component: oh-value-axis
            config:
              gridIndex: 0
              name: °F
          - component: oh-value-axis
            config:
              gridIndex: 0
        series:
          - component: oh-time-series
            config:
              name: Master Bedroom
              gridIndex: 0
              xAxisIndex: 0
              yAxisIndex: 0
              type: line
              item: Sensor_MasterBedroom_Temperature
        tooltip:
          - component: oh-chart-tooltip
            config:
              confine: true
              smartFormatter: true
        legend:
          - component: oh-chart-legend
            config:
              bottom: 3
              type: scroll
        dataZoom:
          - component: oh-chart-datazoom
            config:
              type: inside

image

I think you are correct though that this require one of the 3.1 versions, though I can’t say for sure.

1 Like

I was indeed able to see at least the axes in a widget on my main branch development version (but I don’t have persistence set up there).

For now muelli1967’s oh-trend approach will do, maybe I’ll switch to one of the 3.1 milestones, maybe I’ll wait for the official release.

Thanks!

Decided to switch to the 3.1.0 milestone and I can indeed do what I intended there: put a graph in a custom widget with several other components:

2 Likes

Looks nice, maybe you can share the code?

Sure, this the widget. It has the items baked into it and does not yet have/use the configuration.

Unfortunately the graph does not update automatically.

uid: widget_with_chart
tags: []
props:
  parameters:
    - description: A text prop
      label: Prop 1
      name: prop1
      required: false
      type: TEXT
    - context: item
      description: An item to control
      label: Item
      name: item
      required: false
      type: TEXT
  parameterGroups: []
timestamp: May 31, 2021, 9:38:10 PM
component: f7-card
config:
  title: Power
  class:
    - padding-bottom
slots:
  default:
    - component: f7-row
      config:
        class:
          - margin-top
      slots:
        default:
          - component: f7-col
            config:
              width: 25
              class:
                - display-flex
                - flex-direction-column
                - align-content-space-around
            slots:
              default:
                - component: oh-gauge
                  config:
                    type: semicircle
                    item: StecaGridInverter_ACPower
                    borderColor: green
                    min: 0
                    max: 4000
                    valueTextColor: green
                    borderBgColor: gray
                    labelText: Generating
                    borderWidth: 25
                    class:
                      - margin-top
                      - margin-bottom
                - component: oh-gauge
                  config:
                    type: semicircle
                    item: calc_power_current_use
                    borderColor: red
                    min: 0
                    max: 4000
                    valueTextColor: red
                    borderBgColor: gray
                    labelText: Using
                    borderWidth: 25
                    class:
                      - margin-top
                      - margin-bottom
          - component: f7-col
            config:
              width: 75
            slots:
              default:
                - component: oh-chart
                  config:
                    chartType: ""
                    period: 12h
                    label: Power
                  slots:
                    grid:
                      - component: oh-chart-grid
                        config:
                          containLabel: false
                    xAxis:
                      - component: oh-time-axis
                        config:
                          gridIndex: 0
                    yAxis:
                      - component: oh-value-axis
                        config:
                          gridIndex: 0
                          name: W
                          min: 0
                    series:
                      - component: oh-time-series
                        config:
                          name: Generating
                          gridIndex: 0
                          xAxisIndex: 0
                          yAxisIndex: 0
                          type: line
                          color: green
                          item: StecaGridInverter_ACPower
                      - component: oh-time-series
                        config:
                          name: Using
                          gridIndex: 0
                          xAxisIndex: 0
                          yAxisIndex: 0
                          type: line
                          color: red
                          item: calc_power_current_use
                    tooltip:
                      - component: oh-chart-tooltip
                        config:
                          confine: true
                          smartFormatter: true
                    legend:
                      - component: oh-chart-legend
                        config:
                          bottom: 3
                          type: scroll
                    dataZoom:
                      - component: oh-chart-datazoom
                        config:
                          type: inside

1 Like

Thank your for the Code. The semicircle is working for me, the graph not.
Looks like I need to update my system from 3.0.2 to 3.1 :frowning:

Correct, the graph component is not available in custom widgets prior to 3.1.0.

Great widget Daniel, thanks!
I took the chance to improve it with Props settings, so it’s more flexible.
Here it is:

uid: widget_with_chart
tags: []
props:
  parameters:
    - description: Title of the widget
      label: Title
      name: title
      required: false
      type: TEXT
    - description: 1st gauge
      label: Gauge 1 label
      name: gauge1
      required: false
      type: TEXT
    - description: 1st gauge MAX
      label: Gauge 1 limit
      name: gauge1max
      required: false
      type: TEXT
    - description: 2nd gauge
      label: Gauge 2 label
      name: gauge2
      required: false
      type: TEXT
    - description: 2nd gauge MAX
      label: Gauge 2 limit
      name: gauge2max
      required: false
      type: TEXT
    - description: 1st chart
      label: Chart label 1
      name: chart1
      required: false
      type: TEXT
    - description: 2nd chart
      label: Chart label 2
      name: chart2
      required: false
      type: TEXT
    - description: Y-axis name
      label: Y-axis label
      name: axlabel
      required: false
      type: TEXT
    - context: item
      description: Item in gauge
      label: Gauge 1 item
      name: item1
      required: false
      type: TEXT
    - context: item
      description: Item in gauge
      label: Gauge 2 item
      name: item2
      required: false
      type: TEXT
    - context: item
      description: Item in chart
      label: Chart item 1
      name: item3
      required: false
      type: TEXT
    - context: item
      description: Item in chart
      label: Chart item 2
      name: item4
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Nov 6, 2021, 10:10:00 PM
component: f7-card
config:
  title: =props.title
  class:
    - padding-bottom
slots:
  default:
    - component: f7-row
      config:
        class:
          - margin-top
      slots:
        default:
          - component: f7-col
            config:
              width: 25
              class:
                - display-flex
                - flex-direction-column
                - align-content-space-around
            slots:
              default:
                - component: oh-gauge
                  config:
                    type: semicircle
                    item: =props.item1
                    borderColor: green
                    min: 0
                    max: =props.gauge1max
                    valueTextColor: green
                    valueFontSize: 22
                    borderBgColor: gray
                    labelText: =props.gauge1
                    borderWidth: 25
                    class:
                      - margin-top
                      - margin-bottom
                - component: oh-gauge
                  config:
                    type: semicircle
                    item: =props.item2
                    borderColor: red
                    min: 0
                    max: =props.gauge2max
                    valueTextColor: red
                    valueFontSize: 22
                    borderBgColor: gray
                    labelText: =props.gauge2
                    borderWidth: 25
                    class:
                      - margin-top
                      - margin-bottom
          - component: f7-col
            config:
              width: 75
            slots:
              default:
                - component: oh-chart
                  config:
                    chartType: ""
                    period: 12h
                    label: =props.chart1
                  slots:
                    grid:
                      - component: oh-chart-grid
                        config:
                          containLabel: false
                    xAxis:
                      - component: oh-time-axis
                        config:
                          gridIndex: 0
                    yAxis:
                      - component: oh-value-axis
                        config:
                          name: kWh
                          gridIndex: 0
                          min: 0
                    series:
                      - component: oh-time-series
                        config:
                          name: =props.chart1
                          gridIndex: 0
                          xAxisIndex: 0
                          yAxisIndex: 0
                          type: line
                          color: green
                          item: =props.item3
                      - component: oh-time-series
                        config:
                          name: =props.chart2
                          gridIndex: 0
                          xAxisIndex: 0
                          yAxisIndex: 0
                          type: line
                          color: red
                          item: =props.item4
                    tooltip:
                      - component: oh-chart-tooltip
                        config:
                          confine: true
                          smartFormatter: true
                    legend:
                      - component: oh-chart-legend
                        config:
                          bottom: 3
                          type: scroll
                    dataZoom:
                      - component: oh-chart-datazoom
                        config:
                          type: inside

1 Like

Hi
Unfortunately this widget doesn’t work…

Can’t set anything in the config can someone help me?
Or is it the code

I created the code under settings widgets…

Thanks

Have no idea why this isn’t working OH3.1.1 is installed!

…have a look in the german forum where you also posted your question.

Cheers - Peter