I have a highchart which shows tasks run during a period of time with a navigator. Is there a way to show a custom summary of all tasks showing number of success, failed or warning tasks along with the selected date range?
Note: As and when the navigator changes the summary is also updated. Here is my plunker
I read here that using setExtremes I can get navigator drop event but looks like I only get date and not other data fields.
xAxis: {
type: 'datetime',
gridLineWidth: 1,
tickInterval: 1 * 3600 * 1000,
dateTimeLabelFormats: {
month: '%b %e, %Y'
},
events: {
setExtremes: function(e) {
if (e.trigger == 'navigator') {
$scope.taskstatus = e.min + " - " + e.max;
}
}
}
},
Expected summary
Update
I am using highstock 2.0.4 version in this I cannot find currentTarget which is present in my plunker
for highstock 2.0.4 version below is the setExtremes function which sometimes gives incorrect counts, please help
$scope.setExtremesCall = function(e) {
if (e.trigger == 'navigator') {
var ftasks = 0,
stasks = 0,
wtasks = 0,
alltasks = [];
var currentSeriesArr = e.target.series;
angular.forEach(currentSeriesArr, function(obj) {
var currdatapoints = obj.segments;
if (currdatapoints.length > 0) {
angular.forEach(currdatapoints, function(inrobj) {
var firstKey = $scope.getFirstKey(inrobj),
taskStatus = $scope.getJobStatus(inrobj[firstKey].color);
if (taskStatus != null) {
if (taskStatus == "FAILED") {
ftasks++;
} else if (taskStatus == "SUCCESS") {
if (stasks == 4)
$scope.a = 1;
stasks++;
} else if (taskStatus == "WARNING") {
wtasks++;
}
}
});
}
});
taskstatus = e.min + " - " + e.max + " " + ftasks + " Failed, " + stasks + " Success, " + wtasks + " Warning";
console.log(taskstatus);
}
}
$scope.getFirstKey = function(data) {
for (elem in data)
return elem;
}
$scope.getJobStatus = function(stat) {
if (stat == "#8CC051")
return "SUCCESS";
else if (stat == "#FF2A00")
return "FAILED"
else if (stat == "#FFCC4E")
return "WARNING";
return null;
}
How about a bit different approach. Check existing points (visible ones of course) and then divide that number by 2 (each line is built from two points). Something like this:
afterSetExtremes: function(e) {
var stat = {
FAILED: 0,
SUCCESS: 0,
WARNING: 0
},
status;
if (e.trigger == 'navigator') {
var series = this.series;
angular.forEach(series, function(serie, j) {
angular.forEach(serie.points, function(p, i) {
if(p.isInside) {
status = $scope.getJobStatus(p.color);
stat[status] ++
}
});
});
taskstatus = e.min +" - "+ e.max+" "+ Math.ceil(stat.FAILED / 2) + " Failed, "+ Math.ceil(stat.SUCCESS / 2) +" Success, "+ Math.ceil(stat.WARNING / 2)+" Warning";
$('#summary').html(taskstatus);
}
}
Live demo: http://plnkr.co/edit/btWjdME5UomLpsG6F1y5?p=preview