Adding datapoints wtih Highcharts on button click - highcharts

Question

Trying to add a single data point to a series when the user inputs a value and clicks a button.
<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);
});
This is the error:
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
Any suggestions on how to get this working?

Answer 1

The problem seems to be this
var val = edit.find('.metric').val();
It is of typeof string and in chart.series[0].addPoint([date, val]); it must be of typeof number
The correction:
chart.series[0].addPoint([date, +val]);or chart.series[0].addPoint([date, parseFloat(val)]);