Trying to update the Scatter chart


« Back to message list

Enter your email address to get email updates on this topic. You can stop receiving updates by clicking the link in the update email messages.

Posted by Alex on 18th April 2016
Im trying to update my scatter graph without having to create new objects.


function updateCharts(sTimeIso, dTimeIso, vNames) {

     obj.Set('xmax', sTimeIso);
     obj.Set('xmin', dTimeIso);
     obj.data = SawToothDataPoints;
     obj.draw();
}

The RGraph.clear() function is beeing called in a different place.

So this doesnt work, it only seems to be working when the whole constructor is in the updateCharts function. What am I missing?
Posted by Richard on 18th April 2016
Hi there,

The Scatter chart can lead to an array that's quite confusing as it needs to be 3-dimensional:

1. All datasets
2. All points
3. The X/Y coordinates

So it's easy to get mixed up. I've made this example for you - which uses whitespace liberally to help illustrate the different arrays.

www.rgraph.net/fiddle/view.html/updating-scatter-chart

(wait a few seconds after it loads and it updates the data)





Richard
Posted by Alex on 25th April 2016
Hey Ricahrd,

The formatting seems okay.
My chart is dynamic and I'm pushing incoming data in the corresponding data array.
When debugging I see the data attribute filling up with the incoming values, but the data_arr attribute stays empty. Could this somehow be connected to the issue?

Thank you

Alex
Posted by Richard on 25th April 2016
Hi,

It's probably not the issue. I've updated the example so that it adds a new point every two seconds. Note that it pushes a new point onto the scatter.data[0] array NOT the scatter.data array:



scatter.data[0].push([x, y]);



www.rgraph.net/fiddle/view.html/updating-scatter-chart






Richard
Posted by Alex on 25th April 2016
Hey Richard,

You are totally right, this was not the issue. The issue is with the datapoints wich are drawn out of the graphs scope. On every data update I'm using the obj.Set method to set axis limits on the x axis like so:

     obj.Set('xmax', sTimeIso);
     obj.Set('xmin', dTimeIso);

Im doing this to make the chart move dynamically. But it seems like im doing something wrong when setting these options.
Posted by Richard on 25th April 2016
Hi,

Then go through the data and remove points wITH an X value of less then the X minimum.




Richard
Posted by Alex on 27th April 2016
Hey Richard, I think its easier to explain if I just post the complete code here.
I have really tried alot but couldnt get it working. If you find the time I would really appriacte the help. Thanks



var Data = [];
var scatter;

window.addEventListener('load', initializeCharts, false);


function initializeCharts()
{
     scatter= new RGraph.Scatter({
         id: 'chart_left',
         data: Data,
         options: {
             ymax: 120,
             ymin: 0,
             line: true,
         }
     }).draw();


function updateCharts(sTimeIso, dTimeIso)
{
     scatter.Set('xmax', sTimeIso);
     scatter.Set('xmin', dTimeIso);
     scatter.data = Data;
     RGraph.redraw();
}

socket.on('message', function (data)
{
     var xVal = data.timestamp; // Timestamp is returned as ISO String
     var yVal = data.value;

     Data.push([
         xVal,
         yVal
     ]);
    
     var serverTimeIso = xVal;

     var delta = Date.parse("Thu, 01 Jan 1970 00:01:00 GMT"); // 1 Minute
     var deltaTime = Date.parse(xVal) - delta; // get deltaTime
     var deltaTimeIso = new Date(deltaTime).toISOString();

     updateCharts(serverTimeIso, deltaTimeIso);
});
Posted by Richard on 27th April 2016
Hi there,

Well I had to make a few modifications - but here's a function chart based on your code that updates every second:

www.rgraph.net/fiddle/view.html/updating-scatter-chart





Richard
Posted by Alex on 2nd May 2016
Hey Richard,

after almost going crazy I was finally able to get it to work. The issue was that I was pushing string timestamps instead of integers in the data array.

Thanks for the help, I probably would still be on the wrong path wothout your example.

Posted by Richard on 2nd May 2016
Hi there,

It might interest you to know then that I'm currently going through the libraries adding a conversion to numbers (using parseFloat() ) for the various bits of data.

Too late for your issue though... :-/





Richard
Posted by Alex on 9th May 2016
Hey, thanks alot Richard. The issue was with the type I was pushing as the x Value, I was pushing a string instead of an integer interpretation of time.

Thank you for your help

Add a reply

 




« Back to message list
RGraph on social media