Google Chart - How to use it

[ottelo9]

Hi!
I use Tasmota for my smart meter to read actual and used power (W and kWh). No I want to display the values as a graph directly on the tasmota web page. I added the "USE_GOOGLE_CHARTS" compiler directive and tried to unterstand the Google Chart section in the script docu. But I dont understand how to put the actual power into an array and this array into google chart.

Example is:
$<div id="chart1"style="width:640px;height:480px;margin:0 auto">
$gc(c array1 array2 "wr" "pwr1" "pwr2" "mo|di|mi|do|fr|sa|so" "Solar feed")

[ottelo9]

anyone?

[gemu2015]

this is an example of an obis meter with google graph

solor_einspeisung_script.txt.zip

[gemu2015]

esp8266 can handle google charts without any problems. There is something else wrong

[nikito7]

Big modbus script. Arrays size.

[gemu2015]

post the script

[nikito7]

This is working. 😆 But no much more resources left. Current script is stable.

https://github.com/nikito7/easyhan/blob/dev/edpbox/eb3-script.js

[nikito7]

https://github.com/nikito7/edpbox/blob/dev/tasmota/esp8266/build.h

[gemu2015]

you set the arrays on change of power values, but you must set the array on change of time.
check the examples above how this must be done.

i see no problems with esp8266 and this kind of script.

[nikito7]

Just sml.

Small script

Mega sml script

Maybe I made some mistake yesterday.

I just use esp8266 because of power requirements of my meter han port.

Esp32-C3 not replace esp8266 unfortunately

[gemu2015]

i assume everything above 10 kb is enough for heap on esp8266.

[sfromis]

10Kb would be very low, and risky for stability.

[nikito7]

It's ok if you dont use web interface.

I try keep around 14-15kb.

Without free ram you cannot edit script.

Sometimes I have to clean script and restart

script above 4k

[gemu2015]

use script editor, then you do not need to edit script on tasmota WEBUI.

[nikito7]

Why "lt" or "ct" in code?

Docs dont say anything about "t" I think

[gemu2015]

t means table only. only the google data table is generated. the table options must be given in the next lines.
this allows for very customized tables. the syntax of google table options must be checked in google docs.

in scripting docs it stated here:

very customized chart definition:
.....

i am aware that sometimes the docs are not clear enough. feel free to improve them
everybody can contribute to the docs

[nikito7]

I'm talking about this:

Not tested with dev

[ottelo9]

You can combine l with t. So you have a linechart with data array input. Go to the script Tasmota page and scroll down to google chart. Then to the example „very customize chart definition

[nikito7]

After restart my 24h chart is inverted. Anyone else?

[nikito7]

Not reversed but:

After restart:

I give up in permanent arrays with auto-index.

60 minutes no permanent chart it's just good for now

[nikito7]

Found the problem

There is no index 0 here:

>D
m:p:ipwrd=0 24
...
>S
ipwrd[1]=500
ipwrd[2]=600
...
ipwrd[23]=700
ipwrd[24]=800

[nikito7]

Ok.... array[0] is the index 😆

18:26:32.436 Array: ikwh[0] 3.00
18:26:32.438 Array: ikwh[1] 8337.64
18:26:32.439 Array: ikwh[2] 8338.20
18:26:32.441 Array: ikwh[3] 8338.67
18:26:32.443 Array: ikwh[4] 0.00

[nikito7]

Again... index reset to zero after restart 🤷‍♂️

Feature or bug?

[gemu2015]

array index is not permanent. you may use a permanent variable to set it.
the array index in google charts is the starting point where to start plotting the array. (it shifts the plot NOT the array itself)
i realized that this fact is missing in the google chart script docs.

[nikito7]

For chart use. What is the difference between m:p:array and M:p:array ?

[sfromis]

The docs explains:

m:vname
specifies a median filter variable with 5 entries (for elimination of outliers)
M:vname
specifies a moving average filter variable with 8 entries (for smoothing data)
...
m:p:vname defines a permanent array.

