JQuery Flot : How to add data to the existing point graph instead of redrawing

Question

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 complete graph.

So, I dont want to redraw the complete data again and again. As the length of the source.data is increasing, performance is going down . So instead of redraw complete 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);
}

Answer 1

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();