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.
Comments
following on from https://www.elektroda.com/rtvforum/viewtopic.php?p=21223955#21223955 elements as seen on BK-N with Charts driver: https://obrazki.elektroda.pl/5611199300_1726153956_thumb.jpg ... [Read more]
The div called "state" should contain canvas and script elements which I marked on your Beken device screenshot: https://obrazki.elektroda.pl/5953903600_1726155244_thumb.jpg The following elements... [Read more]
free space seems OK. If you run that command on its own on command line you get a panic and reboot https://obrazki.elektroda.pl/4568243400_1726166653_thumb.jpg Added after 7 [minutes]: if... [Read more]
chart_create 48 2 2 still panics, but you shouldn't use chart_setVar and chart_setAxis before chart_create. They don't have a null check, and so when they try to write, it will crash. It can be seen at... [Read more]
I see, two of the functions were missing NULL checks, I've added them now in new commit. The only question is why chart_create panics? I've tried to check code with: _CrtSetDbgFlag(_CRTDBG_ALLOC_MEM_DF... [Read more]
Done a little testing, using charts_create 10 1 1 If called a second time, without setvar/setaxis, it tries to free a null pointer I (174333) OpenBeken: s is not null I (174333)... [Read more]
I see, my testing didn't cover this specific situation, but now I can reproduce it: https://obrazki.elektroda.pl/1690435200_1726215488_thumb.jpg Let me check... Added after 2 [minutes]: 0xcdcdcdcd... [Read more]
Right now even chart_create 10 1 1 crashes with Load access fault, with MTVAL register pointing at 0x00000000. But, i have yet to apply latest patch. [Read more]
I am unable to reproduce this issue, however I've tried only on Windows: https://obrazki.elektroda.pl/2712891300_1726216731_thumb.jpg I've also pushed a fix for a rare case when malloc fails during... [Read more]
With last patch - creates ok, even chart_create 24 2 2, but as soon as i request main http page - it crashes with all set https://obrazki.elektroda.pl/6219982700_1726218343_thumb.jpg [Read more]
But you didnt' set axes, right? I guess your platform doesn't like NULL in vsnprintf: https://obrazki.elektroda.pl/9717944100_1726217178_thumb.jpg On Windows, it's tolerated and does not crash.... [Read more]
Without patch, just preconfigured axes/vars evaluating $CH0*0.1 isn't working, it just adds to chart as $CH0 IndexRefreshInterval 100000 startdriver aht2x 0 1 0 1 startDriver charts startDriver... [Read more]
The following observation indicates that you may be missing ability to expand variables (or, whatever they are called). Do you have: #define ENABLE_EXPAND_CONSTANT 1 enabled for your platform? If... [Read more]
1344_merge_ff4d8fde47e8 with https://obrazki.elektroda.pl/2669193700_1726298087_thumb.jpg no crash now when running chart_create 96 4 3 manually. just some junk in log (but there's junk... [Read more]
Finally I had some time to check out this driver and I hope it's o.k. to give some feedback or proposals: At least for me the chart is never refreshed, to be exact, the graph is refreshed, but only... [Read more]
Tried to switch to a "separated" code for ring buffer - so it would be possible to use the same code for different cases. Up to now, int a 32bit integer - float is "simulated" as an integer multiplied... [Read more]
Thank you, I think I can merge https://github.com/openshwprojects/OpenBK7231T_App/pull/1352 already but I'd need to have charts disabled in obk_config.h by default. I will comment futher when I get some... [Read more]
I just made another change to "move" the chart on the webpage - now it's "below" the "state"-div and will not be replaced on every load of "state". In https://github.com/openshwprojects/OpenBK7231T_App/pull/1358,... [Read more]
Very nice, I think I can merge it today or tomorrow. Do I only need to merge this PR or any others as well? So the charts library works well with realtime refresh out of the box? [Read more]