[nikito7]

But we use big arrays... still a median filter?

m:ipwrm=0 60
m:epwrm=0 60

[gemu2015]

yes, but median is only calculated if you assign the filter to a variable without an index
var=array

[jkwim]

I am trying Google Chart for the first time and need some help.

Compiled Tasmota 14.1.0.3 with:

        #ifndef USE_GOOGLE_CHARTS
          #define USE_GOOGLE_CHARTS
        #endif

I have my data in an array:
m:den=0 8

>W
<br>
<br>
; Define window for graph 1
$<div id="chart1" style="width:640px;height:300px;margin:0 auto"></div>

$gc(l den "wr" "DE" "0.75|1.5|2.25|3.0|3.75|4.5|5.25|6")

$var options = {
$vAxis:{viewWindow:{min:0,max:5000},title: 'Energy'},
$hAxis: {title: 'Distance'},
$title:'Distance Gate Energy Levels'
$};
$gc(e)

This is what seen on WebGUI

The Google Chart directives does not seem to get interpreted.

What am I doing wrong

[jkwim]

Update:
Identified the main issue. There was an issue with my compilation as I have updated the in the wrong place.

Now it draws the graph:

>W
; Define window for graph 1
$<div id="chart1" style="width:640px;height:300px;margin:0 auto"></div>

$gc(lt den "wr" "DEnergy" "0.75|1.5|2.25|3.0|3.75|4.5|5.25|6.0")

$var options = {
$vAxis:{viewWindow:{min:0,max:100},title: 'Energy \%'},
$hAxis: {title: 'Distance'},
$title:'Distance Gate Energy Levels'
$};

$gc(e)

I have thee questions:

1. What is the meaning of the string "wr" in the following line? (Since I copied the code from examples I could not find the reference to this string)
   $gc(lt den "wr" "DEnergy" "0.75|1.5|2.25|3.0|3.75|4.5|5.25|6.0")

2. Why only the first 5 labels out of "0.75|1.5|2.25|3.0|3.75|4.5|5.25|6.0" are getting shown in the graph?
   When I checked the page source, I see empty strings being populated for these in the data table:

<script language='JavaScript'>

function drawChart(){

  var cssc={'headerRow':'hRow','rowNumberCell':'hCol','tableCell':'tCell'};

  var data=google.visualization.arrayToDataTable([
['wr','DEnergy'],
['0.75',100.00],
['1.5',100.00],
['2.25',24.00],
['3.0',8.00],
['3',11.00],
['',5.00],
['',100.00],
['',100.00]]
);

  var options = {vAxis:{viewWindow:{min:0,max:100},title: 'Energy'},hAxis: {title: 'Distance'},title:'Distance Gate Energy Levels'};

  var chart=new google.visualization.LineChart(document.getElementById('chart1'));
  chart.draw(data,options);
} 

google.charts.setOnLoadCallback(drawChart); 

</script>

3. Is there way to auto refresh the graph?

[sfromis]

If you check the docs after the header "Google Charts:", it starts with a description of the "gc" function, saying that your "wr" is a name, described as "name of chart". And your page source clearly shows it being used in the first table row as a header for the column with the labels, naming what the labels mean.

[jkwim]

If you check the docs after the header "Google Charts:", it starts with a description of the "gc" function, saying that your "wr" is a name, described as "name of chart". And your page source clearly shows it being used in the first table row as a header for the column with the labels, naming the what the labels mean.

The documentation needs improvement here. It is not really the name of the chart. It is really the First Column Header.

I added a second array with following modification:

$gc(lt den sen "Distance" "MEnergy" "SEnergy" "0.75|1.5|2.25|3.0|3.75|4.5|5.25|6.0")

Here is the data table now.

        var data = google.visualization.arrayToDataTable([
          ['Distance', 'MEnergy', 'SEnergy'],
          ['0.75', 100.00, 9.00],
          ['1.5', 100.00, 0.00],
          ['2.25', 25.00, 0.00],
          ['3.0', 4.00, 100.00],
          ['3.75', 5.00, 71.00],
          ['4.5', 5.00, 56.00],
          ['5.25', 100.00, 9.00],
          ['6.0', 100.00, 9.00]
        ]);

