render plot on button click, roll backs line chart - Javascript highcharts

Javascript examples for highcharts:Line Chart

  1. HOME
  2. Javascript
  3. highcharts
  4. Line Chart

Description

render plot on button click, roll backs line chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.7.1.js"></script> 
      <script type="text/javascript">
    $(window).load(function(){//from w ww.ja  v a  2 s.c  o m
    });

      </script> 
   </head> 
   <body>   
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <script type="text/javascript">
$(document).ready(function(){
$('#hello').click(function(e) {
e.preventDefault();
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

      </script>   
      <h3>generate table and plot</h3> 
      <form id="helloform"> 
         <table border="1"> 
            <tbody>
               <tr>
                  <td>probability, p: </td>
                  <td>
                     <input type="text" name="p" size="5">
                  </td>
               </tr> 
               <tr>
                  <td colspan="2" align="center">
                     <button id="hello">populate table</button>
                  </td>
               </tr> 
               <tr> 
                  <td colspan="2" align="center">
                     <input type="reset">
                  </td>
               </tr> 
            </tbody>
         </table> 
      </form> 
      <div id="container" style="height: 400px"></div>   
   </body>
</html>

Related Tutorials