Highstock chart is not showing which points are selected - highcharts

Question

I have just started exploring highcharts API. I am trying to create a highstock chart where I can select some points from the chart and edit/delete the values. However, even though I have got the selected points, I could not see them marked on the chart. The following code is working fine for highcharts, but not for highstock:
var option = {
chart: {
renderTo: 'container',
defaultSeriesType: 'line',
width: 800,
height:500,
events: {
selection: function(event) {
for (var i = 0; i < this.series[0].data.length; i++) {
var point = this.series[0].data[i];
console.log("Point:",point.y,point.x);
if (point.x >= event.xAxis[0].min &&
point.x <= event.xAxis[0].max &&
point.y >= event.yAxis[0].min &&
point.y <= event.yAxis[0].max) {
console.log("selecting");
this.series[0].data[i].select(true,true);
}
}
return false;
}
},
zoomType: 'xy'
},
title: {
text: "Test",
margin: 100,
backgroundColor: '#FCFFC5'
},
rangeSelector: {
inputBoxStyle: {
right: '-280px'
},
//selected: 0
},
xAxis: {
type: 'datetime',
tickInterval: 14 * 24 * 3600 * 1000, // one week
tickWidth: 0,
gridLineWidth: 1,
labels: {
align: 'left',
x: 3,
y: -3
}
},
yAxis: [{
title: {
text: yAxisTitle
},
labels: {
align: 'left',
x: 3,
y: 16,
formatter: function() {
return Highcharts.numberFormat(this.value, 0);
}
},
showFirstLabel: false
}, {
linkedTo: 0,
gridLineWidth: 0,
opposite: true,
title: {
text: "Target Steps"
},
labels: {
align: 'right',
x: 0,
y: 16,
formatter: function() {
return Highcharts.numberFormat(this.value, 0);
}
},
showFirstLabel: false
}],
legend: {
align: 'left',
verticalAlign: 'top',
y: 20,
floating: true,
borderWidth: 0
},
tooltip: {
shared: true,
crosshairs: true
},
plotOptions: {
series: {
allowPointSelect: true,
cursor: 'pointer',
marker: {
enabled: true,
},
point: {
events: {
click: function() {
(this).select(true,true);
hs.htmlExpand(null, {
pageOrigin: {
x: this.pageX,
y: this.pageY
},
headingText: ''+Highcharts.dateFormat('%e. %b %Y', this.x) +':<br/>',
maincontentText:"Test",
width: 400,
height:220
});
}
}
},
marker: {
lineWidth: 1
}
}
},
series: [{
name: seriesName[0],
lineWidth: 4,
marker: {
radius: 4
}
},{
name: seriesName[1]
}],
};
var series = {
data: []
};
options.series[0].data = myArray[0];
options.series[1].data = myArray[1];
window.historic_chart = new Highcharts.StockChart(options);
I would really appreciate if anyone helps me find out a solution to this problem and explains why the selected points are not marked on the highstock charts.
Thanks.

Answer 1

Most probably you are using sometimes dataGrouping, so you have empty series.data array. In that case use series groupedData to list points, see: http://jsfiddle.net/awGwn/2/
events: {
selection: function (event) {
console.log(this);
var points = this.series[0].data;
if(points.length == 0 ) {
points = this.series[0].groupedData;
}
for (var i in points) {
var point = points[i];
console.log("Point:", point.y, point.x);
if (point.x >= event.xAxis[0].min && point.x <= event.xAxis[0].max && point.y >= event.yAxis[0].min && point.y <= event.yAxis[0].max) {
console.log("selecting");
point.select(true, true);
}
}
return false;
}
},
zoomType: 'xy'
If this won't help, recrate issue by upgrading my jsFiddle, please.