Series and categories data changing dynamically - Javascript highcharts

Javascript examples for highcharts:Chart Series

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

Description

Series and categories data changing dynamically

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://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
      <script type="text/javascript" src="http://highcharts.com/js/testing.js"></script> 
      <script type="text/javascript">
    $(window).load(function(){/*from  www.j a v a  2 s.co  m*/
$(function () {
var options = {
    chart: {
        renderTo: 'container',
        defaultSeriesType: 'column'
    },
            xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
        },
    series: [{name: 'A', data: [1,2,3,2,1]}]
};
var chart = new Highcharts.Chart(options);
$("#list").on('change', function(){
    //alert('f')
    var selVal = $("#list").val();
    if(selVal == "A" || selVal == '')
    {
        options.series = [{name: 'A', data: [1,2,3,2,1]}]
    }
    else if(selVal == "B")
    {
        options.series = [{name: 'B', data: [3,2,1,2,3]}]
    }
    else if(selVal == "C")
    {
        options.series = [{name: 'C', data: [5,4,8,7,6]}]
    }
    else
    {
        options.series = [{name: 'D', data: [4,7,9,6,2]}]
    }
    var chart = new Highcharts.Chart(options);
});
    $("#list").on('change', function(){
          var selVal = $("#list").val();
        if(selVal == "B")
        {
        var chart = $('#container').highcharts();
        chart.xAxis[0].setCategories(['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D']);
        }
    });
    });
    });

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <select id="list"> 
         <option value="A">Data Set A</option> 
         <option value="B">Data Set B</option> 
         <option value="C">Data Set C</option> 
         <option value="D">Data Set D</option> 
      </select> 
      <button id="change">Refresh Table</button> 
      <div id="container" style="height: 400px"></div> 
      <button id="button" class="autocompare">Set categories</button>  
   </body>
</html>

Related Tutorials