bonez February 2016

flot toggle series with threshold and curved lines plugin

var datasets = [{"label":"IT","curvedLines":{"apply":true},"threshold":[{"below":100,"color":"rgb(204, 0, 0)"},{"below":98,"color":"rgb(237, 194, 64)"}],"color":"rgb(237, 194, 64)","idx":0,"data":[{"0":1433156400000,"1":98.03},{"0":1435748400000,"1":98.04},{"0":1438426800000,"1":96.1},{"0":1441105200000,"1":97.87},{"0":1443697200000,"1":97.88},{"0":1446379200000,"1":98.07},{"0":1448971200000,"1":99.38},{"0":1451649600000,"1":99.1}]},{"label":"Network","curvedLines":{"apply":true},"threshold":[{"below":100,"color":"rgb(204, 0, 0)"},{"below":98,"color":"rgb(175, 216, 248)"}],"color":"rgb(175, 216, 248)","idx":1,"data":[{"0":1433156400000,"1":95.07},{"0":1435748400000,"1":97.8},{"0":1438426800000,"1":96.72},{"0":1441105200000,"1":97.62},{"0":1443697200000,"1":97.68},{"0":1446379200000,"1":98.49},{"0":1448971200000,"1":98.59},{"0":1451649600000,"1":98.7}]},{"label":"Success Rate","curvedLines":{"apply":true},"threshold":[{"below":100,"color":"rgb(204, 0, 0)"},{"below":98,"color":"rgb(148, 64, 237)"}],"color":"rgb(148, 64, 237)","idx":2,"data":[{"0":1433156400000,"1":95.18},{"0":1435748400000,"1":96.95},{"0":1438426800000,"1":95.96},{"0":1441105200000,"1":96.99},{"0":1443697200000,"1":96.93},{"0":1446379200000,"1":97.68},{"0":1448971200000,"1":98.58},{"0":1451649600000,"1":98.29}]}];

var options = {"series":{"lines":{"show":true},"curvedLines":{"active":true}},"xaxis":{"mode":"time","tickSize":[1,"month"],"timeformat":"%b %y"},"grid":{"clickable":true,"hoverable":true},"legend":{"noColumns":3,"show":true}};

var somePlotSuccess = null;

togglePlotSuccess = function(seriesIdx) {
	var someData = somePlotSuccess.getData();
	//console.log(seriesIdx);
	//console.log(someData[seriesIdx].lines.show);
	someData[seriesIdx].lines.show = !someData[seriesIdx].lines.show;
	//console.log(someData[seriesIdx].lines.show);
	
        

Answers


jmbucknall February 2016

The issue you're seeing is because of how the threshold plug-in works. You may only be adding 3 data series to your plot at the start, but threshold is then breaking apart those 3 data series into many more (in your example, getData() actually returns 9 data series the first time it's called) so that it can display the different colored lines, etc, for a particular (original) series. The original series idx "1" will no longer be the new series idx "1" (in fact I think both the new "1" and "2" belong to the original series "0" since that series has been split into 3 separate segments).

In fact, it gets worse: since you are calling getData(), modifying it, and then calling setData() with the modified data array, the number of data series increases every single time the onClick handler is called.

So, the solution is simple: don't bother saving the returned object from $.plot() and don't bother calling getData()/setData() on it, but just call $.plot() again from scratch in your onClick handler.

There is an extra property you must add to each series in the original datasets array:

"lines": {
  "show": true
},

otherwise you won't be able to turn it off/on in your onClick handler.

Then your handler becomes:

togglePlotSuccess = function(seriesIdx) {
  datasets[seriesIdx].lines.show = !datasets[seriesIdx].lines.show;
  $.plot($('#CAGraph'), datasets, options);
};

Post Status

Asked in February 2016
Viewed 2,510 times
Voted 6
Answered 1 times

Search




Leave an answer