change data series with link for column chart - Javascript highcharts

Javascript examples for highcharts:Chart Data

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

Description

change data series with link for column chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>select data set</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.4.4.min.js"></script> 
      <script type="text/javascript">
    $(window).load(function(){/*from w  w  w.  ja  v  a  2s .c om*/
var data = [];
data['A'] = [1,2,5,9,8,7,4,5,8,9];
data['B'] = [5,2,6,9,8,7,4,5,8,7];
data['C'] = [2,5,8,9,6,5,8,7,4,1];
data['D'] = [3,9,7,4,5,6,5,4,1,5];
var options = {
    chart: {
        renderTo: 'container',
        defaultSeriesType: 'column'
    }
};
var chart = new Highcharts.Chart(options);
chart.addSeries({data:data.A});
$("#list").change(function(){
    var val = $(this).val();
    chart.series[0].setData(data[val]);
});
    });

      </script> 
   </head> 
   <body> 
      <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> 
      <div id="container" style="height: 400px"></div> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/highcharts-more.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script>  
   </body>
</html>

Related Tutorials