highstock charts - button for date range - highcharts

Question

in my application I use angular Highstock for charts. I have a lot of data (many millions), and now i want to put the existing buttons for set date range (1week, 1 month, 3 months, 1year, all), but also to click on any button to send a new request to the server to not accumulating data. Example, if pressed button "one week", that only the server retrieves the data for one week, if you click on a button to one month, to take data for a single month. I do not want to call unnecessary data, and that the server slows down, if I'm looking for data for one month, and the server comes back to me all data. Here is the code. Thanks in advance
> https://jsfiddle.net/tf7pr1ft/

Answer 1

Thnx to #Grzegorz Blachliński i fix this. here is code
$scope.chartConfig1 = {
xAxis: {
ordinal: false,
//za dodat date range postavit events i range selectors
events : {
afterSetExtremes: getDateRange //here i add my custom function
}
},
yAxis: {
plotLines: [{
color: '#FF0000',
width: 1,
value: 11.50,
label: {text: '11.50'}
}]
},
options: {
chart: {
zoomType: 'x',
backgroundColor: 'rgba(255, 255, 255, 1)',
polar: true,
type: 'line',
borderRadius: 5
},
legend: {
enabled: true
},
rangeSelector: {
selected : 0, //here i defined default range
enabled: true,
inputStyle: {
color: 'black'
}
},
navigator: {
enabled: true
}
},
series: [],
title: {
text: 'Solar and Battery voltage average'
},
useHighStocks: true
},
$scope.chartConfig1.series.push({
id: 1,
name: "Solar voltage average",
data: $scope.data[0],
tooltip: {
valueDecimals: 2
}
},   {
id: 2,
name: "Battery voltage average",
data: $scope.data[1],
tooltip: {
valueDecimals: 2
}
}
);
and here is my custom function
getDateRange = function (e) {
var date1 = new Date(e.min);
var date2 = new Date(e.max);
var timeDiff = Math.abs(date2.getTime() - date1.getTime());
var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24));
$http.get(serviceBase + 'aaaaa/aaaaaa/' + $stateParams.klupaID + '/aaaaaaa?days=' + diffDays, function(data){
//ukoliko buden dodavat još koji config obavezno dodat broj koliko ih ima na i<=8
for (i=1; i<=8; i++){
$scope.chartConfigString = 'chartConfig' + i;
$scope.chartConfigString.series[0].setData(data);
$scope.chartConfigString.hideLoading();
}
});
};
Now i have another problems, i want to have four selectors (buttons), 1months, 3months, 1year and ALL. I set default range, when open app, on 1month, and here is problem. Buttons for another range is disabled, beacause i get data from url only for one month. I want to have enabled all buttons for select any range. Thnx