[jkwim]

Moving Target Energy & Static Target Energy

[gemu2015]

2. your x axis string is too long for the default script string size (20 chars)
   expand string size by >D size e.g. >D 40
3. add this line: $<script>setTimeout(function () { location.reload();}, 3000);</script>

[jkwim]

2. your x axis string is too long for the default script string size (20 chars)
expand string size by >D size e.g. >D 40

This took care of it. Thanks.

[jkwim]

3. add this line: $<script>setTimeout(function () { location.reload();}, 3000);</script>

This refreshes the whole page. I was wondering whether there is a way to refresh the data table only.

[jkwim]

This refreshes the whole page. I was wondering whether there is a way to refresh the data table only.

Found a code snippet at https://stackoverflow.com/questions/58890411/auto-refresh-google-chart

  google.setOnLoadCallback(() => {
    // draw the first time
    drawChart();
    // start automatic refresh
    setTimeout(() => {
      if (!isDrawing) {
        drawChart();
      }
    }, 5000);
  });

[jkwim]

New Question:
Does scripting support decoding this number of levels from RESULT JSON message

mse[1]=LD2410#Moving#Sensitivity[1]

00:24:54.255 MQT: stat/tasmota/RESULT = {"LD2410":{"Duration":5,"Moving":{"Gates":8,"Sensitivity":[50,50,40,30,20,15,15,15,15]},"Static":{"Gates":8,"Sensitivity":[0,0,40,40,30,30,20,20,20]}}}

[gemu2015]

this may work:
#define USE_SCRIPT_FULL_JSON_PARSER

[jkwim]

Great! That helped.
Now I have two graphs with two data sets which shows the LD2410's Moving Human Target threshold values and actual detection values and the same info for Stationary (Static) Human Target.

Ability to view these settings in real time will help to change the Sensitivity Thresholds and configure the sensor to more precisely make the detection. This is how the manufacturer explains it. Need to put into practical and determine how effective it would be. The triggering will happen when actual level crosses the threshold level.

If there is a way to auto refresh the graphs say once a second that would be very useful as well specially when fine tuning moving target detection.

$<div id="chart1" style="width:640px;height:300px;margin:0 auto"></div>
$gc(lt men mse "Distance" "MEnergy" "MThresh" "0.75|1.5|2.25|3.0|3.75|4.5|5.25|6.0")
$var options = {
$vAxis:{viewWindow:{min:0,max:100},title: 'Energy \%'},
$hAxis: {title: 'Distance'},
$title:'Moving Human Energy Levels at Distance Gate'
$};
$gc(e)
$<br>
$<div id="chart2" style="width:640px;height:300px;margin:0 auto"></div>
$gc(lt sen sse "Distance" "SEnergy" "SThresh" "0.75|1.5|2.25|3.0|3.75|4.5|5.25|6.0")
$var options = {
$vAxis:{viewWindow:{min:0,max:100},title: 'Energy \%'},
$hAxis: {title: 'Distance'},
$title:'Static Human Energy Levels at Distance Gate'
$};
$gc(e)

I will post more info about the modifications that I have done to the code in the following threads as I piggy backed on this thread to get clarity on implementing Google Charts:

#17555 (reply in thread)
#22097

[gemu2015]

@jkwim
look at this:
#15767

[jkwim]

Found a code snippet at https://stackoverflow.com/questions/58890411/auto-refresh-google-chart

  google.setOnLoadCallback(() => {
    // draw the first time
    drawChart();
    // start automatic refresh
    setTimeout(() => {
      if (!isDrawing) {
        drawChart();
      }
    }, 5000);
  });

Any possibility to add capability to insert this via the gc construct?

[gemu2015]

since the array must be updated from script at every redraw you must use a mechanism like in the oscilloscope chart from my example above #15767

