<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8">
<title>angular-flot example</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.18/angular.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="json.js"></script>
<script src="script.js"></script>
</head>
<body style="background-color: #eee; padding:30px">
<div ng-controller="MainCtrl">
<div id="container" style="height: 580px"></div>
</div>
</body>
</html>
var app = angular.module('app', []);
app.directive('operationalhighstackstock', function() {
return {
restrict : 'E',
scope : true,
link : function postLink(scope, element, attrs) {
scope.$watch('operationHighChartsData', function(values){
console.log(values);
new Highcharts.StockChart(values);
});
}
};
});
app.controller('MainCtrl', ['$scope',
function($scope) {
var colorCodes = ["#8CC051", "#967BDC", "#5D9CEC", "#FB6E52", "#EC87BF", "#46CEAD", "#FFCE55", "#193441", "#193441", "#BEEB9F", "#E3DB9A", "#917A56"];
// Define tasks
var tasks = [{"name":"000AAA0G0000000000BE","intervals":[{"from":1418802839000,"to":1418806549000,"color":"#FFCC4E","fromDateString":"2014-12-16T23:53:59.000-08:00","toDateString":"2014-12-17T00:55:49.000-08:00"}]},{"name":"000AAA0I0000000000BY","intervals":[{"from":1417444654000,"to":1417444720000,"color":"#FFCC4E","fromDateString":"2014-12-01T06:37:34.000-08:00","toDateString":"2014-12-01T06:38:40.000-08:00"},{"from":1417444654000,"to":1417444720000,"color":"#FFCC4E","fromDateString":"2014-12-01T06:37:34.000-08:00","toDateString":"2014-12-01T06:38:40.000-08:00"}]},{"name":"000AAA0I0000000000BX","intervals":[{"from":1417704401000,"to":1417704714000,"color":"#8CC051","fromDateString":"2014-12-04T06:46:41.000-08:00","toDateString":"2014-12-04T06:51:54.000-08:00"},{"from":1417704401000,"to":1417704714000,"color":"#8CC051","fromDateString":"2014-12-04T06:46:41.000-08:00","toDateString":"2014-12-04T06:51:54.000-08:00"}]},{"name":"000AAA0G000000000034","intervals":[{"from":1417621846000,"to":1417621911000,"color":"#8CC051","fromDateString":"2014-12-03T07:50:46.000-08:00","toDateString":"2014-12-03T07:51:51.000-08:00"},{"from":1417621846000,"to":1417621911000,"color":"#8CC051","fromDateString":"2014-12-03T07:50:46.000-08:00","toDateString":"2014-12-03T07:51:51.000-08:00"}]},{"name":"000AAA0G0000000000BL","intervals":[{"from":1418379065000,"to":1418379708000,"color":"#8CC051","fromDateString":"2014-12-12T02:11:05.000-08:00","toDateString":"2014-12-12T02:21:48.000-08:00"},{"from":1417784600000,"to":1417784947000,"color":"#8CC051","fromDateString":"2014-12-05T05:03:20.000-08:00","toDateString":"2014-12-05T05:09:07.000-08:00"},{"from":1417526710000,"to":1417527055000,"color":"#8CC051","fromDateString":"2014-12-02T05:25:10.000-08:00","toDateString":"2014-12-02T05:30:55.000-08:00"},{"from":1417284242000,"to":1417284650000,"color":"#8CC051","fromDateString":"2014-11-29T10:04:02.000-08:00","toDateString":"2014-11-29T10:10:50.000-08:00"},{"from":1418379065000,"to":1418379708000,"color":"#8CC051","fromDateString":"2014-12-12T02:11:05.000-08:00","toDateString":"2014-12-12T02:21:48.000-08:00"},{"from":1417023777000,"to":1417023849000,"color":"#FF2A00","fromDateString":"2014-11-26T09:42:57.000-08:00","toDateString":"2014-11-26T09:44:09.000-08:00"},{"from":1417023777000,"to":1417023849000,"color":"#FF2A00","fromDateString":"2014-11-26T09:42:57.000-08:00","toDateString":"2014-11-26T09:44:09.000-08:00"},{"from":1417784600000,"to":1417784947000,"color":"#8CC051","fromDateString":"2014-12-05T05:03:20.000-08:00","toDateString":"2014-12-05T05:09:07.000-08:00"},{"from":1417526710000,"to":1417527055000,"color":"#8CC051","fromDateString":"2014-12-02T05:25:10.000-08:00","toDateString":"2014-12-02T05:30:55.000-08:00"},{"from":1417284242000,"to":1417284650000,"color":"#8CC051","fromDateString":"2014-11-29T10:04:02.000-08:00","toDateString":"2014-11-29T10:10:50.000-08:00"}]},{"name":"000AAA0G0000000000BK","intervals":[{"from":1417023769000,"to":1417023848000,"color":"#FF2A00","fromDateString":"2014-11-26T09:42:49.000-08:00","toDateString":"2014-11-26T09:44:08.000-08:00"},{"from":1417526507000,"to":1417526695000,"color":"#8CC051","fromDateString":"2014-12-02T05:21:47.000-08:00","toDateString":"2014-12-02T05:24:55.000-08:00"},{"from":1418379041000,"to":1418379530000,"color":"#8CC051","fromDateString":"2014-12-12T02:10:41.000-08:00","toDateString":"2014-12-12T02:18:50.000-08:00"},{"from":1417284231000,"to":1417284479000,"color":"#8CC051","fromDateString":"2014-11-29T10:03:51.000-08:00","toDateString":"2014-11-29T10:07:59.000-08:00"},{"from":1417023769000,"to":1417023848000,"color":"#FF2A00","fromDateString":"2014-11-26T09:42:49.000-08:00","toDateString":"2014-11-26T09:44:08.000-08:00"},{"from":1417193217000,"to":1417193316000,"color":"#FF2A00","fromDateString":"2014-11-28T08:46:57.000-08:00","toDateString":"2014-11-28T08:48:36.000-08:00"},{"from":1417784591000,"to":1417784803000,"color":"#8CC051","fromDateString":"2014-12-05T05:03:11.000-08:00","toDateString":"2014-12-05T05:06:43.000-08:00"},{"from":1418379041000,"to":1418379530000,"color":"#8CC051","fromDateString":"2014-12-12T02:10:41.000-08:00","toDateString":"2014-12-12T02:18:50.000-08:00"},{"from":1417526507000,"to":1417526695000,"color":"#8CC051","fromDateString":"2014-12-02T05:21:47.000-08:00","toDateString":"2014-12-02T05:24:55.000-08:00"},{"from":1417193217000,"to":1417193316000,"color":"#FF2A00","fromDateString":"2014-11-28T08:46:57.000-08:00","toDateString":"2014-11-28T08:48:36.000-08:00"},{"from":1417284231000,"to":1417284479000,"color":"#8CC051","fromDateString":"2014-11-29T10:03:51.000-08:00","toDateString":"2014-11-29T10:07:59.000-08:00"},{"from":1417784591000,"to":1417784803000,"color":"#8CC051","fromDateString":"2014-12-05T05:03:11.000-08:00","toDateString":"2014-12-05T05:06:43.000-08:00"}]},{"name":"000AAA0G000000000072","intervals":[{"from":1417438365000,"to":1417438868000,"color":"#8CC051","fromDateString":"2014-12-01T04:52:45.000-08:00","toDateString":"2014-12-01T05:01:08.000-08:00"},{"from":1417534020000,"to":1417534191000,"color":"#8CC051","fromDateString":"2014-12-02T07:27:00.000-08:00","toDateString":"2014-12-02T07:29:51.000-08:00"},{"from":1418379008000,"to":1418379422000,"color":"#8CC051","fromDateString":"2014-12-12T02:10:08.000-08:00","toDateString":"2014-12-12T02:17:02.000-08:00"},{"from":1418379008000,"to":1418379422000,"color":"#8CC051","fromDateString":"2014-12-12T02:10:08.000-08:00","toDateString":"2014-12-12T02:17:02.000-08:00"},{"from":1417284385000,"to":1417284537000,"color":"#FF2A00","fromDateString":"2014-11-29T10:06:25.000-08:00","toDateString":"2014-11-29T10:08:57.000-08:00"},{"from":1417284385000,"to":1417284537000,"color":"#FF2A00","fromDateString":"2014-11-29T10:06:25.000-08:00","toDateString":"2014-11-29T10:08:57.000-08:00"},{"from":1417284695000,"to":1417285215000,"color":"#8CC051","fromDateString":"2014-11-29T10:11:35.000-08:00","toDateString":"2014-11-29T10:20:15.000-08:00"},{"from":1417438365000,"to":1417438868000,"color":"#8CC051","fromDateString":"2014-12-01T04:52:45.000-08:00","toDateString":"2014-12-01T05:01:08.000-08:00"},{"from":1417534020000,"to":1417534191000,"color":"#8CC051","fromDateString":"2014-12-02T07:27:00.000-08:00","toDateString":"2014-12-02T07:29:51.000-08:00"},{"from":1417284695000,"to":1417285215000,"color":"#8CC051","fromDateString":"2014-11-29T10:11:35.000-08:00","toDateString":"2014-11-29T10:20:15.000-08:00"}]}];
// re-structure the tasks into line seriesvar series = [];
var series = [];
$.each(tasks.reverse(), function(i, task) {
var item = {
name: task.name,
data: [],
turboThreshold: 10000
};
$.each(task.intervals, function(j, interval) {
item.data.push({
x: interval.from,
y: i,
from: interval.from,
to: interval.to,
color: interval.color,
fromDateString: interval.fromDateString,
toDateString: interval.toDateString
}, {
x: interval.to,
y: i,
from: interval.from,
to: interval.to,
color: interval.color,
fromDateString: interval.fromDateString,
toDateString: interval.toDateString
});
// add a null value between intervals
if (task.intervals[j + 1]) {
item.data.push(
[(interval.to + task.intervals[j + 1].from) / 2, null]);
}
});
series.push(item);
});
//var series = getHichartsData(esResponse);
var chart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
height: 600
},
title: {},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
month: '%b %e, %Y'
}
},
yAxis: {
tickInterval: 1,
labels: {
formatter: function() {
if (tasks[this.value]) {
return tasks[this.value].name;
}
}
},
startOnTick: false,
endOnTick: false,
title: {
text: 'Task'
},
minPadding: 0.5,
maxPadding: 0.5
},
rangeSelector: {
selected: 2,
buttons: [{
type: "minute",
count: 60,
text: "1h"
}, {
type: "minute",
count: 180,
text: "3h"
}, {
type: "minute",
count: 300,
text: "5h"
}]
},
navigator: {
enabled: false
},
legend: {
enabled: true
},
tooltip: {
shared: false,
formatter: function() {
var str = '';
str += 'Task: ' + this.series.name + '<br>';
str += 'From: ' + Highcharts.dateFormat('%m/%d/%Y %H:%M', this.point.from) + '<br>';
str += 'To: ' + Highcharts.dateFormat('%m/%d/%Y %H:%M', this.point.to) + '<br>';
return str;
}
},
plotOptions: {
line: {
lineWidth: 10,
marker: {
enabled: true
},
dataLabels: {
enabled: true,
align: 'left',
formatter: function() {
return this.point.options && this.point.options.label;
}
}
}
},
series: series
});
$scope.operationHighChartsData = chart;
}
]);
/* Styles go here */
// Generated by CoffeeScript 1.7.1
angular.module('angular-flot', []).directive('flot', function() {
return {
restrict: 'EA',
template: '<div></div>',
scope: {
dataset: '=',
min: '=',
max: '=',
options: '=',
callback: '='
},
link: function(scope, element, attributes) {
var height, init, onDatasetChanged, onOptionsChanged, plot, plotArea, width;
var onMinChanged, onMaxChanged;
plot = null;
width = attributes.width || '100%';
height = attributes.height || '100%';
if (!scope.dataset) {
scope.dataset = [];
}
if (!scope.options) {
scope.options = {
legend: {
show: false
}
};
}
plotArea = $(element.children()[0]);
plotArea.css({
width: width,
height: height
});
init = function() {
var plotObj;
plotObj = $.plot(plotArea, scope.dataset, scope.options);
if (scope.callback) {
scope.callback(plotObj);
}
return plotObj;
};
onDatasetChanged = function(dataset) {
if (plot) {
plot.setData(dataset);
plot.setupGrid();
return plot.draw();
} else {
return plot = init();
}
};
scope.$watch('dataset', onDatasetChanged, true);
onMinChanged = function(min) {
if (plot) {
plot.getOptions().xaxes[0].min = min;
plot.setupGrid();
return plot.draw();
}
};
onMaxChanged = function(max) {
if (plot) {
plot.getOptions().xaxes[0].max = max;
plot.setupGrid();
return plot.draw();
}
};
scope.$watch('min', onMinChanged, true);
scope.$watch('max', onMaxChanged, true);
onOptionsChanged = function() {
return plot = init();
};
return scope.$watch('options', onOptionsChanged, true);
}
};
});
var esResponse = {
"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"
}
},
{
"_index": "asta_sync",
"_type": "tasks_run_history",
"_id": "216957850",
"_score": 1,
"_source": {
"end_time": "2014-11-20T07:52:12.000-08:00",
"start_time": "2014-11-20T07:52:01.000-08:00"
}
},
{
"_index": "asta_sync",
"_type": "tasks_run_history",
"_id": "216839441",
"_score": 1,
"_source": {
"end_time": "2014-11-20T08:08:10.000-08:00",
"start_time": "2014-11-20T08:08:02.000-08:00"
}
}
]
}
}
},
{
"key": "000AAA0G00000000006M",
"doc_count": 2,
"top_tags_hits": {
"hits": {
"total": 2,
"max_score": 1,
"hits": [
{
"_index": "asta_sync",
"_type": "tasks_run_history",
"_id": "216839440",
"_score": 1,
"_source": {
"end_time": "2014-11-20T11:01:12.000-08:00",
"start_time": "2014-11-20T11:01:08.000-08:00"
}
},
{
"_index": "asta_sync",
"_type": "tasks_run_history",
"_id": "216603055",
"_score": 1,
"_source": {
"end_time": "2014-11-20T10:55:23.000-08:00",
"start_time": "2014-11-20T10:55:22.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": "216981636",
"_score": 1,
"_source": {
"end_time": "2014-11-20T10:52:59.000-08:00",
"start_time": "2014-11-20T10:52:59.000-08:00"
}
}
]
}
}
},
{
"key": "000AAA0G00000000006L",
"doc_count": 1,
"top_tags_hits": {
"hits": {
"total": 1,
"max_score": 1,
"hits": [
{
"_index": "asta_sync",
"_type": "tasks_run_history",
"_id": "216650284",
"_score": 1,
"_source": {
"end_time": "2014-11-20T10:49:06.000-08:00",
"start_time": "2014-11-20T10:49:06.000-08:00"
}
}
]
}
}
},
{
"key": "000AAA0G00000000006N",
"doc_count": 1,
"top_tags_hits": {
"hits": {
"total": 1,
"max_score": 1,
"hits": [
{
"_index": "asta_sync",
"_type": "tasks_run_history",
"_id": "216768388",
"_score": 1,
"_source": {
"end_time": "2014-11-20T11:05:03.000-08:00",
"start_time": "2014-11-20T11:05:02.000-08:00"
}
}
]
}
}
},
{
"key": "000AAA0I00000000007N",
"doc_count": 1,
"top_tags_hits": {
"hits": {
"total": 1,
"max_score": 1,
"hits": [
{
"_index": "asta_sync",
"_type": "tasks_run_history",
"_id": "216981635",
"_score": 1,
"_source": {
"end_time": "2014-11-20T11:03:55.000-08:00",
"start_time": "2014-11-20T11:03:43.000-08:00"
}
}
]
}
}
}
]
}
}
]
}
}
};