afterSetExtremes callback for highcharts - highcharts

Question

I'm creating a highchart using the lazy_highcharts gem. I'd like to make use of the afterSetExtremes callback to regenerate some other data on the page on zooming. I've tried several ways, currently trying:
#chart = LazyHighCharts::HighChart.new('graph') do |f|
f.chart(:zoomType =>'x', :defaultSeriesType => 'spline')
f.x_axis(:type=> 'datetime', :events => {:afterSetExtremes => "functon(event){alert('something')}"} )
end
But that gives me the error
Uncaught TypeError: Object functon(event){alert('something')} has no method 'apply'
in the javascript console when I zoom the chart. I assume this has something to do with the generator not correctly setting up the callback function, setting it as a string instead of interpreting it as a function.
I've also tried to set it on my chart object via javascript after creation, but so far have had no luck with that. A few attempts below
chart_my_id4.xAxis.events = {setExtremes: function(event) {
alert('set extremes');
}};
chart_my_id4.xAxis[1].events = {setExtremes: function(event) {
alert('set extremes');
}};
No luck there either.
Any insight appreciated, thank you.

Answer 1

Not too familiar with ... ruby, but I took a look at the source on github and they do the following when they set functions into attributes:
:formatter => "function() { return this.x; }".js_code
It would be worth a try to add that .js_code and see if it works so you end up with:
#chart = LazyHighCharts::HighChart.new('graph') do |f|
f.chart(:zoomType =>'x', :defaultSeriesType => 'spline')
f.x_axis(:type=> 'datetime', :events => {
:afterSetExtremes => "functon(event){alert('something')}".js_code
})
end

Answer 2

I'm not familiar with that gem, but in standard Highcharts 3.0 you can add event in that way:
chart.yAxis[0].update({
events: {
afterSetExtremes: function(){
alert('x');
}
}
});

Answer 3

You can do this like that :
LazyHighCharts::HighChart.new('graph') do |f|
...
f.xAxis(:events => { :afterSetExtremes => after_set_extremes_function})
end
-
def after_set_extremes_function
%|function(e) {
chart = Highcharts.charts[0];
chart.showLoading('Loading data...');
$.getJSON("/path_to_your_action?start="+Math.round(e.min)+"&end="+Math.round(e.max), function(data) {
chart.series[0].setData(data);
chart.hideLoading();
}
}
);
}|.js_code
end