highcharts - ボタンのクリック時にハイチャートを使用してデータポイントを追加する

Question

ユーザーが値を入力してボタンをクリックしたときに、シリーズに単一のデータ ポイントを追加しようとしています。

<div data-id="metricModel">
    <div class="edit">
      <input type="text" class="metric">
      <button class="submit">Confirm</button>
    </div>
  </div>

  <script>
    $('.submit').click(function() {
      var self = $(this);
      var edit = self.closest('.edit');
      var val = edit.find('.metric').val();
      var chart = $('#session').highcharts();
      var date = Date.UTC(2012, 11, 8);
      chart.series[0].addPoint([date, val]);
    });

var dates = [
      [Date.UTC(2011, 08, 1), -0.2],
      [Date.UTC(2011, 11, 1), 0.8],
      [Date.UTC(2012, 08, 1), 5.7],
      [Date.UTC(2012, 11, 6), 11.3]
    ];

$(function () {
      var options = {
        chart: {
          type: 'line',
          marginRight: 130,
          marginBottom: 25
        },
        title: {
          text: 'Power'
        },
        xAxis: {
          type: 'datetime'
        },
        yAxis: {
          title: {
            text: "Power"
          },
          plotLines: [{
            value: 0, 
            width: 1,
            color: '#808080'
          }]
        },
        legend: {
          layout: 'vertical',
          align: 'right',
          verticalAlign: 'top',
          x: -10,
          y: 100,
          borderWidth: 2
        },
        series: [{
          name: 'John',
          data: dates
          }]
        };
      $('#session').highcharts(options);
    });

これはエラーです：

Error: Problem parsing d="M 118.65966386554622 313.6 L 835.046218487395 182.2 L 1085.1302521008404 32.2 L 1090.3403361344538 " highcharts.js:9
A                       highcharts.js:9
ra.attr                 highcharts.js:42
e                       highcharts.js:25
cZ.run                  jquery.min.js:2
i                       jquery.min.js:2
p.fx.tick               jquery.min.js:2

これを機能させる方法に関する提案はありますか?