I have some data which is coming from elasticsearch which has task's start & end time for a particular agent's task which needs to be plotted on chart horizontally indicating start and endtime of that particular task. I tried with columnrange chart type but in that I was not able to get to and from range selector, see here an example.
Then again I tried this and I was able to get it working, but need help in plotting the Elasticsearch data in highcharts.
One other problem is that the date which I get from server is in a human readable dateformat (check start_time and end_time), EST timezone and needs to be converted to a format which can be consumed by highcharts. Please help.
My highcharts directive
angular.module('myApp').directive('operationalhighstackstock', function() {
return {
restrict : 'E',
scope : true,
link : function postLink(scope, element, attrs) {
scope.$watch('operationHighChartsData', function(values){
new Highcharts.StockChart(values);
});
}
};
});
My template
<div style="width: 100%;">
<operationalhighstackstock></operationalhighstackstock>
<div id="container" style="width: 100%; height: 500px;"></div>
</div>
My controller
angular.module('myApp').controller('OperationReportChartController', function($scope, $filter, $location, $transition, MyService, $timeout) {
$scope.init = function() {
$scope.isOperationalReport = true;
$scope.initOperationalReport();
}
$scope.initOperationalReport = function() {
$scope.loading = true;
$scope.isChartDataAvailable = true;
$scope.operationReportDefaultQuery = operationReportDefaultQuery;
$scope.operationHighChartsData = {
chart : {
renderTo : 'container',
alignTicks : false
}
};
$scope.operationalReportDefaultServiceRequests();
}
$scope.serviceRequests = function() {
//Common service requests if any
}
$scope.operationalReportDefaultServiceRequests = function() {
$scope.isOperationalReport = true;
MyService.getOperationalReportChartData($scope.operationReportDefaultQuery).then(function(result) {
renderOperationalHighCharts(result);
});
}
function renderOperationalHighCharts(result) {
//var xAxisCategories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
//var series = getOperationReportChartSeriesData(result);
var chart_options = {
chart: {
renderTo: 'container'
},
xAxis: {
type: 'datetime'
},
yAxis: {
tickInterval: 1,
labels: {
formatter: function() {
if (tasks[this.value]) {
return tasks[this.value].name;
}
}
},
startOnTick: false,
endOnTick: false,
minPadding: 1,
maxPadding: 1
},
legend: {
enabled: false
},
plotOptions: {
line: {
lineWidth: 9,
marker: {
enabled: false
},
dataLabels: {
enabled: true,
align: 'left',
formatter: function() {
return this.point.options && this.point.options.label;
}
}
}
},
series: series
};
$scope.operationHighChartsData = chart_options;
}
$scope.init();
});
Partly complete data which needs to be consumed by Highcharts showing tasks start and end time for a particular agent.
{
"took": 43,
"timed_out": false,
"_shards": {
"total": 5,
"successful": 5,
"failed": 0
},
"hits": {
"total": 29,
"max_score": 1
},
"aggregations": {
"agent_names": {
"buckets": [
{
"key": "LUME - US AGG",
"doc_count": 4,
"top-sites": {
"buckets": [
{
"key": "000AAA0I00000000007W",
"doc_count": 2,
"top_tags_hits": {
"hits": {
"total": 2,
"max_score": 1,
"hits": [
{
"_index": "asta_sync",
"_type": "tasks_run_history",
"_id": "216934321",
"_score": 1,
"_source": {
"end_time": "2014-11-20T11:12:49.000-08:00",
"start_time": "2014-11-20T11:12:41.000-08:00"
}
},
{
"_index": "asta_sync",
"_type": "tasks_run_history",
"_id": "234218016",
"_score": 1,
"_source": {
"end_time": "2014-11-20T11:12:49.000-08:00",
"start_time": "2014-11-20T11:12:41.000-08:00"
}
}
]
}
}
},
{
"key": "000AAA0I00000000007X",
"doc_count": 2,
"top_tags_hits": {
"hits": {
"total": 2,
"max_score": 1,
"hits": [
{
"_index": "asta_sync",
"_type": "tasks_run_history",
"_id": "216556106",
"_score": 1,
"_source": {
"end_time": "2014-11-20T11:04:33.000-08:00",
"start_time": "2014-11-20T11:04:28.000-08:00"
}
},
{
"_index": "asta_sync",
"_type": "tasks_run_history",
"_id": "234218026",
"_score": 1,
"_source": {
"end_time": "2014-11-20T11:04:33.000-08:00",
"start_time": "2014-11-20T11:04:28.000-08:00"
}
}
]
}
}
},
{
"key": "000AAA0I00000000007Y",
"doc_count": 2,
"top_tags_hits": {
"hits": {
"total": 2,
"max_score": 1,
"hits": [
{
"_index": "asta_sync",
"_type": "tasks_run_history",
"_id": "235761199",
"_score": 1,
"_source": {
"end_time": "2014-11-20T10:59:44.000-08:00",
"start_time": "2014-11-20T10:59:43.000-08:00"
}
},
{
"_index": "asta_sync",
"_type": "tasks_run_history",
"_id": "217265041",
"_score": 1,
"_source": {
"end_time": "2014-11-20T10:59:44.000-08:00",
"start_time": "2014-11-20T10:59:43.000-08:00"
}
}
]
}
}
},
{
"key": "000AAA0G00000000006K",
"doc_count": 1,
"top_tags_hits": {
"hits": {
"total": 1,
"max_score": 1,
"hits": [
{
"_index": "asta_sync",
"_type": "tasks_run_history",
"_id": "234732452",
"_score": 1,
"_source": {
"end_time": "2014-11-20T10:52:59.000-08:00",
"start_time": "2014-11-20T10:52:59.000-08:00"
}
}
]
}
}
}
]
}
},
{
"key": "USWF - 01D",
"doc_count": 8,
"top-sites": {
"buckets": [
{
"key": "000AAA0I00000000007T",
"doc_count": 3,
"top_tags_hits": {
"hits": {
"total": 3,
"max_score": 1,
"hits": [
{
"_index": "asta_sync",
"_type": "tasks_run_history",
"_id": "216603056",
"_score": 1,
"_source": {
"end_time": "2014-11-20T11:03:01.000-08:00",
"start_time": "2014-11-20T11:02:41.000-08:00"
