实时Javascript折线图

我的应用程序中有一个小功能，需要向网页显示一些实时数据。我一直在尝试研究一些Javascript示例，比如Flot示例“实时更新”，Highcharts示例“每秒样条线更新”。我想他们两个都可以实现。但我刚刚开始学习JavaScript。现在陷入困境，完全不知道如何完成我的功能。如果能得到你的帮助，我将不胜感激。我从零用钱中拿出一小笔预算来支持我的利益。我很高兴为这个代码支付学费

基本上我可以在一页上显示100个数值变量，比如330143903802…。它们每半秒刷新一次。现在我需要创建一个折线图，它将这些数字显示为一系列由线段连接的点。网页的全部功能可以 使实时数据（约800个点）能够按时间顺序在动态图表中可视化。换句话说，此折线图可以显示预定义期间的历史数据以及最新数据

我从一个名为T1.js的JavaScript文件中获得了100个变量。守则的部分条文如下：

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;
}

然后我就知道如何在index.html上显示这些数字了。代码是：

<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>
...

...

这就是我所做的一切。我脑子里乱七八糟的。不知道如何在折线图中显示这些数字

---

是否可以建议我如何使用任何图表组件来制作它？

我建议使用，因为现有的组件可以制作许多图形，包括折线图。这里有一个Tulp Interactive的回复，应该可以让您达到目的。

谢谢大家的回复。有没有其他人可以给我更多的细节和代码？非常感谢