リアルタイムJavascriptラインチャート

Question

私のアプリケーションには、ウェブページにリアルタイムデータを表示する必要のある小さな機能があります。私はFlotの例 "リアルタイム更新"、Highchartsの "spline each second update"のようないくつかのJavascriptの例を研究しようとしています。彼らはどちらもそれを達成するかもしれないと思う。しかし、私はちょうどJavaScriptを学び始めました。私の機能をどうやって達成するかについては全く気づかれていません。私はあなたから助けを得ることができればそれを感謝します。私は私の興味を支えるために小額の資金から小さな予算を持っています。私はこのコードの授業料を支払うことに満足しています。

基本的には、3301、4390、3802 ...のように1つのページに100個の数値変数を表示できます。それらは0.5秒ごとにリフレッシュされます。今私は線分で結ばれた一連の点としてこれらの数字を表示する折れ線グラフを作成する必要があります。ウェブページの全機能は、リアルタイムデータ（約800点）を動的なチャートで時間順に視覚化することができます。つまり、この折れ線グラフは、定義済みの期間の履歴データと最新のデータを表示できます。

私は、T1.jsという1つの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に表示する方法は分かりました。コードは

すべてです。完全に私の頭の中に混乱。折れ線グラフにこれらの数字を表示する方法はわかりません。

グラフ作成コンポーネントをどのように使用して作成することができますか？

Answer 1

私は、線グラフを含む多くのグラフを作成するための既存のコンポーネントがあるので、D3 javascript libraryを使用することをお勧めします。ここにTulp Interactiveのtutorialがあります。