I am facing a challenge with a small function in my application that needs to display real-time data on a webpage. I have been exploring different Javascript examples, such as the Flot example "real-time updates" and the Highcharts example "spline updating each second." While these examples seem promising, I am relatively new to JavaScript and struggling to implement them for my specific function. Any assistance you could provide would be greatly appreciated. I have a modest budget that I can allocate from my pocket money to compensate for your guidance.
The task at hand involves showcasing 100 numerical variables on a single page, like 3301, 4390, 3802... These values are updated every half second. My objective is to create a line chart that visually represents these numbers as a series of points connected by lines. Additionally, I aim to enable real-time visualization of up to 800 data points on the dynamic chart, following a time sequence. Essentially, the line chart should accommodate both historical and live data within the specified period.
I currently possess 100 variables from a JavaScript file named T1.js. A snippet of the relevant code is provided below:
function get_data_loop()
{
...
setTimeout("get_data_loop()",500);
}
...
function process_data(data)
{
var parsed = data.split( "\n" );
var a1 = parseInt(parsed[0],10);
var a2 = parseInt(parsed[1],10);
var a3 = parseInt(parsed[2],10);
var a4 = parseInt(parsed[3],10);
var a5 = parseInt(parsed[4],10);
...
var a97 = (parseInt(parsed[96],10));
var a98 = (parseInt(parsed[97],10));
var a99 = (parseInt(parsed[98],10));
var a100 = (parseInt(parsed[99],10));
document.getElementById("display_a1").value = a1;
document.getElementById("display_a2").value = a2;
document.getElementById("display_a3").value = a3;
...
document.getElementById("display_a98").value = a98;
document.getElementById("display_a99").value = a99;
document.getElementById("display_a100").value = a100;
}
Following this, I struggle with displaying these numbers on index.html. Here's the code snippet I have so far:
<td><input type="text" id="display_a1" value="0" onFocus="blur(this);"/></td>
<td><input type="text" id="display_a1" value="0" onFocus="blur(this);"/></td>
<td><input type="text" id="display_a3" value="0" onFocus="blur(this);"/></td>
<td><input type="text" id="display_a4" value="0" onFocus="blur(this);"/></td>
<td><input type="text" id="display_a5" value="0" onFocus="blur(this);"/></td>
...
As you can see, I'm a bit lost at this stage. I don't know how to translate these numbers into a line chart. Could you provide guidance on using a charting component to achieve this?