![[ZIGBEE] 20A Zigbee socket with energy metering (Tuya TS011F_plug_3)](https://obrazki.elektroda.pl/1000454900_1749493372_thumb.jpg)
![[W600 / TW-03] Door Sensor - Bootloop on 1.18.110/109 Firmware](https://obrazki.elektroda.pl/5552096400_1749191730_thumb.jpg)
OpenBeken now features a scriptable charts driver that allows you to display an arbitrary number of variables with an arbitrary number of axes. This means you can, for example, show your temperature and humidity history, or a voltage or power, or practically any variable you want. This is done entirely without Home Assistant, everything is handled by OBK device. Here I will show you a basic configuration of such driver and some sample scripts utilizing that.
This tutorial assumes you have OBK displayed:
https://github.com/openshwprojects/OpenBK7231T_App
The following will run on many platforms, including:
- BK7231T (WB3S, WB2S, WB2L, etc)
- BK7231N (CB2S, CB2L, WB2L_M1, etc)
- BK7231M, this is a non-Tuya version of BK7231N with 00000000 keys, also sometimes in BL2028 flavour
- T34 is based on BK7231N, see flashing trick
- BL2028N is a Belon version of BK7231N
- XR809 (XR3, etc)
- BL602 (SM-028_V1.3 etc), see also BL602 flash OBK via OTA tutorial
- LF686 (flash it as BL602)
- W800 (W800-C400, WinnerMicro WiFi & Bluetooth), W801
- W600 (WinnerMicro chip), W601 (WIS600, ESP-01W, TW-02, TW-03, etc)
- LN882H by Lightning Semi - datasheet, see flashing how-to, see sample device teardown and flashing, see new flash tool, see dev board
- Windows, via simulator
- ESP32 (WIP platform)
Let's start with checking if your build has "charts" driver:
If it's not present, set the ENABLE_DRIVER_CHARTS to 1 in obk_config.h for the platform of your choice by following paragraphs "Per-Pull Request Builds" and "Customizing your own build" in this guide to get your custom build made online (no toolchain required):
https://www.elektroda.com/rtvforum/topic4033833.html#20946719
Ok, now I assume that you have "charts" driver in your build.
So, the charts can be created in autoexec.bat. If you don't know where to create autoexec.bat, see this tutorial:
Now, once you have basics ready, it's time to check some sample chart scripts!
First, you need to know the basic steps and then we'll look at sample scripts. So, steps are the following:
1. start the chart driver
2. setup the samples count (they are stored in a loop), the number of variables and the number of axes
3. set the variable names and their respective axes
4. setup the axes
5. add data to chart
It may sound complicated at first but it's very easy, let's check the samples.
And before I forgot - in the early versions you may also need to add one more command to autoexec.bat - you need to disable page refresh with:
IndexRefreshInterval 100000
This may be fixed soon. The dynamic charts update is not yet ready.
Sample chart 1 - simplest temperature chart
This is an example of a basic chart displaying temperature data over time, however, for a demonstration purposes, the data is hardcoded. The chart holds 16 data samples and focuses on a single variable, "Temperature", plotted on one axis.
// Sample 1
// single variable chart
startDriver charts
// chart with max 16 samples, 1 variable and single axis
chart_create 16 1 1
// set the temperature variable with axis
chart_setVar 0 "Temperature" "axtemp"
// setup axis
// axis_index, name, flags, label
chart_setAxis 0 "axtemp" 0 "Temperature (C)"
// for demonstration purposes, add some data at fixed times
// First argument is NTP time value
chart_add 1725606094 20
chart_add 1725616094 22
chart_add 1725626094 26
chart_add 1725636094 30
chart_add 1725646094 28
chart_add 1725656094 27
Result:
Sample chart 2 - multiple variables of single type
The same approach can be used to display multiple measurements of the same type. Here, for example, we display 3 different temperature values:
// Sample 2
// Three temperature variables chart
startDriver charts
// chart with max 16 samples, 3 variables and single axis
chart_create 16 3 1
// set variables along with their axis
chart_setVar 0 "Kitchen" "axtemp"
chart_setVar 1 "Outside" "axtemp"
chart_setVar 2 "Bedroom" "axtemp"
// setup axis
// axis_index, name, flags, label
chart_setAxis 0 "axtemp" 0 "Temperature (C)"
// for demonstration purposes, add some data at fixed times
// First argument is NTP time value
chart_add 1725606094 20 15 22
chart_add 1725616094 22 16 23
chart_add 1725626094 26 17 24
chart_add 1725636094 30 14 25
chart_add 1725646094 28 13 22
chart_add 1725656094 27 15 21
Result:
Sample chart 3 - two y axes
Charts driver can also offer you multiple y axes. This way you can display, for example, both temperature and humidity data:
// Sample 3
// Two temperatures and one humidity with separate Temperature/Humidity axes
startDriver charts
// chart with max 16 samples, 3 variables and two separate vertical axes
chart_create 16 3 2
// set variables along with their axes
chart_setVar 0 "Room T" "axtemp"
chart_setVar 1 "Outside T" "axtemp"
chart_setVar 2 "Humidity" "axhum"
// setup axes
// axis_index, name, flags, label
chart_setAxis 0 "axtemp" 0 "Temperature (C)"
// flags 1 means this axis is on the right
chart_setAxis 1 "axhum" 1 "Humidity (%)"
// for demonstration purposes, add some data at fixed times
// First argument is NTP time value
chart_add 1725606094 20 15 89
chart_add 1725616094 22 16 88
chart_add 1725626094 26 17 91
chart_add 1725636094 30 14 92
chart_add 1725646094 28 13 92
chart_add 1725656094 27 15 91
Result:
Sample chart 4 - battery and pressure
Of course, you can display any kind of data you want. Here is for example a voltage and the pressure chart:
// Sample 4
// Battery voltage + pressure
startDriver charts
// chart with max 16 samples, 2 variables and 2 axes
chart_create 16 2 2
// set variables along with their axis
chart_setVar 0 "Battery Voltage" "axvolt"
chart_setVar 1 "Pressure" "axpress"
// setup axis
// axis_index, name, flags, label
chart_setAxis 0 "axvolt" 0 "Battery Voltage (V)"
chart_setAxis 1 "axpress" 1 "Pressure (hPa)"
// for demonstration purposes, add some data at fixed times
// First argument is NTP time value
chart_add 1725606094 3.8 1013
chart_add 1725616094 3.7 1011
chart_add 1725626094 3.7 1012
chart_add 1725636094 3.6 1015
chart_add 1725646094 3.5 1013
chart_add 1725656094 3.4 1014
Result:
Sample chart 5 - third y axis
While not recommended, it's still possible to add a third unit axis. Here is a VCP (Voltage/Current/Power) graph:
// Sample 5 - try 3 axes
startDriver charts
// chart with max 16 samples, 3 variables and 3 separate vertical axes
chart_create 16 3 3
// set variables along with their axes
chart_setVar 0 "Voltage" "axvolt"
chart_setVar 1 "Current" "axcurr"
chart_setVar 2 "Power" "axpower"
// setup axes
// axis_index, name, flags, label
chart_setAxis 0 "axvolt" 0 "Voltage (V)"
chart_setAxis 1 "axcurr" 1 "Current (A)"
chart_setAxis 2 "axpower" 2 "Power (W)"
// for demonstration purposes, add some data at fixed times
// First argument is NTP time value
chart_add 1725606094 12 0.5 6
chart_add 1725616094 11.8 0.52 6.14
chart_add 1725626094 11.5 0.54 6.21
chart_add 1725636094 11.3 0.55 6.22
chart_add 1725646094 11.1 0.56 6.22
chart_add 1725656094 10.9 0.58 6.32
Result:
Final sample - how to plot DHT11 measurements?
All samples so far had hardcoded time values, but it's also possible to get time from NTP. For this purpose, first we need to start NTP and wait for NTP connect:
startDriver NTP
waitFor NTPState 1
Then we can periodically call chart_addNow command, with, for example, given channel content:
// in a loop
again:
// This assumes that $CH1 is temperature_div10
// chart_addNow will take time from the NTP driver
chart_addNow $CH1*0.1
// every 10 seconds
delay_s 10
goto again
Alternatively, we can use repeating event for that - it's the same:
// every 10 seconds, -1 means infinite repeats
addRepeatingEvent 10 -1 chart_addNow $CH1*0.1
And then we can build upon that. Here is a full code for DHT11 demo:
// DHT11 setup
IndexRefreshInterval 100000
startDriver charts
startDriver NTP
waitFor NTPState 1
chart_create 48 2 2
// set variables along with their axes
chart_setVar 0 "Temperature" "axtemp"
chart_setVar 1 "Humidity" "axhum"
// setup axes
// axis_index, name, flags, label
chart_setAxis 0 "axtemp" 0 "Temperature (C)"
// flags 1 means this axis is on the right
chart_setAxis 1 "axhum" 1 "Humidity (%)"
// every 60 seconds, -1 means infinite repeats
// assumes that $CH1 is temperature div10 and $CH2 is humidity
addRepeatingEvent 60 -1 chart_addNow $CH1*0.1 $CH2
And here is sample output (from @divadiow , thank you for testing):
As you can see, our charts driver can work well with DHT11.
Remember that you can hover mouse over datapoint
If you are not sure what is the value of given datapoint, you can always hover mouse about it to get more details:
Chart commands
Summing up, charts have the following commands:
| Command | Arguments | Description | chart_create | samplesCount variablesCount axesCount | Creates a chart with a specified number of samples, variables, and axes. | chart_setVar | index varName axisName | Associates a variable with a specific axis. | chart_setAxis | axisIndex axisName flags label | Sets up an axis with a name, flags, and label. Currently flags can be 0 (left axis) or 1 (right axis) | chart_add | ntpTime var1 [var2 ...] | Adds data to the chart with specified variables at a specific NTP time. | chart_addNow | var1 [var2 ...] | Adds data to the chart using the current NTP time. |
Of course, they are subject to change in the future, so you may want to check the latest docs here:
https://github.com/openshwprojects/OpenBK7231T_App/blob/main/docs/commands.md
https://github.com/openshwprojects/OpenBK7231T_App/blob/main/docs/autoexecExamples.md
Planned features
This is a very early version. Some improvements are coming soon:
- soon it will be possible to specificy RGB color per variable
- currently OBK is using chart.js library from web, but it is planned to allow users to specify alternative chart.js path so they can fetch it from their own server
- persistent data storage (optimized to reduce flash wear) is also planned
You can also give your own feature suggestions and we will do our best to implement them!
Summing up
I think that having charts handled directly on device can be very useful, especially for people who do not want to set up their own Home Assistant instance. With our charts driver, you can have just a single IoT device in your house and still enjoy charts data. No Home Assistant, no external server, nothing else is needed! I hope some of you will find this little feature useful. Stay tuned, more updates coming soon.
Cool? Ranking DIY Helpful post? Buy me a coffee.
