Scrolling Chart

This is an example of scrolling chart including some gauges refreshed very fast.

This program rely on the function AUTOSCROLL that permit to achieve a very fast refresh rate combining Javascript and Basic together.

It use another javascript library, smoothiechart, that you can be downloaded at the bottom of this page.

It use also the javascript library, canvas gauges, that is already inside the Annex standard package but can also be found at the bottom of this page.

These libraries must be uploaded in the module and placed at the root.

CODE: smoothie1.bas

A$ = A$ + |<canvas data-type="radial-gauge"|A$ = A$ + | data-width="200"|A$ = A$ + | data-height="200"|A$ = A$ + | data-units="Watt"|A$ = A$ + | data-title="false"|A$ = A$ + | data-value="33.77"|A$ = A$ + | data-animate-on-init="true"|A$ = A$ + | data-animated-value="true"|A$ = A$ + | data-min-value="0"|A$ = A$ + | data-max-value="100"|A$ = A$ + | data-major-ticks="0,10,20,30,40,50,60,70,80,90,100"|A$ = A$ + | data-minor-ticks="2"|A$ = A$ + | data-stroke-ticks="false"|A$ = A$ + | data-highlights='[|A$ = A$ + | { "from": 0, "to": 10, "color": "rgba(0,255,0,.15)" },|A$ = A$ + | { "from": 10, "to": 20, "color": "rgba(255,255,0,.15)" },|A$ = A$ + | { "from": 20, "to": 80, "color": "rgba(255,30,0,.25)" },|A$ = A$ + | { "from": 80, "to": 90, "color": "rgba(255,0,225,.25)" },|A$ = A$ + | { "from": 90, "to": 100, "color": "rgba(0,0,255,.25)" }|A$ = A$ + | ]'|A$ = A$ + | data-color-plate="black"|A$ = A$ + | data-color-major-ticks="#f5f5f5"|A$ = A$ + | data-color-minor-ticks="#ddd"|A$ = A$ + | data-color-title="#fff"|A$ = A$ + | data-color-units="#ccc"|A$ = A$ + | data-color-numbers="#eee"|A$ = A$ + | data-color-needle-start="rgba(240, 128, 128, 1)"|A$ = A$ + | data-color-needle-end="rgba(255, 160, 122, .9)"|A$ = A$ + | data-value-box="false"|A$ = A$ + | data-animation="false"|A$ = A$ + | data-border-outer-width="3"|A$ = A$ + | data-border-middle-width="3"|A$ = A$ + | data-border-inner-width="3"|A$ = A$ + | data-var="(power + 1) * 50"| ' power is the variable; to note that even a math operation is possibleA$ = A$ + |></canvas>|A$ = A$ + |<canvas data-type="radial-gauge"|A$ = A$ + | data-width="200"|A$ = A$ + | data-height="200"|A$ = A$ + | data-units="Volts"|A$ = A$ + | data-title="false"|A$ = A$ + | data-animate-on-init="true"|A$ = A$ + | data-animated-value="true"|A$ = A$ + | data-min-value="-1"|A$ = A$ + | data-max-value="1"|A$ = A$ + | data-major-ticks="-1, -0.8, -0.6, -0.4, -0.2, 0, 0.2, 0.4, 0.6, 0.8, 1"|A$ = A$ + | data-minor-ticks="2"|A$ = A$ + | data-stroke-ticks="false"|A$ = A$ + | data-highlights='[|A$ = A$ + | { "from": -1.0, "to": -0.6, "color": "rgba(255,0,0, 0.8)" },|A$ = A$ + | { "from": -0.6, "to": -0.2, "color": "rgba(255,255,0, 0.8)" },|A$ = A$ + | { "from": -0.2, "to": 0.2, "color": "rgba(0,255,0, 0.8)" },|A$ = A$ + | { "from": 0.2, "to": 0.6, "color": "rgba(255,255,0, 0.8)" },|A$ = A$ + | { "from": 0.6, "to": 1.0, "color": "rgba(255,0,0, 0.8)" }|A$ = A$ + | ]'|A$ = A$ + | data-color-plate="blue"|A$ = A$ + | data-color-major-ticks="#f5f5f5"|A$ = A$ + | data-color-minor-ticks="#ddd"|A$ = A$ + | data-color-title="#fff"|A$ = A$ + | data-color-units="#ccc"|A$ = A$ + | data-color-numbers="#eee"|A$ = A$ + | data-color-needle-start="rgba(240, 128, 128, 1)"|A$ = A$ + | data-color-needle-end="rgba(255, 160, 122, .9)"|A$ = A$ + | data-value-box="true"|A$ = A$ + | data-animation="false"|A$ = A$ + | data-border-outer-width="3"|A$ = A$ + | data-border-middle-width="3"|A$ = A$ + | data-border-inner-width="3"|A$ = A$ + | data-var="voltage"| ' voltage is the "basic" variableA$ = A$ + |></canvas>|A$ = A$ + |<canvas data-type="radial-gauge"|A$ = A$ + | data-width="200"|A$ = A$ + | data-height="200"|A$ = A$ + | data-units="Ampere"|A$ = A$ + | data-title="false"|A$ = A$ + | data-animate-on-init="true"|A$ = A$ + | data-animated-value="true"|A$ = A$ + | data-min-value="-1"|A$ = A$ + | data-max-value="1"|A$ = A$ + | data-major-ticks="-1, -0.8, -0.6, -0.4, -0.2, 0, 0.2, 0.4, 0.6, 0.8, 1"|A$ = A$ + | data-minor-ticks="2"|A$ = A$ + | data-stroke-ticks="false"|A$ = A$ + | data-highlights='[|A$ = A$ + | { "from": -1.0, "to": -0.8, "color": "rgba(255,0,0, 0.8)" },|A$ = A$ + | { "from": -0.8, "to": -0.6, "color": "rgba(255,255,0, 0.8)" },|A$ = A$ + | { "from": -0.6, "to": 0.6, "color": "rgba(0,255,0, 0.8)" },|A$ = A$ + | { "from": 0.6, "to": 0.8, "color": "rgba(255,255,0, 0.8)" },|A$ = A$ + | { "from": 0.8, "to": 1.0, "color": "rgba(255,0,0, 0.8)" }|A$ = A$ + | ]'|A$ = A$ + | data-color-plate="blue"|A$ = A$ + | data-color-major-ticks="#f5f5f5"|A$ = A$ + | data-color-minor-ticks="#ddd"|A$ = A$ + | data-color-title="#fff"|A$ = A$ + | data-color-units="#ccc"|A$ = A$ + | data-color-numbers="#eee"|A$ = A$ + | data-color-needle-start="rgba(240, 128, 128, 1)"|A$ = A$ + | data-color-needle-end="rgba(255, 160, 122, .9)"|A$ = A$ + | data-value-box="true"|A$ = A$ + | data-animation="false"|A$ = A$ + | data-border-outer-width="3"|A$ = A$ + | data-border-middle-width="3"|A$ = A$ + | data-border-inner-width="3"|A$ = A$ + | data-var="current"| ' current is the "basic" variableA$ = A$ + |></canvas>|html a$pause 300' create the scrolling chart.' look at http://smoothiecharts.org/builder on how customise itA$ = ""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 rateA$ = 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 500autorefresh 50 ' refresh the variables each 50msecz = 0timer0 10, compute 'computes the variables at 10msec rate; change it to see the effect on the chartwait' computes the variables; compute: voltage = sin(z/180) current = cos(z/180) 'power = sin(z/180 + 120) power = (adc/512) - 1 z = z + 1return