title: flot how to use threshold and have curvy lines?
body: <p>How can I use <a href="http://www.flotcharts.org/flot/examples/threshold/" rel="nofollow">threshold</a> plugin and have curvy lines on a time graph? This <a href="http://jsfiddle.net/mihaisdm/a3ccU/" rel="nofollow">online fiddle</a> I found, not sure how it is made</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var datasets = [{"points":{"show":false},"lines":{"show":true},"curvedLines":{"apply":true,"tension":1},"animator":{"start":0,"steps":14,"duration":3000,"direction":"right"},"data":[[1455851700000,99.65],[1455854400000,99.68],[1455858000000,99.73],[1455861600000,99.71],[1455865200000,99.7],[1455868800000,99.68],[1455872400000,99.65],[1455872400000,99.65],[1455909428571.4285,99.65],[1455912000000,99.7],[1455915600000,99.68],[1455919200000,99.72],[1455922800000,99.72]]}];
  
  var options = {"xaxis":{"mode":"time","timeformat":"%H:%M &lt;br&gt; %d %b ","tickSize":[3,"hour"]},"yaxes":{"position":"left","max":100,"min":98},"series":{"lines":{"show":true,"lineWidth":3},"curvedLines":{"active":false},"threshold":[{"below":99.65,"color":"rgb(204, 0, 0)"}]},"colors":["#008C00"],"legend":{"show":false},"grid":{"clickable":true,"hoverable":true}};
  
  $.plotAnimator($('#CAGraph'), datasets, options);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://rawgit.com/flot/flot/master/jquery.flot.js"&gt;&lt;/script&gt;
  &lt;script src="https://rawgit.com/Codicode/flotanimator/master/jquery.flot.animator.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.time.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.stack.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/flot.tooltip/0.8.5/jquery.flot.tooltip.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"&gt;&lt;/script&gt;
  
  &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw==" crossorigin="anonymous"&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha256-KXn5puMvxCw+dAYznun+drMdG1IFl3agK0p/pqT9KAo= sha512-2e8qq0ETcfWRI4HJBzQiA3UoyFk6tbNyG+qSaIBZLyW9Xf3sWZHN/lxe9fTh1U45DpPf07yj94KsUHHWe4Yk1A==" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.threshold.js"&gt;&lt;/script&gt;
  
  &lt;div id="choices_CAGraph"&gt;&lt;/div&gt;
  &lt;div id="CAGraph" style="width:910px;height:400px"&gt;&lt;/div&gt;
  &lt;div id=tooltip class="popover" role="tooltip"&gt;&lt;div class="arrow"&gt;&lt;/div&gt;&lt;h3 class="popover-title"&gt;&lt;/h3&gt;&lt;div class="popover-content"&gt;&lt;/div&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Also How can I make the animation smooth?</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>I have tried to add <code>null</code> check so the yaxes does not got from 0 to 120, but adoing this makes the line not curvy any more.</p>
  
  <pre><code>for (var i = 0; i &lt; chartcount; i++) {
          var newData = plot.getData()[i].datapoints.points;
          datasets[i].data = [];
          for (var j = 0; j &lt; newData.length; j = j + 2) {
              if(newData[j] != null)
                  datasets[i].data.push([newData[j], newData[j + 1]]);
          }
          datasets[i].animator.steps = (newData.length / 2) - 1;
      }
  </code></pre>