Questions regarding real time line chart

[Selina]

Hi All,

Hope you all very well.

I am a student. There is a small function in my application, which needs to present some real-time data to a webpage. I think Highcharts may fulfil it. But I just started to learn JavaScript. I have been trying to research Highcharts example ”spline updating each second”, getting stuck and totally no idea about how to accomplish my function. I would much appreciate it if I could get help from you.

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.

No clue how to show these numbers in a line chart like the Highcharts example “spline updating each second”. Is it possible to advise me how I can use Hightcharts to make it? Thank you so much in advance. I do need your help as my deadline is near.

Best wishes
Selina

[Selina]

Is there anybody can help me? I am online all the time for getting the reply

[hfrntt]

Hi, instead of creating one hundred values (a1, a2, a3, etc) I advice you to create an array, like:

Code: Select all

a = [];
a.push( firstValue );
a.push( secondValue );

// etc...

Then you can do it in a loop, like:

Code: Select all

for (var i=0; i<100; i++) {
  a.push( (parseInt(parsed[i],10) )
}

And now, since you have your data in an array, you can simply do something like:

Code: Select all

var chart = new Highcharts.Chart({
  chart: {
    renderTo: 'container-id'
  },
  series: [{
    data: a
  }]
})

And that's all. Just replace "container-id" with some div's id on your page.

[Selina]

Thank you for taking time to amend my code. I still have two questions with it.
1. As you might know, I have an external txt file (named data.txt) containing only the real time data. The file looks like below:
0v;
1v;
2v;
3v;
4v;
….
99v;
I thought to use “get” method to get the contents of the data.txt file. So according to your demo, Do I need to change ($(‘#fileContent’).text() ); to ($(‘data.txt’).text() );

2.
events: {
load: function() {

// set up the updating of the chart each half second
var series = this.series[0];
setInterval(function() {
var x = (new Date()).getTime(),
// current time
y = Math.random();
series.addPoint([x, y], true, true);
}, 500);
}
}
This is a part of your demo. I think it means that y= a random number between 0 and 1. Right? (I am learning). How can I make X Axis show exact time, Y Axis show my real time numbers from external txt file?

Thank you for all your help.
Look forward to hearing from you. Many thanks
Selina

Hi, instead of creating one hundred values (a1, a2, a3, etc) I advice you to create an array, like:

Code: Select all

a = [];
a.push( firstValue );
a.push( secondValue );

// etc...

Then you can do it in a loop, like:

Code: Select all

for (var i=0; i<100; i++) {
  a.push( (parseInt(parsed[i],10) )
}

And now, since you have your data in an array, you can simply do something like:

Code: Select all

var chart = new Highcharts.Chart({
  chart: {
    renderTo: 'container-id'
  },
  series: [{
    data: a
  }]
})

And that's all. Just replace "container-id" with some div's id on your page.

[hfrntt]

Your actual question is quite similar to preprocessing CSV, it was described here: http://www.highcharts.com/documentation ... processing

[Selina]

Thank you for your reply. I was trying to make X Axis show exact time and Y Axis show the real time data from external file instead of random data. Still not working properly, only show the first 100 points. The code is as follows:

$(document).ready(function() {

var options = {
chart: {
renderTo: 'container',
defaultSeriesType: 'spline',
marginRight: 10,
events: {
load: function() {

// set up the updating of the chart each half second
var series = this.series[0];
setInterval(function() {
var x = (new Date()).getTime(),
// current time
y = parsed[i];
series.addPoint([x, y], true, true);
}, 500); }
}
},
title: {
text: 'Real Time Line Chart'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 100
},
yAxis: {
title: {
text: 'Value'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'}]
},
tooltip: {
formatter: function() {
return '<b>' + this.series.name + '</b><br/>' + Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' + Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},

series: []


};


$.get('data.txt', function(data) {
var a = [];
// Split the lines

var parsed = data.split('\n');
for (var i = 0; i < parsed.length; i++) {
a.push(parseInt(parsed[i], 10)) }

options.series[0] = {
data: a
};

var chart = new Highcharts.Chart(options);
});



});

Is it possible to let me know where is wrong? I am struggling with it long time. Thank you very much in advance.

[Fusher]

I removed event: load and this code works fine. Can you show sample of your data.txt?
Your code in jsbin : http://www.highcharts.com/jsbin/igenod/edit

[hfrntt]

The code looks and works properly (http://highcharts.com/jsbin/urayer/2/edit). Have you checked if the ajax request comes back without any error? (you can check this using for example firebug, chrome dev tool).

[Selina]

Thank you all for your replies.
I have an external txt file (named data.txt) containing only the real time data. The file looks like below:
0v;
1v;
2v;
3v;
4v;
….
99v;
I am still struggling with the code. It only displays the first 100 points and stop with Highcharts. It seems that the real-time data is still not picked up by Highcharts. I am just guessing that because my TXT file can not be refreshed itself… needs to use the XMLHttpRequest function to request data from data.txt.

[Fusher]

Of course, if your data.txt coantains only 100 values, so only 100 values will be shown. If your data.txt will get more values you need to call another $.get() to update your data.

[Selina]

Of course, if your data.txt coantains only 100 values, so only 100 values will be shown. If your data.txt will get more values you need to call another $.get() to update your data.

Hi Fusher
Thank you for your reply to my post.
I have an external txt file (named data.txt) containing only the real time data. The file looks like below:
0v;
1v;
2v;
3v;
4v;
….
99v;
I am still struggling with the code. It only displays the first 100 points and stop with Highcharts. It seems that the real-time data is still not picked up by Highcharts. I am just guessing that because my TXT file can not be refreshed itself… needs to use the XMLHttpRequest function to request data from data.txt.

After reading the case study on highchart website, I think I need to use an Ajax framework to load the data each half second from the server but my input data was not formatted as JSON.

I tried to write code and use the Highcharts addPoint method several times, but I am too new with Ajax and can not handle it. I would appreciate it if you could give me a hand.

I modified an Ajax demo before knowing Highcharts, all variables are refreshed every half second successfully on the index.htm and the webpage don’t need to refresh. The javascript code is as follows. I think there should be a way to modify the code as below and add Highcharts method. I am not able to deal with it. Please please help me…

var response = 0;
var responsebutton = 1;
var ansvers = 0;
var i
var horz


function get_data_loop()
{
if(!ansvers){
get_data();
ansvers = 1;
}
setTimeout("get_data_loop()",500);
}

function open_ActiveXobject()
{
var http_request;
if (window.XMLHttpRequest) {
http_request = new XMLHttpRequest();
} else if (window.ActiveXObject) {
try{
http_request = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e){
try{
http_request = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e) {}
}
}
if(!http_request){
alert('Cannot create XMLHTTP');
return 0;
}
return http_request;
}


function server_response(http_request)
{
if (http_request.readyState == 4)
{
if (http_request.status == 200)
{
response=0;
}else
{
response = 0;
}
}
}

function infinite_loop()
{
if(!response)
make_request("data.txt");
}

function get_data()
{
var http_request = open_ActiveXobject();
if(!http_request) return 0;

http_request.onreadystatechange = function() {server_ansvers(http_request);};
http_request.open('GET', 'data.txt?', true );
http_request.send(null);
}

function server_ansvers(http_request)
{
if (http_request.readyState == 4)
{
if (http_request.status == 200)
{
process_data(http_request.responseText);
ansvers=0;
}else
{
ansvers = 0;
}
}
}
horz = 0
window.onload=get_data_loop;

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

I am looking forward to hearing from you soon. Many thanks
All the best
Selina

[Fusher]

As hfrntt said, you don't have to create 100 different variables (a1,a2... a99) - it's really good advice. Use array instead:

Code: Select all

var dataArray = [];
for(var i=0;i<parsed.length;i++){
     dataArray.push(parseInt(parsed[i],10));
}
}

So now, when you have created this loading external data and have parsing this data, all you need is to add this data to your chart. Just create simply, empty chart, and then add new point to this chart:

Code: Select all

chart.series[0].addPoint(parseInt(parsed[i],10));

[Selina]

Hi, thank you for your suggestion. I tried to write code as below but nothing to show in the webpage at all. I would appreciate it if you could give me a hand. Thank you all from the bottom of my heart!


I created a maintest.js file to receive the data from the server as folllows:


var response = 0;
var responsebutton = 1;
var ansvers = 0;
var i
var chart;

function get_data_loop()
{
if(!ansvers){
get_data();
ansvers = 1;
}
setTimeout("get_data_loop()",500);
}

function open_ActiveXobject()
{
var http_request;
if (window.XMLHttpRequest) {
http_request = new XMLHttpRequest();
} else if (window.ActiveXObject) {
try{
http_request = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e){
try{
http_request = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e) {}
}
}
if(!http_request){
alert('Cannot create XMLHTTP');
return 0;
}
return http_request;
}

function server_response(http_request)
{
if (http_request.readyState == 4) // acknowledged
{
if (http_request.status == 200) // perfekt
{
response=0;
}else
{
// alert('There was a problem with the request.');
// alert( http_request.status );
response = 0;
}
}
}

function infinite_loop()
{
if(!response)
make_request("data.txt");
}
function get_data()
{
var http_request = open_ActiveXobject();
if(!http_request) return 0; // Do I'am connected ?
http_request.onreadystatechange = function() {server_ansvers(http_request);};
http_request.open('GET', 'data.txt?', true );
http_request.send(null);
}
function server_ansvers(http_request)
{
if (http_request.readyState == 4) // acknowledged
{
if (http_request.status == 200) // perfekt
{
process_data(http_request.responseText);
ansvers=0;
}else
{
// alert('There was a problem with the request.');
// alert( http_request.status );
ansvers = 0;
}
}
}
window.onload=get_data_loop;

function process_data(data)
{
var a = [];
// Split the lines
var parsed = data.split('\n');
for (var i = 0; i < parsed.length; i++) {
a.push(parseInt(parsed[i], 10))
}

var series=chart.series[0];
// add the point
chart.series[0].addPoint(parseInt(parsed[i],10));

}




And then I created a chart on index.htm.


<head>

<script language="JavaScript" src="maintest.js" ></script>

<!-- 2. Add the JavaScript to initialize the chart on document ready -->
<script type="text/javascript">
$(document).ready(function() {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'spline',
marginRight: 10,
events: {
load: process_data(data)
}
},
title: {
text: 'Real Time Line Chart'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 100
},
yAxis: {
title: {
text: 'Value'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'}]
},
tooltip: {
formatter: function() {
return '<b>' + this.series.name + '</b><br/>' + Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' + Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
data: a
}]

});

});

</script>
</head>
<body>

<!-- 3. Add the container -->
<div id="container" style="height: 300px"></div>


</body>


These are all code I wrote. I know I am too new with Ajax, don't know where is wrong. Thank you for all your help in advance.

All the best
Selina

[hfrntt]

I'm not quite following your code. First of all you're already using jQuery so there's no reason for creating your own function to handle ajax requests, instead I advice to use builtin jQuery.ajax (http://api.jquery.com/category/ajax/). It'll reduce amount of code and clean it up a little bit.

Secondly, I think that your code is not prepared to handle asynchronous ajax requests. Once again if you're a beginner I advice to start with our "How to" instead of creating whole new code: http://www.highcharts.com/documentation ... ive-charts