actionPage - Chart actual date

[stefan13 (Stefan)]

Hello,
I create some chart with a custom widget to display Gas and Power consumption.

I want to show the detailed day statistic, when a single day is clicked in the Month Overview page as below.

For this I use the action navigate function, to open a customer chart page.

action: navigate
actionPage: page:Gasverbrauch_Stunde

Is it possible to link the day I want to get the details for?
Currently always the actual day is opened, instead of the day the action was triggered for.

Many thanks
Stefan

[Marcel8584]

Hello Stefan,
I am actually trying to generate exactly the same widget you describe in your post. Have you made any progress on your question regarding how to reuse the date of something you pick in another chart? Thank you very much for your answer. If it would be possible, I would appreciate it if you could share your code.

Best regards
Marcel

[stefan13 (Stefan)]

Hello Marcel,

I didn’t make any progress for this requirement unfortunately.
I guess that you have to define a function using a click event as described here.

However, not sure how to achieve this in OH4 so far. Maybe an expert can support

I used a different approach for the time being, which is an acceptable workaround for me.
I added an option to choose between the different periods instead.

Best regards
Stefan

[wars (Ward)]

Good workaround!
Is this a full widget of a Page?

[stefan13 (Stefan)]

It’s a widget :

uid: widget_Gasverbrauch_Charts_v5
tags:
  - online
props:
  parameters:
    - description: A text prop
      label: Prop 1
      name: prop1
      required: false
      type: TEXT
    - context: item
      default: PC_LAN2_Gaszaehler_m3
      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: Nov 25, 2023, 6:00:36 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: 100%
  swipeToClose: false
