questions regarding real time line chart

[uma...@hotmail.com]

Hi,

Hope you are very well.

I am a student and a new arrival in this group. There is a small
function in my application, which needs to present some real-time data
to a webpage. I think Smoothie Charts may fulfil it. But I just
started to learn JavaScript. I have been trying to research example,
but I have no much knowledge about Javascript, getting stuck and
totally no idea about how to accomplish my function. I would much
appreciate it if I could get help from you. Is it possible to write
some Javascript code for me?

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.

I’ve got 100 variables from one JavaScript file called T1.js. Some
part s of the code are as follows:

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_a4").value = a4;
document.getElementById("display_a5").value = a5;

……..

document.getElementById("display_a97").value = a97;
document.getElementById("display_a98").value = a98;
document.getElementById("display_a99").value = a99;
document.getElementById("display_a100").value = a100;
}


And then I just know how to show these numbers on index.html. The code
is :
<td><input type="text" id="display_a1" value="0"
onFocus="blur(this);"/></td>
<td><input type="text" id="display_a2" 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>
…..
That’s all My friend and I have done. Very difficult to move
forward...No clue how to show these numbers in a line
chart. Is it possible to advise me how I can use Smoothie to make it?
Thank you so much in advance. I do need your help to let my little
dream come true:)

All the best

Selina

[Sriharsha]

If you want to display the historical data then I suggest you to try
out Flot API and regarding the 100 values that you have in a
javascript, I would suggest you to get this data from Server when the
page loads instead of storing in the file, You can use either Ajax
requests to get the data in the JSON form or you can use DWR.

Thanks,
Sriharsha