graphs

CODE: chart6.bas

''''' Chart.js Graph Demo '''''''''

' by cicciocb 2020

' draw graphs gathering the data

' directly from data file

' The input is a multiple line file

' using the format

' time, temp1, temp2

' where time is a number in Unix format

' and temp1 and temp2 are numerical values

'

' The code use 2 libraries

'''''''''''''''''''''''''''''''''''

cls

' loads the libraries

'jsexternal "/moment.min.js" ' required only for data format

'pause 500

'jsexternal "/chart.min.js"

'pause 500

'jsexternal "/hammer.min.js"

''jsexternal "https://cdn.jsdelivr.net/npm/hammerjs@2.0.8"

'pause 500

'jsexternal "/chartjs-plugin-zoom.min.js"

'cnt = 0

jsexternal "/chart.full.js"

' contains chart.js

' contains moment.js

' contains hammer.js

' contains chartjs-plugin-zoom

cls

a$ = ""

a$ = a$ + |<h1>Example of using Chart.js with Annex</h1>|

a$ = a$ + |<h2>The data are imported directly from the browser</h2>|

a$ = a$ + |<canvas id="canvas1" width="600" height="300"></canvas>|

html a$

pause 500

A$ = ||

A$ = A$ + | var config = {|

A$ = A$ + | type: 'line',|

A$ = A$ + | data: {|

A$ = A$ + | datasets: [{|

A$ = A$ + | label: 'Temperature Room 1',|

A$ = A$ + | backgroundColor: 'red',|

A$ = A$ + | borderColor: 'red',|

A$ = A$ + | data: [],|

A$ = A$ + | fill: false,|A$ = A$ + | }, {|A$ = A$ + | label: 'Temperature Room 2',|A$ = A$ + | fill: false,|A$ = A$ + | backgroundColor: 'blue',|A$ = A$ + | borderColor: 'blue',|A$ = A$ + | data: [],|A$ = A$ + | }]|A$ = A$ + | },|A$ = A$ + | options: {|A$ = A$ + | responsive: true,|A$ = A$ + | title: {|A$ = A$ + | display: true,|A$ = A$ + | text: 'Plot against Date/Time'|A$ = A$ + | },|A$ = A$ + | tooltips: {|A$ = A$ + | mode: 'index',|A$ = A$ + | intersect: false,|A$ = A$ + | },|A$ = A$ + | hover: {|A$ = A$ + | mode: 'nearest',|A$ = A$ + | intersect: true|A$ = A$ + | },|A$ = A$ + | scales: {|A$ = A$ + | xAxes: [{|A$ = A$ + | display: true,|A$ = A$ + | type: 'time',|A$ = A$ + | time: {|A$ = A$ + | displayFormats: {|A$ = A$ + | minute: 'DD/MM/YY HH:mm:ss',|A$ = A$ + | hour: 'DD/MM/YY HH:mm:ss'|A$ = A$ + | }|A$ = A$ + | },|A$ = A$ + | scaleLabel: {|A$ = A$ + | display: true,|A$ = A$ + | labelString: 'Date / Time'|A$ = A$ + | }|A$ = A$ + | }],|A$ = A$ + | yAxes: [{|A$ = A$ + | display: true,|A$ = A$ + | scaleLabel: {|A$ = A$ + | display: true,|A$ = A$ + | labelString: 'DegC'|A$ = A$ + | }|A$ = A$ + | }]|A$ = A$ + | },|A$ = A$ + | plugins: {|A$ = A$ + | zoom: {|A$ = A$ + | pan: {|A$ = A$ + | enabled: true,|A$ = A$ + | mode: 'xy',|A$ = A$ + | speed: 10,|A$ = A$ + | threshold: 10|A$ = A$ + | },|A$ = A$ + | zoom: {|A$ = A$ + | enabled: true,|'A$ = A$ + | drag: true,|A$ = A$ + | mode: 'x'|A$ = A$ + | }|A$ = A$ + | }|A$ = A$ + | }|A$ = A$ + | }|A$ = A$ + | };|A$ = A$ + |var ctx = document.getElementById('canvas1').getContext('2d');|A$ = A$ + |var myChart = new Chart(ctx, config);|A$ = A$ + |myChart.update();|jscript a$A$ = ||A$ = A$ + |function loadData(filename)|A$ = A$ + |{|A$ = A$ + | var xmlHttp = new XMLHttpRequest();|A$ = A$ + | xmlHttp.onreadystatechange = function() {|A$ = A$ + | if (this.readyState == 4 && this.status == 200) |A$ = A$ + | {|A$ = A$ + | var r = xmlHttp.response;|A$ = A$ + | var l = r.split('\n');|A$ = A$ + | var cnt = 0;|A$ = A$ + | for (var i=0; i<l.length-1; i++) {|A$ = A$ + | var p = l[i].split(','); |A$ = A$ + | if (p.length > 1) { |A$ = A$ + | config.data.datasets[0].data[i] = { x: moment(p[0]*1000).toDate(), y: p[1] };|A$ = A$ + | config.data.datasets[1].data[i] = { x: moment(p[0]*1000).toDate(), y: p[2] };|A$ = A$ + | cnt++;|A$ = A$ + | }|A$ = A$ + | }|A$ = A$ + | myChart.update();|A$ = A$ + | var label = document.createElement("Label"); |A$ = A$ + | label.innerHTML = cnt + " Points imported from " + filename; |A$ = A$ + | _$("inner_page").appendChild(label); |A$ = A$ + | }|A$ = A$ + | };|A$ = A$ + | xmlHttp.open("GET", filename , true);|A$ = A$ + | xmlHttp.send(null);|A$ = A$ + | |A$ = A$ + |}|jscript a$jscall "loadData('\data7.txt');"