I am plotting a point graph and the graph should get update with new data for every 5 secs. Here min and max range are always fixed

Currently, when I get new data from server, I do merge the new data to the existing source.data and plotting the plete graph.

So, I dont want to redraw the plete data again and again. As the length of the source.data is increasing, performance is going down . So instead of redraw plete data, can I add only the new data to the existing graph

Please find the source code here

var source = [
    { 
        data: [], 
        show: true, 
        label: "Constellation", 
        name: "Constellation",
        color: "#0000FF",
        points: { 
            show: true,
            radius: 2, 
            fillColor: '#0000FF'
        }, 
        lines: {
            show: false 
        }
    }
]

var options = {...}

$.getJSON(URL , function(data) {
   ...
   $.merge(source[0].data, new_data);
   plotObj = $.plot("#placeholder", source, options);
}

I am plotting a point graph and the graph should get update with new data for every 5 secs. Here min and max range are always fixed

Currently, when I get new data from server, I do merge the new data to the existing source.data and plotting the plete graph.

So, I dont want to redraw the plete data again and again. As the length of the source.data is increasing, performance is going down . So instead of redraw plete data, can I add only the new data to the existing graph

Please find the source code here

var source = [
    { 
        data: [], 
        show: true, 
        label: "Constellation", 
        name: "Constellation",
        color: "#0000FF",
        points: { 
            show: true,
            radius: 2, 
            fillColor: '#0000FF'
        }, 
        lines: {
            show: false 
        }
    }
]

var options = {...}

$.getJSON(URL , function(data) {
   ...
   $.merge(source[0].data, new_data);
   plotObj = $.plot("#placeholder", source, options);
}

• javascript
• jquery
• flot
• flotr2

2 Answers 2

Follow this steps:

plotObj.setData(newData);
plotObj.setupGrid();  //if you also need to update axis.
plotObj.draw();       //to redraw data

Another usefull method is getData(). With this method you can get the current data.

var data = plotObj.getData();

Your method of calling $.plot over and over should be avoided. It used to leak memory (not sure if it still does).

That said, @Luis is close, but let's put it all together. To add data to an existing plot do this:

 var allData = plotObj.getData(); // allData is an array of series objects
 allData[seriesIndex].data.push([newXPoint,newYPoint]);
 plotObj.setData(allData);
 plotObj.setupGrid();  // if axis have changed
 plotObj.draw();

It should be noted that this does redraw the entire plot. This is unavoidable with HTML5 canvas. BUT flot draws extremely fast, you'll barely notice it.