Animation origin of chart - Javascript highcharts

Javascript examples for highcharts:Chart Configuration

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

Description

Animation origin of 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.9.1.js"></script> 
      <style id="compiled-css" type="text/css">

.chart {//w ww. j  ava  2  s.  c  om
   height: 400px;
   width: 680px;
}
section {
   margin-bottom: 40px;
}


      </style> 
      <script type="text/javascript">
    $(window).load(function(){
$(function(){
    var columnChart = new Highcharts.Chart ({
        chart: {
            type: 'column',
            renderTo: 'columnChart'
        },
        title: {
            text: 'Great chart'
        },
        xAxis: {
            categories: ['<5', '5-9', '10-14','15-19','20-24','25-29','30-39','40-49','50-59','60-69','>69'],
            min: 0,
            max: 10,
            title: {
                text: 'Age'
            },
            showEmpty: true
        },
        yAxis: {
            title: {
                text: 'Some numbers'
            },
            min: 0,
            max: 20,
            showEmpty: true,
            alternateGridColor: '#eee'
        },
        series: [{visible: false, showInLegend: false}],
        plotOptions: {
            column: {
                events: {
                    legendItemClick: function(){ return false; }
                }
            }
        },
        credits: {
            enabled: false
        }
    });
    var i = 0;
    $('#addBar').click(function(){
        try {
            if (i == 0) {
                columnChart.addSeries({name:'male',data:[1, 1, 5, 8, 10, 15, 19, 14, 10, 8, 4]});
            }
            else if (i == 1) {
                columnChart.addSeries({name:'female',data:[2, 1, 3, 4, 5, 6, 8, 4, 4, 3, 2]});
            }
            i++;
        } catch(e){
            console.dir(e);
        }
    });
});
    });

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <section> 
         <div id="columnChart" class="chart"></div> 
         <button id="addBar">+</button> 
      </section>  
   </body>
</html>

Related Tutorials