title: Why isn't my highcharts chart getting reset/destroyed properly?
body: <p>In my code I'm initializing the chart like this...</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  var chart = null,
  defaultOptions = {
  chart: etc etc
  };
  
  
  function drawDefaultChart() {
      chart = new Highcharts.Chart(defaultOptions);
  }
  
  $(function() {
      $(document).ready(function() {
          drawDefaultChart();
      });
  });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>then in the body I have</p>
  
  <pre><code>&lt;a href="#" onclick="drawDefaultChart()"&gt;Reset&lt;/a&gt;
  </code></pre>
  
  <p>but when you click the link, all it does is redraw the graph with the settings from the previous state... I'm not quite sure what is going on. If I add chart.destroy(); the chart doesn't work at all...</p>
  
  <pre><code>function drawDefaultChart() {
      chart.destroy();  //this makes the chart not work at all
      chart = new Highcharts.Chart(defaultOptions);
  }
  </code></pre>
  
  <p>You can clearly see that I 'm pasing default options to the chart that is suppose to get redrawn.... I don't understand why it uses the old filter settings, i'm about to jump off a bridge, can somebody PLEASE HELP?</p>
  
  <p>my live example is here <a href="http://goo.gl/sGu0M" rel="nofollow">http://goo.gl/sGu0M</a></p>
  
  <p>//////// UPDATE</p>
  
  <p>I was able to do it with a lot of blood, sweat, and tears. I ended up putting the data into a php variable on another page (to save real estate), and then calling it using php variables, and then I just call it everytime someone clicks a link. I figured out that in order to redraw the graph, you have to reload ALL the data in each time. The PHP makes this easier in terms of amount of data on the screen.</p>
  
  <p>this was the link that eventually helped me figure it out. <a href="http://jsfiddle.net/dane/YUa3R/34/" rel="nofollow">http://jsfiddle.net/dane/YUa3R/34/</a></p>