title: highcharts change chart type using dropdown for multiple series
body: <p>hello im a newbie in this field of programming, im trying to create a chart with a drop down list to chart type. I've already tried many solutions posted here, unfortunately not finding a working one with my code.
  any help appreciated.,</p>
  
  <p>here is the js fiddle link 
  <a href="http://jsfiddle.net/hKGSK/" rel="nofollow">http://jsfiddle.net/hKGSK/</a></p>
  
  <pre><code>$(function () {
  var chart = new Highcharts.Chart({
      chart: {
          renderTo: 'container',
          type: 'line',
          title: 'please select a category'
      },
  
      xAxis: {
          categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']//here we have a common timeline  (dates)
      }
  });
  
  $(".test").change(function() {
      var value = this.getAttribute("value");
      while (chart.series.length &gt; 0) {
          chart.series[0].remove(true);
      }
      if (value == 'a') {
          chart.yAxis[0].setTitle({ text: "#Active Learners" });
          chart.setTitle({text: "Active Learners"});
          chart.addSeries({
              name: '#Active Leaners',
              type: 'column',
              color: '#43cd80',  
              data:[100, 200, 300, 400, 100, 200, 100,200,300,100,400,100]//no. of active learners           
          });      
  
      } else if (value == 'b') {
          chart.addSeries({
              name: 'grade1',
              type: 'column',
              color: '#7FCDBB',  
              data:[100, 280, 300, 490, 670, 900,100,200,300,400,500,100]             
          });
          chart.addSeries({
              name: 'grade2',
             type: 'column',
             color: '#41B6C4',  
              data:[100, 200, 300, 400, 100, 200,900,800,300,500,200,100]             
          });                      
          chart.addSeries({
              name: 'grade3',
             type: 'column',
              color: '#1D91C0',  
              data:[234,578,234,895,234,54,214,234,474,214,123,235]             
          });
           chart.addSeries({
              name: 'grade4',
             type: 'column',
              color: '#253494',  
              data:[343,132,467,124,214,55,73,546,435,23,56,746]             
          });               
          chart.yAxis[0].setTitle({ text: "#Learners" });
          chart.setTitle({ text: "Learners per grade" });
      } else if (value == 'c') {
          chart.addSeries({
              name: 'age group 1',
              type: 'column',
              color: '#FCC5C0',  
              data:[450, 770, 540, 110, 340, 870,200,500,300,600,100]             
          });
          chart.addSeries({
              name: 'age group 2',
              type: 'column',
              color: '#F768A1',
              data:[563,234,675,567,234,834,341,415,300,200,100,200,400]
          });
          chart.addSeries({
              name: 'age group 3',
              type: 'column',
              color: '#AE017E',
              data:[100,200,300,400,500,100,200,300,400,500]
          });
          chart.addSeries({
              name: 'age group 4',
              type: 'column',
              color: '#49006A',
              data:[400,300,200,400,200,300,500,600,100,600,700]
          });
      } else {
              chart.addSeries({
              name: 'total number of learners',
              type: 'column',
              color: '#ffcc99',  
              data:[100,0,200,0,300,100,400,100,500,200,500,300]             
          }); 
      }
  });
  </code></pre>
  
  <p>});</p>