#Code samples: Data writer

[Oli]

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

[Electroguard]

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]

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) 
  'power = (adc/512) - 1
  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 ...