rlkoshak, in fact you can do quite lot of different things with the build-in charting in OH.
I found a nice widget in this post. I modified it slightly for my purposes. You can put as many widgets in your page as you need. It does the delta calculation as well. I’m using InfluxDB but you can change it to rrd4j. Only thing which I haven’t figured out yet is how to calculate e.g. total daily and monthly electricity consumption. My code for plotting the electricity consumption is:
uid: Sahkonkulutus_tunti
tags: []
props:
parameters:
- context: item
description: Main toggle item (use for single toggle or as main switch for group)
label: Item
name: item
required: false
type: TEXT
- context: text
default: You forgot to set a card title
description: Pretty card label
label: Title
name: title
required: false
type: TEXT
parameterGroups: []
timestamp: Oct 14, 2023, 3:17:47 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: 75
slots:
default:
- component: oh-chart
config:
chartType: day
label: Kulutus
slots:
grid:
- component: oh-chart-grid
config:
containLabel: false
xAxis:
- component: oh-category-axis
config:
gridIndex: 0
categoryType: day
weekdayFormat: default
monthFormat: default
yAxis:
- component: oh-value-axis
config:
gridIndex: 0
name: Kulutus (kWh)
series:
- component: oh-aggregate-series
config:
name: Sähkönkulutus
service: influxdb
aggregationFunction: diff_last
gridIndex: 0
xAxisIndex: 0
yAxisIndex: 0
type: bar
item: =props.item
dimension1: hour
tooltip:
- component: oh-chart-tooltip
config:
action: analyzer
actionAnalyzerChartType: day
actionAnalyzerItems:
- props.item
aggregationFunction: sum
presetFeatures:
- dataZoom
right: right
show: true
top: top
legend:
- component: oh-chart-legend
config:
bottom: 3
type: scroll
dataZoom:
- component: oh-chart-datazoom
config:
type: inside
Attached please find a screen copy on my page for the electricity meter. The chart on the left is the hourly consumption, middle one the daily and the last one the monthly consumption. By clicking “<” or “>” buttons you can go back and forth in time. As you can see you can add several widgets on the same page.