[jkwim]

I tried cleaning up the script and wanted to shrink the following type of code using a subroutine.

men[1]=LD2410#MEnergy[1]
men[2]=LD2410#MEnergy[2]
men[3]=LD2410#MEnergy[3]
men[4]=LD2410#MEnergy[4]
men[5]=LD2410#MEnergy[5]
men[6]=LD2410#MEnergy[6]
men[7]=LD2410#MEnergy[7]
men[8]=LD2410#MEnergy[8]

#me(tvar){
 men[%tvar%]=LD2410#MEnergy[%tvar%]
}

and calling it

=#me(1)

Get the error:
14:46:33.301 var not found: LD2410#MEnergy[%tvar%]

Is there a way to grab these kind of data without writing individual lines? Perhaps a loop?

[jkwim]

Thanks. My Gitpod repository is behind some updates.

So would it suffice if I manually pick only the following changes?

[gemu2015]

YES

[jkwim]

Not successful:

for cnt 1 8 1
 ;print E: men[%0cnt%] %men[cnt]%
 men[cnt]=LD2410#MEnergy[%cnt%]
 print E: men[%0cnt%] %men[cnt]%
next

00:28:13.240 MQT: tele/tasmota/SENSOR = {"Time":"2024-09-09T00:28:13","Switch1":"ON","LD2410":{"Distance":[75.0,81.0,54.0],"Energy":[79,100], "MEnergy":[29,79,31,3,2,6,3,5], "SEnergy":[4,0,0,100,94,55,37,25]}}
00:28:13.245 E:
00:28:13.250 E: Energy1 100.00
00:28:13.252 E: Energy2 0.00
00:28:13.265 E: men[1] 0.00
00:28:13.268 E: men[2] 0.00
00:28:13.270 E: men[3] 0.00
00:28:13.273 E: men[4] 0.00
00:28:13.275 E: men[5] 0.00
00:28:13.278 E: men[6] 0.00
00:28:13.280 E: men[7] 0.00
00:28:13.283 E: men[8] 0.00

The error message is gone which means it accepts the format.

[gemu2015]

ok, fixed

#if 0
      uint32_t res = JsonParsePath(gv->jo, vname, '#', &fv, str_value, sizeof(str_value));
#else
      char vname_buff[64];
      Replace_Cmd_Vars(lp, sizeof(vname), vname_buff , sizeof(vname_buff));
      uint32_t res = JsonParsePath(gv->jo, vname_buff, '#', &fv, str_value, sizeof(str_value));
#endif

for cnt 1 8 1
men[cnt]=LD2410#MEnergy[%0(cnt-1)%]
next

[jkwim]

Works like a charm!
Thanks. It really did save lot of script space so that I have room for more lines now.

for cnt 1 8 1
  men[cnt]=LD2410#MEnergy[%0(cnt-1)%]
  mse[cnt]=LD2410#Moving#Sensitivity[%0(cnt-1)%]
  sen[cnt]=LD2410#SEnergy[%0(cnt-1)%]
  sse[cnt]=LD2410#Static#Sensitivity[%0(cnt-1)%]

  tvar=cnt*0.75
  print E: %tvar%m men[%0cnt%] %men[cnt]% mse[%0cnt%] %mse[cnt]% sen[%0cnt%] %sen[cnt]% sse[%0cnt%] %sse[cnt]%
next

