CODEWITHSUNDEEP
javascriptjqueryhtmlflot
user123
user123

Reputation: 169

Update the flot graph by changing plot data

I want to update a flot graph by changing one value in the series and corresponding plots also should be updated based on the changed value. My x-axis is date and time and my y-axis is the count.

Sample image

In the above image its explained what exactly i want.

function fnUpdateGraph(isNew,isUndo,isRedo){
 if(selectednodeid==undefined){
  showdialog(message.information,messages.informatio,"No nodes selected",null,false);
  return false;
 }
 var newHeadDate=new Date();
 var updateDate=document.getElementById("txt_node_head_date").value.split("-",3);
 newHeadDate.setDate(updateDate[0]);
 newHeadDate.setDate(+updateDate[1]-1);
 newHeadDate.setDate(updateDate[2]);
 var updateTime=document.getElementById("txt_node_head_time").value.split(":",2);
 newHeadDate.setHours(updateTime[0],updatetime[1],0,0);
 var maxNodeId=vehicle[selectedvehicle].length;
 if(selectedNodeId<maxNodeID){
  if(newHeadDate.getTime()>=new Date(vehicle[selectedvehicle][selectedNodeId+1].headDate).getTime()){
   plot.setData();
   plot.setupGrid();
   plot.draw();
   return;
  }
 }

I have added a part of my code where I have defined the updateGraph function. What are the changes to be made in order to get the graph plotted with changed values.

Upvotes: 1

Views: 2988

Answers (1)

Mark
Mark

Reputation: 108512

You need to use a combination of plot.getData and plot.setData (see docs here). getData will return an array of series, loop those until you find the point of interest and modify the value. Then call setData, setupGrid and draw.

var someData = somePlot.getData();
// loop first series
for (var i = 0; i < someData[0].data.length; i++) {
  // the data member of the series contains x/y point data
  // look at X values until you find the one you want
  if (someData[0].data[i][0] == someSearchXValue) {
     someData[0].data[i][2] = someNewYValue;
     plot.setData(someData);
     plot.setupGrid();
     plot.draw();
     return;
  }
}

Here's a fiddle demonstration.

Upvotes: 4

Related Questions