title: Jquery, highchart: render plot on button click, roll backs
body: <p>I am trying to populate a chart with button click.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  
  
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.highcharts.com/highcharts.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.highcharts.com/modules/exporting.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  
  
  
  $(document).ready(function(){
  $('#hello').click(function() {
  
  var chart = new Highcharts.Chart({
      chart: {
          renderTo: 'container'
       },
  
  series: [{
      data: [29.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4]         
  }] //series
  }); //chart
  
  
  
  
  chart.series[0].setData([29.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4]);
  //return false;
  });; //button click
  
  }); //doc ready
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;h3&gt;generate table and plot&lt;/h3&gt;
  
  
  &lt;form id="helloform"&gt;
  &lt;table border=1&gt;
  &lt;tr&gt;&lt;td&gt;probability, p: &lt;/td&gt;&lt;td&gt;&lt;input type=text name=p size=5&gt;&lt;/td&gt;&lt;/tr&gt;
  
  
  &lt;tr&gt;&lt;td colspan=2 align=center&gt;&lt;button id="hello"&gt;populate table&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;
  
  
  &lt;tr&gt;
  &lt;td colspan=2 align=center&gt;&lt;input type=reset&gt;&lt;/td&gt;&lt;/tr&gt;
  &lt;/table&gt;
  &lt;/form&gt;
  &lt;div id="container" style="height: 400px"&gt;&lt;/div&gt;
  
  
  &lt;/html&gt;
  </code></pre>
  
  <p>For some reason, after the click , the plot renders, and disappears. I am thinking it may be because of .ready function and I tried load function instead of ready and nothing happens.Any help.</p>
  
  <p>By the way I am new to jQuery and even javascript</p>
  
  <p>Thanks</p>
  
  <p>Ananta</p>