16:06:57.542 CMD: LD2410MovingSens
16:06:57.554 MQT: stat/tasmota/RESULT = {"LD2410":{"Duration":5,"Moving":{"Gates":8,"Sensitivity":[50,50,40,30,20,15,15,15,15]},"Static":{"Gates":8,"Sensitivity":[0,0,40,40,30,30,20,20,20]}}}
16:06:58.246 MQT: tele/tasmota/SENSOR = {"Time":"2024-09-09T16:06:58","Switch1":"ON","LD2410":{"Distance":[69.0,51.0,40.0],"Energy":[100,100], "MEnergy":[59,100,17,17,10,2,1,2], "SEnergy":[6,0,0,100,100,100,40,24]}}
16:06:58.250 E:
16:06:58.254 E: Energy1 100.00
16:06:58.256 E: Energy2 100.00
16:06:58.265 E: 0.75m men[1] 59.00 mse[1] 50.00 sen[1] 6.00 sse[1] 0.00
16:06:58.272 E: 1.50m men[2] 100.00 mse[2] 50.00 sen[2] 0.00 sse[2] 0.00
16:06:58.280 E: 2.25m men[3] 17.00 mse[3] 40.00 sen[3] 0.00 sse[3] 40.00
16:06:58.287 E: 3.00m men[4] 17.00 mse[4] 30.00 sen[4] 100.00 sse[4] 40.00
16:06:58.295 E: 3.75m men[5] 10.00 mse[5] 20.00 sen[5] 100.00 sse[5] 30.00
16:06:58.302 E: 4.50m men[6] 2.00 mse[6] 15.00 sen[6] 100.00 sse[6] 30.00
16:06:58.311 E: 5.25m men[7] 1.00 mse[7] 15.00 sen[7] 40.00 sse[7] 20.00
16:06:58.318 E: 6.00m men[8] 2.00 mse[8] 15.00 sen[8] 24.00 sse[8] 20.00

[jkwim]

I notice an issue.
The following line assigns value 2.0 to Switch. Previously I got the value of 1.0 correctly.

tele/tasmota/SENSOR = {"Time":"2024-09-09T16:06:58","Switch1":"ON", ...

>E
tvar=Switch1
print E: Switch %tvar%

17:15:52.144 MQT: tele/tasmota/SENSOR = {"Time":"2024-09-09T17:15:52","Switch1":"ON","LD2410":{"Distance":[144.0,136.0,114.0],"Energy":[69,28], "MEnergy":[5,42,52,20,5,6,7,3], "SEnergy":[5,0,0,32,23,20,16,19]}}
17:15:52.149 E:
17:15:52.151 E: Switch 2.00

What could be the issue?

[jkwim]

I defined a new variable called tvar2 and used for the purpose since tvar was used in another loop. The outcome was same. Value of 1 gets updated as 2.

[gemu2015]

yes this is a bug, here is the fix:

#if 0
      uint32_t res = JsonParsePath(gv->jo, vname, '#', &fv, str_value, sizeof(str_value));
#else
      // replace vars allows for looped queries
      char vname_buff[64];
      Replace_Cmd_Vars(lp, sizeof(vname), vname_buff , sizeof(vname_buff));
      uint32_t res = JsonParsePath(gv->jo, vname_buff, '#', &fv, str_value, sizeof(str_value));
#endif
      if (!res) {
        goto chknext;
      }
      if (res == 1) {
        // numeric
nexit:
        if (fp) *fp = fv;
        *vtype = NUM_RES;
        tind->bits.constant = 1;
        tind->bits.is_string = 0;
        return lp + len;
      } else {
        // string
        if (!strncmp_XP(str_value, XPSTR("ON"), 2)) {
          fv = 1;
          goto nexit;
        } else if (!strncmp_XP(str_value, XPSTR("OFF"), 3)) {
          fv = 0;
          goto nexit;
        } else {
          *vtype = STR_RES;
          tind->bits.constant = 1;
          tind->bits.is_string = 1;
          if (sp) strlcpy(sp, str_value, SCRIPT_MAX_SBSIZE);
          return lp + len;
        }
      }

[jkwim]

Works correctly now. Thanks!

04:04:46.253 MQT: tele/tasmota/SENSOR = {"Time":"2024-09-10T04:04:46","Switch1":"ON","LD2410":{"Distance":[58.0,75.0,62.0],"Energy":[84,100], "MEnergy":[61,84,23,5,5,4,1,1], "SEnergy":[1,0,0,100,93,44,45,44]}}
04:04:46.260 E: Switch 1.00