## #Code samples: Data writer

Code tips and tricks for beginners
Oli
Posts: 43
Joined: Tue Feb 09, 2021 10:07 am
Location: Germany, Meissen
Has thanked: 13 times
Been thanked: 43 times
Contact:

### #Code samples: Data writer

This is a functioning demo, it is made very easy for better understanding.
It may be an idea for solar logger or battery control, I find it very cumbersome. Maybe someone has a better idea.
The .js project no longer exists, but it helps without pictures and the PDF. https://web.archive.org/web/20200917120 ... der9/xy.js

I hope it helps someone, have fun ...

Code: [Local Link Removed for Guests]

``````cls

jsexternal "/xy.min.js"
a\$ = ""
a\$ = a\$ + |<p>Data writer </p><canvas id="canvas1" width="1000" height="300"></canvas>|
html a\$
pause 1000

A\$ = ""
A\$ = A\$ + |var datasets = [|
A\$ = A\$ + |  {|
A\$ = A\$ + |    lineColor : 'rgba(220,220,220,1)',|
A\$ = A\$ + |    pointColor : 'rgba(220,220,220,1)',|
A\$ = A\$ + |    pointStrokeColor : '#fff',|
'A\$ = A\$ + |    data : [[0, 0], [1, 10], [2, 30], [3, 75], [4,100], [5, 120], [6,150], [7, 75], [8, 10], [9, 30], [10, 75], [11,100], [12, 120], [13,150], [14, 75],[15,100]]|
A\$ = A\$ + |    data : [[0,0]]|
A\$ = A\$ + |  },|
A\$ = A\$ + |  {|
A\$ = A\$ + |    lineColor : 'rgba(151,187,205,1)',|
A\$ = A\$ + |    pointColor : 'rgba(151,187,205,1)',|
A\$ = A\$ + |    pointStrokeColor : '#fff',|
A\$ = A\$ + |    data : [[0, 100], [16, 80], [24, 20], [30, 90], [50, 0]]|
A\$ = A\$ + |  }|
A\$ = A\$ + |];|

A\$ = A\$ + |datasets[0].lineColor = 'rgba(220,0,0,1)';xy.draw(datasets);|
A\$ = A\$ + |datasets[0].data[1] = [1,4]; xy.draw(datasets);|
jscript a\$

A\$ = ""
A\$ = A\$ + |var ctx = document.getElementById('canvas1').getContext('2d');|
A\$ = A\$ + ||
'A\$ = A\$ + |var xy = new Xy(ctx);|
'A\$ = A\$ + |var xy = new Xy(ctx,{point: false});|
A\$ = A\$ + |var xy = new Xy(ctx,{smooth: false,point: false});|

A\$ = A\$ + ||
A\$ = A\$ + |xy.draw(datasets);|
jscript a\$

anf:
z=z+1

A\$ = ""
A\$ = A\$ + |datasets[0].data[|
A\$ = A\$ + str\$(z)
A\$ = A\$ + |] = [|
A\$ = A\$ + str\$(z)
A\$ = A\$ + |,|
A\$ = A\$ + str\$(RND(100))
A\$ = A\$ + |];|
A\$ = A\$ + | xy.draw(datasets); |
jscall  A\$
wlog A\$

pause 100
if z>49 then Z=0
goto anf``````
You do not have the required permissions to view the files attached to this post.
Electroguard
Posts: 823
Joined: Mon Feb 08, 2021 6:22 pm
Has thanked: 263 times
Been thanked: 311 times

### Re: #Code samples: Data writer

Thanks Oli, looks like it could be a useful record logging capability for my gas bottle pressure readings, especially now I have SD on the Annex UNO S3.
Oli
Posts: 43
Joined: Tue Feb 09, 2021 10:07 am
Location: Germany, Meissen
Has thanked: 13 times
Been thanked: 43 times
Contact:

### Re: #Code samples: Data writer

I found an old sample and simplified something. It works very well. http://smoothiecharts.org/
withe the script: smoothie.js

Code: [Local Link Removed for Guests]

``````'http://smoothiecharts.org/
cls
jsexternal "/smoothie.js"
pause 300

voltage = 0 : current = 0 : power = 0
'these are hidden textboxes just used to transfer the variables from the javascript
A\$ = ||
A\$ = A\$ + |<canvas id="chart" style="width:100%; height:200px"></canvas>|
A\$ = A\$ + |<br>|
a\$ = a\$ + |<input type='text' data-var='voltage' id='voltage' style="display:none;">|
a\$ = a\$ + |<input type='text' data-var='current' id='current' style="display:none;">|
a\$ = a\$ + |<input type='text' data-var='power' id='power' style="display:none;">|
html a\$
pause 300

A\$ = ""
A\$ = A\$ + |if (typeof grtimer !== 'undefined') clearInterval(grtimer);|
A\$ = A\$ + |var voltages = new TimeSeries();|
A\$ = A\$ + |var currents = new TimeSeries();|
A\$ = A\$ + |var powers = new TimeSeries();|
A\$ = A\$ + |function createTimeline() {|
A\$ = A\$ + |  var chart = new SmoothieChart({responsive: true, maxValue:1, minValue:-1, millisPerPixel:20});|
A\$ = A\$ + |  chart.addTimeSeries(voltages, { strokeStyle: 'rgba(0, 255, 0, 1)', fillStyle: 'rgba(0, 255, 0, 0.2)', lineWidth: 4 });|
A\$ = A\$ + |  chart.addTimeSeries(currents, { strokeStyle: 'rgba(255, 0, 0, 1)', fillStyle: 'rgba(255, 0, 0, 0.2)', lineWidth: 4 });|
A\$ = A\$ + |  chart.addTimeSeries(powers, { strokeStyle: 'rgba(255, 0, 255, 1)', fillStyle: 'rgba(0, 0, 255, 0.0)', lineWidth: 2 });|
A\$ = A\$ + |  chart.streamTo(document.getElementById("chart"), 100);|
A\$ = A\$ + |}|
A\$ = A\$ + |createTimeline();|

'this javascript function copies the values from the hidden textboxes to the chart at 50msec rate
A\$ = A\$ + |grtimer = setInterval(function() {|
A\$ = A\$ + |  voltages.append(new Date().getTime(), _\$("voltage").value );|
A\$ = A\$ + |  currents.append(new Date().getTime(), _\$("current").value );|
A\$ = A\$ + |  powers.append(new Date().getTime(),   _\$("power").value );|
A\$ = A\$ + |}, 50);|
jscript a\$

pause 500
autorefresh 50 ' refresh the variables each 50msec
z = 0
timer0 10, compute  'computes the variables at 10msec rate; change it to see the effect on the chart
wait

compute:
voltage = sin(z/180)
current = cos(z/180)
power = sin(z/180 + 120)
z = z + 1
return``````

There are many more things under:
https://thecreativestore.com.au/creativ ... libraries/

I like the very small project best:
(because it also brings the date)
https://chartist.dev/examples/line-chart

I can't do an Annex program with it because the CSS is external. I get to the limits of my knowledge, I am very good for the electronics.
I have found some files, including plugins,
But you only need 2 files chartist.min.js and chartist.min.css

If someone is interested in helping ...
You do not have the required permissions to view the files attached to this post.