stefan13
October 27, 2023, 3:58pm
1
Hello,
I try to build a Chart diagramm with variable chartType, changing the chartType using a button action, however it doesn’t work as expected.
I tried the following syntax in oh-button config, using for example month or year as chartType.
- component: oh-button
config:
action: variable
actionVariable: varPeriod
actionVariableValue: "[chartType: month]"
- component: oh-button
config:
action: variable
actionVariable: varPeriod
actionVariableValue: "month"
- component: oh-button
config:
action: variable
actionVariable: varPeriod
actionVariableValue:
- chartType: "year"
In oh-chart I assigned the vars.varPeriod variableValue as chartType
- component: oh-chart
config:
chartType: =vars.varPeriod
Is the the wrong approach to change the chartType, or is the syntax I use wrong?
Thanks for a hint
Stefan
hmerk
October 27, 2023, 4:12pm
2
I would say, this is the correct syntax
- component: oh-button
config:
action: variable
actionVariable: varPeriod
actionVariableValue: "month"
apart from you are not initializing the actionVariable at start, so You need to che if it is set, alternatively give it a default
- component: oh-chart
config:
chartType: '=vars.varPeriod ? vars.varPeriod : "month"'
stefan13
October 28, 2023, 8:19am
3
Unfortunately this doesn’t work for me.chartType command defined.
JustinG
October 28, 2023, 2:16pm
4
Historically, not all configuration options of the charts where evaluated by the expression parser. Most of them have been reworked by now so they can be expressions as well. It is possible that chartType simply is one of the few remaining that cannot be set to a dynamic value.
1 Like
stefan13
October 30, 2023, 6:45pm
5
Many thanks Justin,
is it possible to get this feature added? Or do you have a better approach than the workaround I use? oh-chart section for every view I want
Many thanks
uid: widget_Gasverbrauch_Wo_Mo_v2
tags: []
props:
parameters:
- description: A text prop
label: Prop 1
name: prop1
required: false
type: TEXT
- context: item
default: PC_Counter_3_Gas
description: Gas / Strom Verbrauch
label: Item
name: prop_itemVerbrauch
required: false
type: TEXT
- context: item
default: item_Netatmo_Aussen_Temperatur
description: Temperatur Item
label: Item
name: prop_itemTemperatur
required: false
type: TEXT
parameterGroups: []
timestamp: Oct 30, 2023, 7:40:43 PM
component: f7-card
config:
backdrop: false
class:
- no-padding
expandable: false
style:
--f7-theme-color: var(--f7-text-color)
border-radius: var(--f7-card-expandable-border-radius)
box-shadow: var(--f7-card-expandable-box-shadow)
height: 400px
margin-bottom: 10px
margin-left: 5px
margin-right: 5px
margin-top: 10px
width: auto
swipeToClose: false
slots:
default:
- component: oh-link
config:
action: navigate
actionPage: page:Gasverbrauch_Monat
actionPageTransition: f7-dive
iconF7: expand
style:
margin-left: 10px
margin-top: 10px
opacity: 60%
position: absolute
z-index: 1
- component: f7-segmented
config:
class: segmented-round
style:
height: 27px
margin-left: 290px
position: absolute
top: 17px
width: 250px
z-index: 2
slots:
default:
- component: oh-button
config:
action: variable
actionVariable: varPeriod
actionVariableValue: day
iconSize: 20px
style:
--f7-button-bg-color: "=(vars.varPeriod == 'day' || vars.varPeriod == undefined) ? '#87c5f7' : '#e7f3fe' "
--f7-button-hover-bg-color: "#e7f3fe"
--f7-button-pressed-bg-color: "#9dcefb"
height: 100%
width: 100%
text: Tag
textColor: var(--f7-text-editor-text-color)
- component: oh-button
config:
action: variable
actionVariable: varPeriod
actionVariableValue: month
iconSize: 20px
style:
--f7-button-bg-color: "=(vars.varPeriod == 'month') ? '#87c5f7' : '#e7f3fe' "
--f7-button-hover-bg-color: "#e7f3fe"
--f7-button-pressed-bg-color: "#9dcefb"
height: 100%
width: 100%
text: Monat
- component: oh-button
config:
action: variable
actionVariable: varPeriod
actionVariableValue: year
iconSize: 20px
style:
--f7-button-bg-color: "=(vars.varPeriod == 'year') ? '#87c5f7' : '#e7f3fe' "
--f7-button-hover-bg-color: "#e7f3fe"
--f7-button-pressed-bg-color: "#9dcefb"
height: 100%
width: 100%
text: Jahr
visible: true
- component: Label
config:
style:
margin-left: 550px
text: =vars.varPeriod
- component: oh-chart
config:
visible: "=vars.varPeriod == 'year' ? true : false"
chartType: year
height: 100%
sidebar: true
slots:
calendar: []
grid:
- component: oh-chart-grid
config:
height: 70%
includeLabels: true
left: 70
right: 70
show: false
top: 70
legend:
- component: oh-chart-legend
config:
left: 70
orient: horizontal
top: 0
width: 100
series:
- component: oh-aggregate-series
config:
action: navigate
actionPage: page:Gasverbrauch_Stunde
actionRuleContext: date
aggregationFunction: diff_last
color: orange
dimension1: month
gridIndex: 0
id: 0
item: =props.prop_itemVerbrauch
markLine:
data:
- type: average
markPoint:
data:
- name: min
type: min
- name: max
type: max
name: Gasverbrauch Jahr
type: bar
xAxisIndex: 0
yAxisIndex: 0
- component: oh-aggregate-series
config:
aggregationFunction: average
color: lightblue
dimension1: month
gridIndex: 0
id: 1
item: =props.prop_itemTemperatur
name: Temperatur Durchschnitt
type: line
xAxisIndex: 0
yAxisIndex: 1
tooltip:
- component: oh-chart-tooltip
config:
confine: false
show: true
visualMap:
- component: oh-chart-visualmap
config:
calculable: true
max: "150"
min: "0"
orient: vertical
seriesIndex: 0
show: false
type: continuous
xAxis:
- component: oh-category-axis
config:
categoryType: year
gridIndex: 0
monthFormat: short
name: Tag
nameGap: 30
nameLocation: center
weekdayFormat: short
yAxis:
- component: oh-value-axis
config:
axisLabel:
formatter: "{value} m³"
gridIndex: 0
max: "150"
name: Verbrauch
nameGap: 40
nameLocation: center
- component: oh-value-axis
config:
axisLabel:
formatter: "{value} °C"
gridIndex: 0
name: Temperatur
nameGap: 40
nameLocation: center
scale: true
- component: oh-chart
config:
visible: "=vars.varPeriod == 'month' ? true : false"
chartType: month
height: 100%
sidebar: true
slots:
calendar: []
grid:
- component: oh-chart-grid
config:
height: 70%
includeLabels: true
left: 70
right: 70
show: false
top: 70
legend:
- component: oh-chart-legend
config:
left: 70
orient: horizontal
top: 0
width: 100
series:
- component: oh-aggregate-series
config:
action: navigate
actionPage: page:Gasverbrauch_Stunde
actionRuleContext: date
aggregationFunction: diff_last
color: orange
dimension1: date
gridIndex: 0
id: 0
item: =props.prop_itemVerbrauch
markLine:
data:
- type: average
markPoint:
data:
- name: min
type: min
- name: max
type: max
name: Gasverbrauch Monat
type: bar
xAxisIndex: 0
yAxisIndex: 0
- component: oh-aggregate-series
config:
aggregationFunction: average
color: lightblue
dimension1: date
gridIndex: 0
id: 1
item: =props.prop_itemTemperatur
name: Temperatur Durchschnitt
type: line
xAxisIndex: 0
yAxisIndex: 1
tooltip:
- component: oh-chart-tooltip
config:
confine: false
show: true
visualMap:
- component: oh-chart-visualmap
config:
calculable: true
max: "10"
min: "1"
orient: vertical
seriesIndex: 0
show: false
type: continuous
xAxis:
- component: oh-category-axis
config:
categoryType: month
gridIndex: 0
monthFormat: short
name: Tag
nameGap: 30
nameLocation: center
weekdayFormat: short
yAxis:
- component: oh-value-axis
config:
axisLabel:
formatter: "{value} m³"
gridIndex: 0
max: "10"
name: Verbrauch
nameGap: 40
nameLocation: center
- component: oh-value-axis
config:
axisLabel:
formatter: "{value} °C"
gridIndex: 0
name: Temperatur
nameGap: 40
nameLocation: center
scale: true
- component: oh-chart
config:
visible: "=vars.varPeriod == 'day' || vars.varPeriod == undefined ? true : false"
chartType: day
height: 100%
sidebar: true
slots:
calendar: []
grid:
- component: oh-chart-grid
config:
height: 70%
includeLabels: true
left: 70
right: 70
show: false
top: 70
legend:
- component: oh-chart-legend
config:
left: 70
orient: horizontal
top: 0
width: 100
series:
- component: oh-aggregate-series
config:
action: navigate
actionPage: page:Gasverbrauch_Stunde
actionRuleContext: date
aggregationFunction: diff_last
color: orange
dimension1: hour
gridIndex: 0
id: 0
item: =props.prop_itemVerbrauch
markLine:
data:
- type: average
markPoint:
data:
- name: min
type: min
- name: max
type: max
name: Gasverbrauch Tag
type: bar
xAxisIndex: 0
yAxisIndex: 0
- component: oh-aggregate-series
config:
aggregationFunction: average
color: lightblue
dimension1: hour
gridIndex: 0
id: 1
item: =props.prop_itemTemperatur
name: Temperatur Durchschnitt
type: line
xAxisIndex: 0
yAxisIndex: 1
tooltip:
- component: oh-chart-tooltip
config:
confine: false
show: true
visualMap:
- component: oh-chart-visualmap
config:
calculable: true
max: "1"
min: "0"
orient: vertical
seriesIndex: 0
show: false
type: continuous
xAxis:
- component: oh-category-axis
config:
categoryType: day
gridIndex: 0
monthFormat: short
weekdayFormat: short
yAxis:
- component: oh-value-axis
config:
axisLabel:
formatter: "{value} m³"
gridIndex: 0
max: "1"
name: Verbrauch
nameGap: 40
nameLocation: center
- component: oh-value-axis
config:
axisLabel:
formatter: "{value} °C"
gridIndex: 0
name: Temperatur
nameGap: 40
nameLocation: center
scale: true
JustinG
October 30, 2023, 7:12pm
6
You can always file an issue on the ui repository. That’s no guarantee, but it’s the best way to make sure that the ui devs know this feature lacking.
MartOs
February 16, 2024, 10:31am
7
This has been annoying me too recently
