title: Highcharts: dynamically updating chart per click of a button
body: <p>Note: I have already read this question: <a href="https://stackoverflow.com/questions/15162891/highcharts-dyanmic-graph-with-no-initial-data">Highcharts - Dyanmic graph with no initial data</a></p>
  
  <p>And the effect I want to achieve is similar to this: <a href="http://jsfiddle.net/7vZ5a/40/" rel="nofollow noreferrer">http://jsfiddle.net/7vZ5a/40/</a>. However, instead of updating every second, I would like it to update per click of a button. This is what I get so far:
  <a href="http://jsfiddle.net/7vZ5a/49/" rel="nofollow noreferrer">http://jsfiddle.net/7vZ5a/49/</a></p>
  
  <pre><code>$(function() {
    var chartData = [50, 60, 70, 100, 120, 200];
    var timeStamps = [];
    var index = 1;
    $('#b').click(function() {
      timeStamps.push(new Date());
      var buttonB = document.getElementById('b');
      buttonB.disabled = true;
      if (index &lt; chartData.length) {
        setTimeout(function() {
          if (index == 1) {
            $('#container').highcharts().series[0].addPoint([0, chartData[0]], true, false);
            $('#container').highcharts().series[0].addPoint([index, chartData[index]], true, false);
          } else {
            $('#container').highcharts().series[0].addPoint([index, chartData[index]], true, true);
             index++;
          }
        }, 1000);
      }
      if (index &lt; chartData.length - 1) {
        setTimeout(function() {
          buttonB.disabled = false;
        }, 1500);
      } else {
        setTimeout(function() {
          buttonB.style.visibility = "hidden";
        }, 1500);
      }
      if (index == chartData.length - 2) {
        setTimeout(function() {
          document.getElementById('b').innerHTML = 'Letzte Ziehung';
        }, 1000);
      }
      console.log(timeStamps);
    })
    Highcharts.setOptions({
      lang: {
        decimalPoint: ','
      },
    });
    $('#container').highcharts({
      chart: {
        type: 'line',
        marginBottom: 60
      },
      colors: [
        '#0000ff',
      ],
      title: {
        text: ''
      },
      xAxis: {
        title: {
          text: 'Time',
          offset: 23
        },
  
        min: 0,
        max: 1,
        tickInterval: 1,
        gridLineWidth: 1
  
      },
      yAxis: {
        title: {
          text: 'Value'
        },
        min: 0,
        max: 200
      },
      plotOptions: {
        line: {
          marker: {
            enabled: false
          }
        }
      },
      tooltip: {
        formatter: function() {
          return Highcharts.numberFormat(this.y, 2) + 'GE';
        }
      },
      legend: {
        enabled: false
      },
      exporting: {
        enabled: false
      },
      credits: {
        enabled: false
      },
      series: [{
        name: '',
        data: []
      }]
    });
  });
  </code></pre>
  
  <p>Why (almost) the same code could work on the case when the chart update automatically but not on the case when the update is triggered by click?
  (I also tried the function with the code controlling update not in "setTimeout" block, it also did not work.)</p>