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.
2 Likes
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.
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:
1 Like
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:
1 Like
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 
.
…
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
I think you are correct though that this require one of the 3.1 versions, though I can’t say for sure.
3 Likes
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
2 Likes
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 
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
2 Likes
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
