Set Additional Data to highcharts series in Area Chart with Line - highcharts

Question

I can't seem to figure out how to add an additional data point to the series data in Highcharts when running an area chart with line.
Here's the chart that I'd like to add an additional data point to:
http://jsfiddle.net/localman/uL8rwu6f/
$(function () {
var ranges = [
[1246406400000, 14.3, 27.7],
[1246492800000, 14.5, 27.8],
[1246579200000, 15.5, 29.6]
],
averages = [
[1246406400000, 21.5],
[1246492800000, 22.1],
[1246579200000, 23]
];
$('#container').highcharts({
title: {
text: 'July temperatures'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: null
}
},
tooltip: {
crosshairs: true,
shared: true,
valueSuffix: '°C'
},
legend: {
},
series: [{
name: 'Temperature',
data: averages,
zIndex: 1,
marker: {
fillColor: 'white',
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[0]
}
}, {
name: 'Range',
data: ranges,
type: 'arearange',
lineWidth: 0,
linkedTo: ':previous',
color: Highcharts.getOptions().colors[0],
fillOpacity: 0.3,
zIndex: 0
}]
});
});
I can display the additional data in a single series, but not with the above for some reason http://jsfiddle.net/localman/dWDE6/859/
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
tooltip: {
formatter: function () {
return 'Extra data: <b>' + this.point.myData + '</b>';
}
},
series: [{
name: 'Foo',
data: [{
y: 3,
myData: 'firstPoint'
}, {
y: 7,
myData: 'secondPoint'
}, {
y: 1,
myData: 'thirdPoint'
}]
}]
});
Any suggestions on how to combine these?