title: How to slide highcharts?
body: <p>I want to make a slider that shows up different charts after some time or on mouse click. (Just like an image slider.)</p>
  
  <p>How to do that??
  I know jQuery little bit but I dont know how to implements this.</p>
  
  <p>EDIT:</p>
  
  <p>I am experimenting with setInterval method on load event.</p>
  
  <p>But, When I pull data from xml files, my code does not work. But, if I put explicit values rather than the xml file, the codes works exactly as I want.
  I am pasting my code here. </p>
  
  <pre><code>$(document).ready(function($) {
  
      makeChart('data1.xml');
  
  
      function makeChart(file) {
  
          var options = {
  
              chart: {
                  renderTo: 'container',
                  type: '',
                  events: {
                      load: function() {
  
                          // set up the updating of the chart each second                            
                          setInterval(function() {
  
                              makeChart('data2.xml');
                          }, 1000);
                      }
                  }
              },
              title: {
                  text: 'Fruit Consumption'
              },
              xAxis: {
                  type: 'datetime',
                  tickPixelInterval: 150
              },
              yAxis: {
                  title: {
                      text: 'Value'
                  },
                  plotLines: [{
                      value: 0,
                      width: 1,
                      color: '#808080'}]
              },
              tooltip: {
                  formatter: function() {
                      return '&lt;b&gt;' + this.point.name + '&lt;/b&gt;: ' + this.percentage + ' %';
                  }
              },
  
              xAxis: {
                  categories: []
              },
              yAxis: {
                  title: {
                      text: 'Units'
                  }
              },
  
              series: []
  
          };
  
          $.get(file, function(xml) {
  
              // Split the lines
              var $xml = $(xml);
  
              options.chart.type = ($xml.find('type').text());
  
              // push categories
              $xml.find('categories item').each(function(i, category) {
                  options.xAxis.categories.push($(category).text());
              });
  
              // push series
              $xml.find('series').each(function(i, series) {
                  var seriesOptions = {
                      name: $(series).find('name').text(),
                      data: []
                  };
  
                  // push data points
                  $(series).find('data point').each(function(i, point) {
                      seriesOptions.data.push(
                      parseInt($(point).text()));
                  });
  
                  // add it to the options
                  options.series.push(seriesOptions);
              });
              var chart = new Highcharts.Chart(options);
          });
  
      }
  });​
  </code></pre>