Dymanically Update Data in Highchart, Load Event is not Working - highcharts

Question

there's no data in load Event ( chart.series[0].data )
error code : Uncaught TypeError: Cannot read property 'open' of undefined
then put enabled:false like this..
ex)
dataGrouping: {
enabled: false
units: groupingUnits
},
it works, but too slow..
what should i do?
Here's my code:
$(document).ready(function(){
var area = {
chart:{
height:500,
marginRight:30,
backgroundColor:'#F4F4F4',
events: {
load: function() {
var chart = $('#container').highcharts();
var point = chart.series[0].data[chart.series[0].data.length -1];
text = chart.renderer.text(
'',
point.plotX + chart.plotLeft + 10,
point.plotY + chart.plotTop - 10
).attr({
zIndex: 5
}).add(),
box = text.getBBox();
chart.renderer.rect(box.x - 5, box.y - 5, box.width + 10, box.height + 10, 5)
.attr({
fill: '#FFFFEF',
stroke: 'gray',
'stroke-width': 1,
zIndex: 4
})
//.add();
series1 = this.series[0];
series2 = this.series[1];
//dataMax
var price = series1.data[series1.data.length -1].open;
refreshIntervalId = setInterval(function () {
var x = series1.data[series1.data.length -1].x; // current time
var time = (new Date).getTime();
var o = series1.data[series1.data.length -1].open;
var h = series1.data[series1.data.length -1].high;
var l = series1.data[series1.data.length -1].low;
if(time % 2 === 0){
price = o + Math.random() * 3;
}
else {
price = o - Math.random() * 3;
}
if(price > series1.data[series1.data.length -1].high){
h = price;
}
if(price < series1.data[series1.data.length -1].low){
l = price;
}
var c = price;
var y = series2.data[series2.data.length -1].y + Math.round(Math.random() * 1);
series1.data[series1.data.length -1].update({x : x, open : o, high: h, low: l, close: c}, true);
series2.data[series2.data.length -1].update({x : x, y: y}, false);
}, 1000);
}
}
},
credits: {
enabled:true,
position: { align: 'right', x: -10, verticalAlign: 'bottom', y: -5 },
style: { cursor: 'pointer', color: 'black', fontSize: '9px' }
},
scrollbar: {
enabled: false
},
rangeSelector: {
selected: 1,
inputEnabled: false
},
title: {
useHTML: true,
x: -10,
y: 8,
},
xAxis: {
gridLineWidth: 1,
labels: {
format: '{value:%m-%d}',//'{value:%Y-%m-%d}',
}
},
yAxis:[{
crosshair: {
snap: false
},
height: 200,
labels: {
align: 'right',
x: 25,
formatter: function (){
return $.number(Highcharts.numberFormat(this.value, 0,'',''));
}
},
},
/*volume*/
{
labels: {
align: 'right',
x: 20,
},
// lineWidth: 2
top: 280,
height: 113,
offset: 0,
}],
series: [{
type: 'candlestick',
name: 'AAPL Stock Price',
data: data,
dataGrouping: {
units: groupingUnits
},
point:{
events:{
mouseOver: function (){
var chart = this.series.chart;
if (!chart.lbl){
chart.lbl = chart.renderer.label('')
.attr({
padding: 10,
r: 10,
//fill: Highcharts.getOptions().colors[1]
})
.css({color: 'black'})
.add();
}//if OFF
var timeStamp = this.x,
date = new Date(parseFloat(timeStamp)),
currentTime = get_Date(date);
chart.lbl
.show()
.attr({
text: currentTime + ' H: ' + $.number(this.high) + ' L: ' + $.number(this.low) + ' O: ' + $.number(this.open) + ' C: ' + $.number(this.close),
y: 22,
});
},//mouseover OFF
mouseOut: function (){
if (this.series.chart.lbl){
this.series.chart.lbl.hide();
}//if OFF
}//mouseout OFF
},//events OFF
},//point OFF
}, //series[0] OFF
{
type: 'column',
name: 'Volume',
data: volume,
yAxis: 1,
dataGrouping: {
units: groupingUnits
},
}]//series[1] OFF
}
var dataLength = data.length,
i = 0;
groupingUnits = [[
'week', // unit name
[1] // allowed multiples
], [
'month',
[1, 2, 3, 4, 6]
]];
for (i; i < dataLength; i += 1) {
candlestickOhlc.push([
data[i][0], // the date
data[i][1], // open
data[i][2], // high
data[i][3], // low
data[i][4] // close
]);
volume.push([
data[i][0], // the date
data[i][5] // the volume
]);
}//for OFF
option = candlestick;
option.series[0].data = data;
$('#container').highcharts('StockChart', option);
});