title: Real time rendering using JSPlot
body: <p>I have started using JQPlot to draw the graph in real time as well. I have got one sample example working in which it will draw the graph with two data only-</p>
  
  <pre><code>var storedData = [70, 10];
  </code></pre>
  
  <p>Then I have added a button, if I click on that button, it will start rendering some more data. Basically, you can say just like real time data from the server-</p>
  
  <p>But the problem that I am facing currently is, as soon as I clicked on <code>Start Updates</code> button, it doesn't draw anything. So I believe, I messed up something the button click thing. It's been a long time I worked on Javascript and HTML thing so I have forgotten lot of things.</p>
  
  <p>Below is my code-</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
  &lt;head&gt;
  
      &lt;title&gt;Line Charts and Options&lt;/title&gt;
  
      &lt;link class="include" rel="stylesheet" type="text/css" href="../jquery.jqplot.min.css" /&gt;
      &lt;link rel="stylesheet" type="text/css" href="examples.min.css" /&gt;
      &lt;link type="text/css" rel="stylesheet" href="syntaxhighlighter/styles/shCoreDefault.min.css" /&gt;
      &lt;link type="text/css" rel="stylesheet" href="syntaxhighlighter/styles/shThemejqPlot.min.css" /&gt;
  
      &lt;!--[if lt IE 9]&gt;&lt;script language="javascript" type="text/javascript" src="../excanvas.js"&gt;&lt;/script&gt;&lt;![endif]--&gt;
      &lt;script class="include" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
  
  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="colmask leftmenu"&gt;
        &lt;div class="colleft"&gt;
          &lt;div class="col1" id="example-content"&gt;
  
  &lt;div id="chart1" style="height: 300px; width: 500px; position: relative;"&gt;&lt;/div&gt;
  &lt;button&gt;Start Updates&lt;/button&gt;
  
  
  
  &lt;script class="code" type="text/javascript"&gt;
  $(document).ready(function(){
    var storedData = [70, 10];
    var plot1;
    renderGraph();
  
  
  $('button').click( function(){
      doUpdate();
      $(this).hide();
  });
  
  function renderGraph() {
      if (plot1) {
          plot1.destroy();
      }
      plot1 = $.jqplot('chart1', [storedData]);
  }
  
  var newData = [9, 1, 4, 6, 8, 2, 5];
  
  
  function doUpdate() {
      if (newData.length) {
          var val = newData.shift();
          $.post('/echo/html/', {
              html: val
          }, function(response) {
              var newVal = new Number(response); /* update storedData array*/
              storedData.push(newVal);
              renderGraph();
              log('New Value '+ newVal+' added')
              setTimeout(doUpdate, 3000)
          })
  
      } else {
          log("All Done")
      }
  }
  
  function log(msg) {
  $('body').append('&lt;div&gt;'+msg+'&lt;/div&gt;')
  }
  });
  &lt;/script&gt;
  
  
      &lt;script class="include" type="text/javascript" src="../jquery.jqplot.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="syntaxhighlighter/scripts/shCore.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="syntaxhighlighter/scripts/shBrushJScript.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="syntaxhighlighter/scripts/shBrushXml.min.js"&gt;&lt;/script&gt;
  
    &lt;script class="include" type="text/javascript" src="../plugins/jqplot.canvasTextRenderer.min.js"&gt;&lt;/script&gt;
    &lt;script class="include" type="text/javascript" src="../plugins/jqplot.canvasAxisLabelRenderer.min.js"&gt;&lt;/script&gt;
  
  
  &lt;/body&gt;
  
  
  &lt;/html&gt;
  </code></pre>
  
  <p>I am not able to make the button click event work. As soon as I click on <code>Start Update</code> button, it does not draw anything. Correct behavior should be that it should start rendering on the graph with new datasets.</p>
  
  <p>I tried to make that real-time rendering thing work from this <a href="http://jsfiddle.net/ZqCXP/" rel="nofollow">jsfiddle</a></p>
  
  <p>I copied same bunch of code from the above JSFiddle in my HTML but it doesn't working for me. Can anybody help me with this?</p>