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
Gauges and charts are independent items, have you set all props?
In the past I had general issues with charts when using persistence as in the old OH2. I just removed the persistence config file and let OH3 take care.
If you intend to use the widget, it should be much easier than that… Sorry if I am misunderstanding, but once you have the widget as per the code above, you should just insert this widget in a layout page and then go through the widget configuration: there you have the fields to enter your items to be shown in the gauges and in the charts.
