CODEWITHSUNDEEP
javascriptflot
dorien
dorien

Reputation: 5387

Dynamically changing markings in flot

I can draw segments on a flot when I create is, by adding this to the options. 

 markings: [
  { xaxis: { from: 150, to: 200 }, color: "#ff8888" },
  { xaxis: { from: 500, to: 750 }, color: "#ff8888" }
 ]

Now I want to delete these markings and add new ones by calling a function. I have tried the following, but it hasn't worked yet. I think I am not accessing grid in the right way. It is in the options, but not sure how to get to it. I also don't know how to remove the old markings. 

   CustomPlot.prototype.setRibbons = function setRibbons(x1, x2) {
    alert("ok"); \\this works

    this.plot.getOptions().grid.markings.axis.from = x1;
    this.plot.getOptions().grid.markings.axis.to = x2;
    this.plot.getOptions().grid.markings.color = "#ff8888";
    this.plot.setupGrid();
    this.plot.draw();

Here is a plnkr example.

Upvotes: 2

Views: 945

Answers (1)

mechenbier
mechenbier

Reputation: 3067

There are a few things to take care of to get the setRibbons function to work as expected in your plnkr.

First, you want to remove current markings by setting the option to an empty array:

this.plot.getOptions().grid.markings = [];

Then you'll want to re-add a marking for the options you passed before you redraw the plot:

this.plot.getOptions().grid.markings.push({ xaxis: { from: x1, to: x2 }, color: "#ff8888" });

Putting it all together, the setRibbons function looks like this:

CustomPlot.prototype.setRibbons = function setRibbons(x1, x2) {
    //remove old ribbons should there be any
    this.plot.getOptions().grid.markings = [];

    //draw new ones
    this.plot.getOptions().grid.markings.push({ xaxis: { from: x1, to: x2 }, color: "#ff8888" });

    this.plot.setupGrid();
    this.plot.draw();
}

I've updated your plnkr example as well.

Upvotes: 4

Related Questions