I found echarts which, with a little trial and error seems to do it all but at the expense of significant configuration.
That said, I've come across an issue which I have been unable to resolve.
To do the testing, I've been using two computers. One simply having the output page open in Firefox, the other being used to edit code.
For testing, the code has some basic html, a little script to configure the chart and another script to randomly update the chart.
This was working well and as expected until I tried to implement 'onhtmlreload'. I'll do my best to describe the issue.
Scenario:
Computer 1 being used to edit.
Computer 2 showing output page.
Compuer 1 switched to show output page -> Computer 2 now has two instances of the random number generator running.
Press F5 on computer 2. Computer 2 now OK but computer 1 has two instances of the script.
I tried to seperate out the script which now gives only one instance but (obviously) NO instance on first load.
Is there any way around the problem?
In 'real life' it will be Annex BASIC doing the updates, so probably not a real problem but might be if I ty to implement any data manipulation scripts.
Example that exhibits the issue.
Code: [Local Link Removed for Guests]
onhtmlreload Reload
Gosub LoadPage
Gosub LoadScript
wait
'----------------------------------------------------------------------
Reload:
Gosub LoadPage
'Gosub LoadScript
Return
'----------------------------------------------------------------------
LoadPage:
jsexternal "https://fastly.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"
pause 500
cls
A$ = ||
A$ = A$ + ||
A$ = A$ + |<!DOCTYPE html>|
A$ = A$ + |<html lang="en" style="height: 100%">|
A$ = A$ + |<head>|
A$ = A$ + | <meta charset="utf-8">|
A$ = A$ + |</head>|
A$ = A$ + |<body style="height: 100%; margin: 2">|
A$ = A$ + | <div id="myChart" style="height: 100%"></div>|
A$ = A$ + |</body>|
A$ = A$ + |</html>|
html a$
B$ = ||
B$ = B$ + |var chartDom = document.getElementById('myChart');|
B$ = B$ + |var myChart = echarts.init(chartDom, 'dark');|
B$ = B$ + |var option;|
B$ = B$ + ||
B$ = B$ + |option = {|
B$ = B$ + | series: [|
B$ = B$ + | {|
B$ = B$ + | type: 'gauge',|
B$ = B$ + | axisLine: {|
B$ = B$ + | lineStyle: {|
B$ = B$ + | width: 30,|
B$ = B$ + | color: [|
B$ = B$ + | [0.3, '#67e0e3'],|
B$ = B$ + | [0.7, '#37a2da'],|
B$ = B$ + | [1, '#fd666d']|
B$ = B$ + | ]|
B$ = B$ + | }|
B$ = B$ + | },|
B$ = B$ + | pointer: {|
b$ = b$ + | width: 30,|
b$ = b$ + | length: '90%',|
b$ = b$ + | icon: 'path://M7 0C6 4 0 4 0 7 0 9 1 8 3 7 6 6 5 4 5 11L5 43C5 45 9 45 9 43L9 11C9 4 8 6 11 7 13 8 14 9 14 7 14 4 8 4 7 0Z',|
B$ = B$ + | itemStyle: {|
'B$ = B$ + | color: 'inherit'|
B$ = B$ + | }|
B$ = B$ + | },|
B$ = B$ + | axisTick: {|
B$ = B$ + | distance: -30,|
B$ = B$ + | length: 8,|
B$ = B$ + | lineStyle: {|
B$ = B$ + | color: '#fff',|
B$ = B$ + | width: 2|
B$ = B$ + | }|
B$ = B$ + | },|
B$ = B$ + | splitLine: {|
B$ = B$ + | distance: -30,|
B$ = B$ + | length: 30,|
B$ = B$ + | lineStyle: {|
B$ = B$ + | color: '#fff',|
B$ = B$ + | width: 4|
B$ = B$ + | }|
B$ = B$ + | },|
B$ = B$ + | axisLabel: {|
B$ = B$ + | color: 'inherit',|
B$ = B$ + | distance: -30,|
B$ = B$ + | fontSize: 20|
B$ = B$ + | },|
B$ = B$ + | detail: {|
B$ = B$ + | valueAnimation: true,|
B$ = B$ + | formatter: '{value} %',|
B$ = B$ + | color: 'inherit'|
B$ = B$ + | },|
B$ = B$ + | data: [|
B$ = B$ + | {|
B$ = B$ + | value: 73,|
b$ = b$ + | name: 'Data Name'|
B$ = B$ + | }|
B$ = B$ + | ]|
B$ = B$ + | }|
B$ = B$ + | ]|
B$ = B$ + |};|
jscript b$
Pause 500
b$=""
jscript "myChart.setOption(option);"
Return
'----------------------------------------------------------------------
LoadScript:
B$ = B$ + |setInterval(function () {|
B$ = B$ + | myChart.setOption({|
B$ = B$ + | series: [|
B$ = B$ + | {|
B$ = B$ + | data: [|
B$ = B$ + | {|
B$ = B$ + | value: +(Math.random() * 100).toFixed(1)|
B$ = B$ + | }|
B$ = B$ + | ]|
B$ = B$ + | }|
B$ = B$ + | ]|
B$ = B$ + | });|
B$ = B$ + |}, 3000);|
B$ = B$ + ||
B$ = B$ + |option && myChart.setOption(option);|
B$ = B$ + ||
jscript b$
'jscript "option && myChart.setOption(option);"
'jscript "myChart.setOption(option);"
Return
