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);  	  	someplotsuccess.setdata(somedata);  	someplotsuccess.setupgrid();  	someplotsuccess.draw();  }    options.legend.labelformatter = function(label, series) {  			return '<a href="#" onclick="toggleplotsuccess(' + series.idx  					+ '); return false;">' + label + '</a>';  		};  		someplotsuccess = $.plot($('#cagraph'), datasets, options);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>  <script src="https://rawgit.com/flot/flot/master/jquery.flot.js"></script>  <script src="https://rawgit.com/codicode/flotanimator/master/jquery.flot.animator.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.time.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.threshold.min.js"></script>    <div id = "choices_cagraph">    </div>  <div id="cagraph" style="width:650px;height:400px">

if click on legend see show/hides 1st series only

the issue you're seeing because of how threshold plug-in works. may adding 3 data series plot @ start, threshold breaking apart 3 data series many more (in example, getdata() returns 9 data series first time it's called) can display different colored lines, etc, particular (original) series. original series idx "1" no longer new series idx "1" (in fact think both new "1" , "2" belong original series "0" since series has been split 3 separate segments).

in fact, gets worse: since calling getdata(), modifying it, , calling setdata() modified data array, number of data series increases every single time onclick handler called.

so, solution simple: don't bother saving returned object $.plot() , don't bother calling getdata()/setdata() on it, call $.plot() again scratch in onclick handler.

there property must add each series in original datasets array:

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

otherwise won't able turn off/on in onclick handler.

then handler becomes:

toggleplotsuccess = function(seriesidx) {   datasets[seriesidx].lines.show = !datasets[seriesidx].lines.show;   $.plot($('#cagraph'), datasets, options); };