javascript - JQuery Flot : How to add data to the existing point graph instead of redrawing - Stack Overflow

admin管理员组

文章数量:1425894

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

Share Improve this question Follow edited Mar 4, 2015 at 15:18 Jack Allen 55722 gold badges55 silver badges1919 bronze badges asked Mar 4, 2015 at 14:53 ArunArun 3511 silver badge44 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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.

本文标签： javascriptJQuery FlotHow to add data to the existing point graph instead of redrawingStack Overflow