title: JQuery FLOT chart dynamic Y-axis
body: <p>I have a flot chart that calculates the max Y-axis value based on the last 100 data points and then plots successfully...
  BUT
  Sometimes, the running total of an ongoing plot (5 second delay with new data point plotted) exceeds the current max limit.
  Is there a way to have the Y-axis scale dynamically while plotting new points on the chart?</p>
  
  <p>This is a valid question about how to dynamically scale the Y Axis of the chart if the current Y-axis is exceeded, since the chart is plotted over time with new points being added every 5 seconds, I was asking how to scale the Y-Axis to fit the NEW plot data if it reaches above the current Max Y Axis value..</p>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>here is the code I use (Json returned data) as well as the plot update timer:
  The "highY" takes the last 100 datapoints from a database and sets the max value to the highest count + 10%</p>
  
  <pre><code>        &lt;script type="text/javascript"&gt;
              $(function () {
                  var str1 = [], totalPoints = 300;
                  var str2 = [], totalPoints = 300;
                  var pts1 = '';
                  var pts2 = '';
                  if (pts1 == "" || pts == null) { pts = '2012-10-02 17:17:02'; }
                  if (pts2 == "" || pts == null) { pts = '2012-10-02 17:17:02'; }
                  var maxYaxis = &lt;?PHP echo $highY; ?&gt;;
                  function getStr1() {
                      var ts1 = new Date().getTime();
                      var json1 = (function () {
                          var json1 = null;
                          var myURL = '&lt;?PHP echo $updateURL; ?&gt;?s=1&amp;ts=' + ts1;
                          $.ajax({
                              'async': false,
                              'global': false,
                              'url': myURL,
                              'dataType': "json",
                              'success': function (data) {
                                  json1 = data;
                              }
                          });
                          return json1;
                      })(); 
                      var y1 = json1['data']['avgpersec'];
                      var total_1 = json1['data']['running_total'];
                      document.getElementById('&lt;?PHP echo $string1; ?&gt;Total').innerHTML = total_1;
                      if (str1.length &gt; 0) { str1 = str1.slice(1); }
  
                      while (str1.length &lt; totalPoints) {
                          var prev = str1.length &gt; 0 ? str1[str1.length - 1] : 50;
                          str1.push(y1);
                      }
  
                      // zip the generated y values with the x values
                      var res = [];
                      for (var i = 0; i &lt; str1.length; ++i){ res.push([i, str1[i]]) }
                      return res;
                  }
  
                  function getStr2() {
                      var ts2 = new Date().getTime();
                      var json2 = (function () {
                          var json2 = null;
                          var myURL = '&lt;?PHP echo $updateURL; ?&gt;?s=2&amp;ts=' + ts2;
                          $.ajax({
                              'async': false,
                              'global': false,
                              'url': myURL,
                              'dataType': "json",
                              'success': function (data) {
                                  json2 = data;
                              }
                          });
                          return json2;
                      })(); 
                      var y2 = json2['data']['avgpersec'];
                      var total_2 = json2['data']['running_total'];
                      document.getElementById('&lt;?PHP echo $string2; ?&gt;Total').innerHTML = total_2;
                      if (str2.length &gt; 0) { str2 = str2.slice(1); }
  
                      while (str2.length &lt; totalPoints) {
                          var prev = str2.length &gt; 0 ? str2[str2.length - 1] : 50;
                          str2.push(y2);
                      }
  
                      // zip the generated y values with the x values
                      var res = [];
                      for (var i = 0; i &lt; str2.length; ++i){ res.push([i, str2[i]]) }
                      return res;
                  }
  
                  // setup control widget
                  var updateInterval = 5000;
                  $("#updateInterval").val(updateInterval).change(function () {
                      var v = $(this).val();
                      if (v &amp;&amp; !isNaN(+v)) {
                          updateInterval = +v;
                      if (updateInterval &lt; 1)
                          updateInterval = 1;
                      if (updateInterval &gt; 2000)
                          updateInterval = 2000;
                          $(this).val("" + updateInterval);
                      }
                  });
  
                  // setup plot
                  var options = {
                      series: { shadowSize: 0 }, // drawing is faster without shadows
                      yaxis: { min: 0, max: maxYaxis},
                      xaxis: { show: false },
                      colors: ["&lt;?PHP echo $string1Color; ?&gt;","&lt;?PHP echo $string2Color; ?&gt;"]
                  };
                  var plot = $.plot($("#placeholder"), [ getStr1(), getStr2() ], options);
  
                  function update() {
                      plot.setData([ getStr1(), getStr2() ]);
                      plot.draw();
                      setTimeout(update, updateInterval);
                  }
  
                  update();
              });
          &lt;/script&gt;
  </code></pre>
  
  <p>What i am hoping to accomplish is to adjust the "$highY" (Y-axis) value real time as i plot new data points so that the chart will scale if the value of the new data plot point exceeds the current "yaxis { max: # }" set in the chart options.</p>