通过更改绘图数据更新浮点图

Question

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.

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.

Answer 1

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 .