title: Real Time Javascript Line Chart
body: <p>There is a small function in my application, which needs to present some real-time data to a webpage. I have been trying to research some Javascript examples, like Flot example ”real-time updates”, Highcharts example ”spline updating each second”.  I think they both may fulfil it. But I just started to learn JavaScript. Right now getting stuck and totally no idea about how to accomplish my function. I would much appreciate it if I could get help from you. I have a small budget from my pocket money to support my interests. I am happy to pay the tuition fee for this code. </p>
  
  <p>Basically I can show 100 numerical variables on one page, like 3301, 4390, 3802…. They are refreshed every half second. Now I need to create a line chart which displays these numbers as a series of points connected by line segments. The full functionality of the webpage can
  enable real-time data (about 800 points) to be visualized in a dynamic chart by time sequence. In other words, this line chart can show historical data for the predefined period, along with the latest data.</p>
  
  <p>I’ve got 100 variables from one JavaScript file called T1.js. Some part s of the code are as follows:</p>
  
  <pre><code>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;
  }
  </code></pre>
  
  <p>And then I just know how to show these numbers on index.html. The code is:</p>
  
  <pre><code>&lt;td&gt;&lt;input type="text" id="display_a1" value="0" onFocus="blur(this);"/&gt;&lt;/td&gt;
  &lt;td&gt;&lt;input type="text" id="display_a1" value="0" onFocus="blur(this);"/&gt;&lt;/td&gt;
  &lt;td&gt;&lt;input type="text" id="display_a3" value="0" onFocus="blur(this);"/&gt;&lt;/td&gt;
  &lt;td&gt;&lt;input type="text" id="display_a4" value="0" onFocus="blur(this);"/&gt;&lt;/td&gt;
  &lt;td&gt;&lt;input type="text" id="display_a5" value="0" onFocus="blur(this);"/&gt;&lt;/td&gt;
  ...
  </code></pre>
  
  <p>That’s all I have done. Totally mess in my head. No clue how to show these numbers in a line chart.</p>
  
  <p>Is it possible to advise me how I can use any charting component to make it?</p>