JustinG
(JustinG)
March 24, 2021, 3:09am
10
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.
denist
(Denis)
November 6, 2021, 9:18pm
17
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
Gexle
(Gexle)
May 7, 2022, 11:27am
18
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
Gexle
(Gexle)
May 7, 2022, 1:29pm
19
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
dastrix80
(Kris K)
August 12, 2022, 4:20am
21
Looks good. My radial gauges work, but it wont chart the same figures, any thoughts as to why?
denist
(Denis)
August 15, 2022, 6:58am
22
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.
denist
(Denis)
August 15, 2022, 2:09pm
24
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.
dastrix80
(Kris K)
August 16, 2022, 9:20pm
25
Agree, I entered the items but for some reason its not charting
denist
(Denis)
August 17, 2022, 5:30am
26
Are these items showing if you use a normal chart page? If not, you might have a persistence issue. Otherwise I don’t know… Some default suggestions: check OH is updated, restart the system.
dastrix80
(Kris K)
August 18, 2022, 12:08am
27
If i just overlay gSolar_EnergyDay on a normal chart, it works. If i use that inside the widget, it doesnt display
11194
(Вася Пупкин)
August 18, 2022, 12:51am
28
I have the same issue with a code like:
- component: oh-time-series
config:
gridIndex: 0
item: =props.person
name: =props.title
type: line
xAxisIndex: 0
yAxisIndex: 0
slots:
markArea:
- component: oh-mark-area
config:
name: =props.title
item: =props.person
The chart is receiving =props.title literally as a string, not as a pointer to item.
Marekka
(Marekka)
April 18, 2023, 1:55pm
29
Thank you this is exactly what i was looking for