slots:
  default:
    - component: oh-link
      config:
        action: navigate
        actionPage: page:Gasverbrauch_Stunde
        actionPageTransition: f7-dive
        iconF7: expand
        style:
          margin-left: 10px
          margin-top: 10px
          opacity: 60%
          position: absolute
          z-index: 1
        visible: "(=vars.varPeriod == 'day' | vars.varPeriod == undefined) ? true : false"
    - component: oh-link
      config:
        action: navigate
        actionPage: page:Gasverbrauch_Woche
        actionPageTransition: f7-dive
        iconF7: expand
        style:
          margin-left: 10px
          margin-top: 10px
          opacity: 60%
          position: absolute
          z-index: 1
        visible: "=vars.varPeriod == 'week'  ? true : false"
    - 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
        visible: "=vars.varPeriod == 'month'  ? true : false"
    - component: oh-link
      config:
        action: navigate
        actionPage: page:Gasverbrauch_Jahr
        actionPageTransition: f7-dive
        iconF7: expand
        style:
          margin-left: 10px
          margin-top: 10px
          opacity: 60%
          position: absolute
          z-index: 1
        visible: "=vars.varPeriod == 'year'  ? true : false"
    - component: f7-segmented
      config:
        class: segmented-round
        style:
          bottom: 0px
          height: 30px
          left: 0px
          position: absolute
          width: 100%
          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) ? 'transparent' :   '#f0f0f0'  "
                --f7-button-hover-bg-color: "#e7f3fe"
                --f7-button-pressed-bg-color: "#9dcefb"
                height: 100%
                width: 100%
              text: Tag
              textColor: "=(vars.varPeriod == 'day' || vars.varPeriod == undefined ) ? 'transparent' :   'black'  "
          - component: oh-button
            config:
              action: variable
              actionVariable: varPeriod
              actionVariableValue: week
              iconSize: 20px
              style:
                --f7-button-bg-color: "=(vars.varPeriod == 'week' ) ? 'transparent' :   '#f0f0f0'  "
                --f7-button-hover-bg-color: "#e7f3fe"
                --f7-button-pressed-bg-color: "#9dcefb"
                height: 100%
                width: 100%
              text: Woche
              textColor: "=(vars.varPeriod == 'week' ) ? 'transparent' :   'black'  "
          - component: oh-button
            config:
              action: variable
              actionVariable: varPeriod
              actionVariableValue: month
              iconSize: 20px
              style:
                --f7-button-bg-color: "=(vars.varPeriod == 'month')  ? 'transparent' :   '#f0f0f0'  "
                --f7-button-hover-bg-color: "#e7f3fe"
                --f7-button-pressed-bg-color: "#9dcefb"
                height: 100%
                width: 100%
              text: Monat
              textColor: "=(vars.varPeriod == 'month' ) ? 'transparent' :   'black'  "
          - component: oh-button
            config:
              action: variable
              actionVariable: varPeriod
              actionVariableValue: year
              iconSize: 20px
              style:
                --f7-button-bg-color: "=(vars.varPeriod == 'year') ? 'transparent' :   '#f0f0f0'  "
                --f7-button-hover-bg-color: "#e7f3fe"
                --f7-button-pressed-bg-color: "#9dcefb"
                height: 100%
                width: 100%
              text: Jahr
              textColor: "=(vars.varPeriod == 'year' ) ? 'transparent' :   'black'  "
              visible: true
    - component: oh-chart
      config:
        chartType: year
        height: 100%
        options:
          backgroundColor: transparent
        sidebar: true
        visible: "=vars.varPeriod == 'year'  ? true : false"
      slots:
        calendar: []
        grid:
          - component: oh-chart-grid
            config:
              height: 60%
              includeLabels: true
              left: 70
              right: 70
              show: false
              top: 80
        legend:
          - component: oh-chart-legend
            config:
              left: 70
              orient: vertical
              show: true
              top: 10
              width: 600
        series:
          - component: oh-aggregate-series
            config:
              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: Verbrauch
              type: bar
              xAxisIndex: 0
              yAxisIndex: 0
              label:
                show: false
                formatter: =v=>Number.parseFloat(v.data[1]).toFixed(1) + " m³"
          - component: oh-aggregate-series
            config:
              aggregationFunction: average
              color: lightblue
              dimension1: month
              gridIndex: 0
              id: 1
              item: =props.prop_itemTemperatur
              lineStyle:
                width: 1
              name: Temperatur
              type: line
              xAxisIndex: 0
              yAxisIndex: 1
        tooltip:
          - component: oh-chart-tooltip
            config:
              confine: true
              show: true
              trigger: axis
        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:
        chartType: isoWeek
        height: 100%
        options:
          backgroundColor: transparent
        sidebar: true
        visible: "=vars.varPeriod == 'week' ? true : false"
      slots:
        grid:
          - component: oh-chart-grid
            config:
              height: 60%
              includeLabels: true
              left: 70
              right: 70
              show: false
              top: 80
        legend:
          - component: oh-chart-legend
            config:
              left: 70
              orient: vertical
              show: true
              top: 10
              width: 600
        series:
          - component: oh-aggregate-series
            config:
              aggregationFunction: diff_last
              color: orange
              dimension1: isoWeekday
              gridIndex: 0
              id: 0
              item: =props.prop_itemVerbrauch
              markLine:
                data:
                  - type: average
              name: Verbrauch
              type: bar
              xAxisIndex: 0
              yAxisIndex: 0
              label:
                show: false
                formatter: =v=>Number.parseFloat(v.data[1]).toFixed(1) + " m³"
          - component: oh-aggregate-series
            config:
              aggregationFunction: average
              color: lightblue
              dimension1: isoWeekday
              gridIndex: 0
              id: 1
              item: =props.prop_itemTemperatur
              lineStyle:
                width: 1
              name: Temperatur
              type: line
              xAxisIndex: 0
              yAxisIndex: 1
        tooltip:
          - component: oh-chart-tooltip
            config:
              confine: true
              show: true
              trigger: axis
        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: week
              gridIndex: 0
              monthFormat: short
              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
              show: true
    - component: oh-chart
      config:
        chartType: month
        height: 100%
        options:
          backgroundColor: transparent
        sidebar: true
        visible: "=vars.varPeriod == 'month' ? true : false"
      slots:
        calendar: []
        grid:
          - component: oh-chart-grid
            config:
              height: 60%
              includeLabels: true
              left: 70
              right: 70
              show: false
              top: 80
        legend:
          - component: oh-chart-legend
            config:
              left: 70
              orient: vertical
              show: true
              top: 10
              width: 600
        series:
          - component: oh-aggregate-series
            config:
              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: Verbrauch
              type: bar
              xAxisIndex: 0
              yAxisIndex: 0
              label:
                show: false
                formatter: =v=>Number.parseFloat(v.data[1]).toFixed(1) + " m³"
          - component: oh-aggregate-series
            config:
              aggregationFunction: average
              color: lightblue
              dimension1: date
              gridIndex: 0
              id: 1
              item: =props.prop_itemTemperatur
              lineStyle:
                width: 1
              name: Temperatur
              type: line
              xAxisIndex: 0
              yAxisIndex: 1
        tooltip:
          - component: oh-chart-tooltip
            config:
              confine: true
              show: true
              trigger: axis
        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:
        chartType: day
        height: 100%
        options:
          backgroundColor: transparent
        sidebar: true
        visible: "=vars.varPeriod == 'day' || vars.varPeriod == undefined ? true : false"
      slots:
        calendar: []
        grid:
          - component: oh-chart-grid
            config:
              height: 60%
              includeLabels: true
              left: 70
              right: 70
              show: false
              top: 80
        legend:
          - component: oh-chart-legend
            config:
              left: 70
              orient: vertical
              show: true
              top: 10
              width: 600
        series:
          - component: oh-aggregate-series
            config:
              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: Verbrauch
              type: bar
              xAxisIndex: 0
              yAxisIndex: 0
              label:
                show: false
                formatter: =v=>Number.parseFloat(v.data[1]).toFixed(1) + " m³"
          - component: oh-aggregate-series
            config:
              aggregationFunction: average
              color: lightblue
              dimension1: hour
              gridIndex: 0
              id: 1
              item: =props.prop_itemTemperatur
              lineStyle:
                width: 1
              name: Temperatur
              type: line
              xAxisIndex: 0
              yAxisIndex: 1
        tooltip:
          - component: oh-chart-tooltip
            config:
              confine: true
              show: true
              trigger: axis
        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

