animate a line chart which is created dynamically? - Javascript highcharts

Javascript examples for highcharts:Line Chart

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

Description

animate a line chart which is created dynamically?

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts Demo</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
      <script type="text/javascript">
$(function () {//w w  w .  j  a  va 2  s  .  c  o m
    $('#container').highcharts({
        chart: {
            animation: {
                duration: 1000
            }
        },
    });
    $('#update').click(function () {
        var chart = $('#container').highcharts();
        chart.addSeries({});
         for(var i = 0; i < 50 ; i ++){
           var chart = $('#container').highcharts();
           chart.series[0].addPoint([i,50 * (i % 3)])
        }
    });
});

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <div id="container" style="height: 300px"></div> 
      <button id="update">Update chart</button>  
   </body>
</html>

Related Tutorials