title: change highchart data using radio buttons
body: <p>I have made a chart on my website using <a href="http://www.highcharts.com/" rel="nofollow">Highcharts</a>, and it's working sucessfully.</p>
  
  <p>Now I have added a radio button on my chart and want it to change the data when I select a radio button list.</p>
  
  <p>Here is my working chart:</p>
  
  <p></p>
  
  <pre><code>   $(function() {
  
         $('#container1').highcharts({
             chart: {
                 type: 'column'
             },
  
            title: {
             text: 'Information '
             },
              yAxis: {
                 title: {
                 text: 'data'
          } },
  
  
        series: [{
  
                 name: '2011-2012',
                 color: '#0000FF',
                 data: [1, 0, 4]
       },  {   
                color: '#FF0000',
                name: '2013-2014',
                data: [5, 4, 8]
     }]
         });
  
     });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>This is the radio button I have added:</p>
  
  <pre><code>    &lt;asp:RadioButtonList RepeatDirection="Horizontal" CssClass="radioList" ID="RadioButtonList1"
                  AutoPostBack="true" runat="server" RepeatLayout="Flow"&gt;
                  &lt;asp:ListItem Selected="True" Value="0"&gt;data&lt;/asp:ListItem&gt;
                  &lt;asp:ListItem Value="2"&gt;data2&lt;/asp:ListItem&gt;
                  &lt;asp:ListItem Value="1"&gt;data3&lt;/asp:ListItem&gt;
              &lt;/asp:RadioButtonList&gt;
  </code></pre>
  
  <p>How can i select radio button data3, and then show a new set of data?<br />
  The closest I came was:</p>
  
  <pre><code>$("#change").click(function(){
  if ($("#list").val() == "A")
  {
  options.series = [{name: 'A', data: [1,2,1]}]
   }
   else
   {
  options.series = [{name: 'B', data: [3,2,3]}]
   } 
   var chart = new Highcharts.Chart(options);    
   });
  </code></pre>
  
  <p>This does not work, why?.</p>