[wars (Ward)]

Thanks for sharing, I’m gonna use this for some inspiration

Do you have competely different charts in the pages (eg Gasverbrauch_Stunde? Or did you added the same widget on these pages?

[Chriss89 (Christian Nordheider)]

Hello Stefan,

thank you for your widget!
I did some modifications to make it a bit more flexible.
The name of the consumptions can be add to the legend and the unit of the yAxis can be set.
Both can be customized in the props. Now it can be used for gas, electricity and water or any other consuption.
But I have one issue. If I remove the min and max values form the visualmaps (only for month and year) I do not get any bars at all.
For the day and week chart it does work without a min and max value.
Do you have any idea how to disable the second aggregat series and the second yaxis if the item is not set?

uid: widget_Gasverbrauch_Charts_v5_modified
tags:
  - online
props:
  parameters:
    - description: 
      label: Name des Verbrauchs
      name: name1
      required: false
      type: TEXT
    - context: item
      default: 
      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
    - description: A text prop
      label: Einheit des Verbrauchers
      name: unit
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Nov 28, 2023, 9:05:19 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: 100%
  swipeToClose: false
slots:
  default:
    - component: oh-link
      config:
        action: navigate
        actionPage: page:Gasverbrauch_Stunde
        actionPageTransition: f7-dive
        iconF7: expand
        style:
          margin-left: 10px
          margin-top: 10px
          opacity: 60%
          position: absolute
          z-index: 1
        visible: "(=vars.varPeriod == 'day' | vars.varPeriod == undefined) ? true : false"
    - component: oh-link
      config:
        action: navigate
        actionPage: page:Gasverbrauch_Woche
        actionPageTransition: f7-dive
        iconF7: expand
        style:
          margin-left: 10px
          margin-top: 10px
          opacity: 60%
          position: absolute
          z-index: 1
        visible: "=vars.varPeriod == 'week'  ? true : false"
    - 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
        visible: "=vars.varPeriod == 'month'  ? true : false"
    - component: oh-link
      config:
        action: navigate
        actionPage: page:Gasverbrauch_Jahr
        actionPageTransition: f7-dive
        iconF7: expand
        style:
          margin-left: 10px
          margin-top: 10px
          opacity: 60%
          position: absolute
          z-index: 1
        visible: "=vars.varPeriod == 'year'  ? true : false"
    - component: f7-segmented
      config:
        class: segmented-round
        style:
          bottom: 0px
          height: 30px
          left: 0px
          position: absolute
          width: 100%
          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) ? 'transparent' :   '#f0f0f0'  "
                --f7-button-hover-bg-color: "#e7f3fe"
                --f7-button-pressed-bg-color: "#9dcefb"
                height: 100%
                width: 100%
              text: Tag
              textColor: "=(vars.varPeriod == 'day' || vars.varPeriod == undefined ) ? 'transparent' :   'black'  "
          - component: oh-button
            config:
              action: variable
              actionVariable: varPeriod
              actionVariableValue: week
              iconSize: 20px
              style:
                --f7-button-bg-color: "=(vars.varPeriod == 'week' ) ? 'transparent' :   '#f0f0f0'  "
                --f7-button-hover-bg-color: "#e7f3fe"
                --f7-button-pressed-bg-color: "#9dcefb"
                height: 100%
                width: 100%
              text: Woche
              textColor: "=(vars.varPeriod == 'week' ) ? 'transparent' :   'black'  "
          - component: oh-button
            config:
              action: variable
              actionVariable: varPeriod
              actionVariableValue: month
              iconSize: 20px
              style:
                --f7-button-bg-color: "=(vars.varPeriod == 'month')  ? 'transparent' :   '#f0f0f0'  "
                --f7-button-hover-bg-color: "#e7f3fe"
                --f7-button-pressed-bg-color: "#9dcefb"
                height: 100%
                width: 100%
              text: Monat
              textColor: "=(vars.varPeriod == 'month' ) ? 'transparent' :   'black'  "
          - component: oh-button
            config:
              action: variable
              actionVariable: varPeriod
              actionVariableValue: year
              iconSize: 20px
              style:
                --f7-button-bg-color: "=(vars.varPeriod == 'year') ? 'transparent' :   '#f0f0f0'  "
                --f7-button-hover-bg-color: "#e7f3fe"
                --f7-button-pressed-bg-color: "#9dcefb"
                height: 100%
                width: 100%
              text: Jahr
              textColor: "=(vars.varPeriod == 'year' ) ? 'transparent' :   'black'  "
              visible: true
    - component: oh-chart
      config:
        chartType: year
        height: 100%
        options:
          backgroundColor: transparent
        sidebar: true
        visible: "=vars.varPeriod == 'year'  ? true : false"
      slots:
        calendar: []
        grid:
          - component: oh-chart-grid
            config:
              height: 60%
              includeLabels: true
              left: 70
              right: 70
              show: false
              top: 80
        legend:
          - component: oh-chart-legend
            config:
              left: 70
              orient: vertical
              show: true
              top: 10
              width: 600
        series:
          - component: oh-aggregate-series
            config:
              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: =("Verbrauch " + props.name1)
              type: bar
              xAxisIndex: 0
              yAxisIndex: 0
              label:
                show: false
                formatter: =v=>Number.parseFloat(v.data[1]).toFixed(1) + " " + props.unit
          - component: oh-aggregate-series
            config:
              aggregationFunction: average
              color: lightblue
              dimension1: month
              gridIndex: 0
              id: 1
              item: =props.prop_itemTemperatur
              lineStyle:
                width: 1
              name: Temperatur
              type: line
              xAxisIndex: 0
              yAxisIndex: 1
        tooltip:
          - component: oh-chart-tooltip
            config:
              confine: true
              show: true
              trigger: axis
        visualMap:
          - component: oh-chart-visualmap
            config:
              calculable: true
              orient: vertical
              seriesIndex: 0
              show: false
              type: continuous
              min: "0"
              max: "2000"
        xAxis:
          - component: oh-category-axis
            config:
              categoryType: year
              gridIndex: 0
              monthFormat: short
              name: Monat
              nameGap: 30
              nameLocation: center
              weekdayFormat: short
        yAxis:
          - component: oh-value-axis
            config:
              axisLabel:
                formatter: =("{value}" + " " + props.unit)
              gridIndex: 0
              name: Verbrauch
              nameGap: 30
              nameLocation: start
          - component: oh-value-axis
            config:
              axisLabel:
                formatter: "{value} °C"
              gridIndex: 0
              name: Temperatur
              nameGap: 30
              nameLocation: start
              scale: true
    - component: oh-chart
      config:
        chartType: isoWeek
        height: 100%
        options:
          backgroundColor: transparent
        sidebar: true
        visible: "=vars.varPeriod == 'week' ? true : false"
      slots:
        grid:
          - component: oh-chart-grid
            config:
              height: 60%
              includeLabels: true
              left: 70
              right: 70
              show: false
              top: 80
        legend:
          - component: oh-chart-legend
            config:
              left: 70
              orient: vertical
              show: true
              top: 10
              width: 600
        series:
          - component: oh-aggregate-series
            config:
              aggregationFunction: diff_last
              color: orange
              dimension1: isoWeekday
              gridIndex: 0
              id: 0
              item: =props.prop_itemVerbrauch
              markLine:
                data:
                  - type: average
              markPoint:
                data:
                  - name: min
                    type: min
                  - name: max
                    type: max    
              name: =("Verbrauch " + props.name1)
              type: bar
              xAxisIndex: 0
              yAxisIndex: 0
              label:
                show: false
                formatter: =v=>Number.parseFloat(v.data[1]).toFixed(1) + " " + props.unit
          - component: oh-aggregate-series
            config:
              aggregationFunction: average
              color: lightblue
              dimension1: isoWeekday
              gridIndex: 0
              id: 1
              item: =props.prop_itemTemperatur
              lineStyle:
                width: 1
              name: Temperatur
              type: line
              xAxisIndex: 0
              yAxisIndex: 1
        tooltip:
          - component: oh-chart-tooltip
            config:
              confine: true
              show: true
              trigger: axis
        visualMap:
          - component: oh-chart-visualmap
            config:
              calculable: true
              orient: vertical
              seriesIndex: 0
              show: false
              type: continuous
        xAxis:
          - component: oh-category-axis
            config:
              categoryType: week
              gridIndex: 0
              monthFormat: short
              weekdayFormat: short
        yAxis:
          - component: oh-value-axis
            config:
              axisLabel:
                formatter: =("{value}" + " " + props.unit)
              gridIndex: 0
              name: Verbrauch
              nameGap: 30
              nameLocation: start
          - component: oh-value-axis
            config:
              axisLabel:
                formatter: "{value} °C"
              gridIndex: 0
              name: Temperatur
              nameGap: 30
              nameLocation: start
              scale: true
              show: true
    - component: oh-chart
      config:
        chartType: month
        height: 100%
        options:
          backgroundColor: transparent
        sidebar: true
        visible: "=vars.varPeriod == 'month' ? true : false"
      slots:
        calendar: []
        grid:
          - component: oh-chart-grid
            config:
              height: 60%
              includeLabels: true
              left: 70
              right: 70
              show: false
              top: 80
        legend:
          - component: oh-chart-legend
            config:
              left: 70
              orient: vertical
              show: true
              top: 10
              width: 600
        series:
          - component: oh-aggregate-series
            config:
              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: =("Verbrauch " + props.name1)
              type: bar
              xAxisIndex: 0
              yAxisIndex: 0
              label:
                show: false
                formatter: =v=>Number.parseFloat(v.data[1]).toFixed(1) + " " + props.unit
          - component: oh-aggregate-series
            config:
              aggregationFunction: average
              color: lightblue
              dimension1: date
              gridIndex: 0
              id: 1
              item: =props.prop_itemTemperatur
              lineStyle:
                width: 1
              name: Temperatur
              type: line
              xAxisIndex: 0
              yAxisIndex: 1
        tooltip:
          - component: oh-chart-tooltip
            config:
              confine: true
              show: true
              trigger: axis
        visualMap:
          - component: oh-chart-visualmap
            config:
              calculable: true
              orient: vertical
              seriesIndex: 0
              show: false
              type: continuous
              min: "0"
              max: "200"
        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}" + " " + props.unit)
              gridIndex: 0
              name: Verbrauch
              nameGap: 30
              nameLocation: start
          - component: oh-value-axis
            config:
              axisLabel:
                formatter: "{value} °C"
              gridIndex: 0
              name: Temperatur
              nameGap: 30
              nameLocation: start
              scale: true
    - component: oh-chart
      config:
        chartType: day
        height: 100%
        options:
          backgroundColor: transparent
        sidebar: true
        visible: "=vars.varPeriod == 'day' || vars.varPeriod == undefined ? true : false"
      slots:
        calendar: []
        grid:
          - component: oh-chart-grid
            config:
              height: 60%
              includeLabels: true
              left: 70
              right: 70
              show: false
              top: 80
        legend:
          - component: oh-chart-legend
            config:
              left: 70
              orient: vertical
              show: true
              top: 10
              width: 600
        series:
          - component: oh-aggregate-series
            config:
              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: =("Verbrauch " + props.name1)
              type: bar
              xAxisIndex: 0
              yAxisIndex: 0
              label:
                show: false
                formatter: =v=>Number.parseFloat(v.data[1]).toFixed(1) + " " + props.unit
          - component: oh-aggregate-series
            config:
              aggregationFunction: average
              color: lightblue
              dimension1: hour
              gridIndex: 0
              id: 1
              item: =props.prop_itemTemperatur
              lineStyle:
                width: 1
              name: Temperatur
              type: line
              xAxisIndex: 0
              yAxisIndex: 1
        tooltip:
          - component: oh-chart-tooltip
            config:
              confine: true
              show: true
              trigger: axis
        visualMap:
          - component: oh-chart-visualmap
            config:
              calculable: true
              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}" + " " + props.unit)
              gridIndex: 0
              name: Verbrauch
              nameGap: 30
              nameLocation: start
          - component: oh-value-axis
            config:
              axisLabel:
                formatter: "{value} °C"
              gridIndex: 0
              name: Temperatur
              nameGap: 30
              nameLocation: start
              scale: true

[stefan13 (Stefan)]

@Chriss89

Do you have any idea how to disable the second aggregat series and the second yaxis if the item is not set?

Hello Christian,

thanks for sharing the modified version.
You can use this expression to display only the data from the first aggregate, if you make the item in the 2nd conditional:

item: "=props.prop_itemTemperatur === undefined ? 'undefined' : props.prop_itemTemperatur "

Not sure this is the best approach, but it works