What would be the best way to change the fleet dataset based on range selection?
I am using angularjs flot and slider to show the graph and based on the range selection the data visualization should change in the float graph.
My question is, what would be the best way to visualize the data depending on the range selection? Do I need to add / remove float data every time a range is selected or is there a better way? I provide my source code below and some screenshots. Please, help.
Note : $scope.tasksRunDataChartObject;
has json data from server formatted for float.
Screenshot and slider code
<rzslider rz-slider-floor="reportTasksRunRange.floor"
rz-slider-ceil="reportTasksRunRange.ceil"
rz-slider-model="reportTasksRunRange.min"
rz-slider-high="reportTasksRunRange.max"
rz-slider-translate="translate" rz-slider-step="{{reportTasksRunRange.step}}"></rzslider>
<flot dataset="tasksRunData" options="tasksRunChartOptions" class="center-block" width="100%" height="400px" ></flot>
$scope.reportTasksRunRange = {
min: 1412380800000,
max: 1412812800000,
floor: 1412380800000,
ceil: 1412812800000,
step: 1412467200000-1412380800000
};
$scope.translate = function(value) {
var monthNames = [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ];
var myDate = new Date( value );
return myDate.getDate() + " " + monthNames[myDate.getMonth()] + " '"+myDate.getFullYear();
}
$scope.$on('slideEnded', function () {
console.log("slideEnded Event Fired : " +$scope.translate($scope.reportTasksRunRange.min)+" - "+$scope.translate($scope.reportTasksRunRange.max));
$scope.redrawTasksRunDataHistoByChart($scope.translate($scope.reportTasksRunRange.min), $scope.translate($scope.reportTasksRunRange.max));
});
$scope.redrawTasksRunDataHistoByChart = function(min, max) {
var mainArray = $scope.tasksRunDataChartObject;
console.log("mainArray");
console.log(mainArray);
/*var dataArray = mainArray[0]["data"];
dataArray.splice(2,1);
mainArray[0]["data"] = dataArray;
mainArray[0]["data"] = mainArray[0]["data"].splice(2,1);
$scope.tasksRunData = mainArray;
console.log(mainArray);*/
}
Json data from server
{
"date_histo_agg_by_type": {
"took": 332,
"timed_out": false,
"_shards": {
"total": 5,
"successful": 5,
"failed": 0
},
"hits": {
"total": 14868,
"max_score": 0.0,
"hits": []
},
"aggregations": {
"task_type": {
"buckets": [{
"key": "DSS",
"doc_count": 14868,
"run_over_time": {
"buckets": [{
"key_as_string": "2014-10-04T00:00:00.000Z",
"key": 1412380800000,
"doc_count": 477
},
{
"key_as_string": "2014-10-05T00:00:00.000Z",
"key": 1412467200000,
"doc_count": 3015
},
{
"key_as_string": "2014-10-06T00:00:00.000Z",
"key": 1412553600000,
"doc_count": 2988
},
{
"key_as_string": "2014-10-07T00:00:00.000Z",
"key": 1412640000000,
"doc_count": 3123
},
{
"key_as_string": "2014-10-08T00:00:00.000Z",
"key": 1412726400000,
"doc_count": 2970
},
{
"key_as_string": "2014-10-09T00:00:00.000Z",
"key": 1412812800000,
"doc_count": 2295
}]
}
}
}
}
}
}
Chrome debug snapshot
Update
ReportService.getTasksRunDateHistoByType().then(function(result) {
$scope.renderTasksRunDateHistoByType(result);
});
$scope.renderTasksRunDateHistoByType = function(json) {
var buckets = json[RUN_AGG_BY_DATE_HISTO].aggregations[TASK_TYPE_AGG].buckets;
var log = [];
var mainArray = [];
var colorCodes = ["#7BC253","#9C77D7","#399CEA","#FF6244","#FF7FB5","#00D3AB","#FFCC4C","#193441","#193441","#BEEB9F","#E3DB9A","#917A56"],
idx = 0;
angular.forEach(buckets, function(value, key) {
this.push(key + ': ' + value +", "+value["key"]);
var dataArray = [], index = 0;
angular.forEach(value[RUN_OVER_TIME_KEY]["buckets"], function(value, key) {
var dataArr = [];
dataArr.push('['+value["key"]+', '+value["doc_count"]+']');
dataArray.push(dataArr);
index++;
}, log);
var barObject = '"bars": {"show": "true", "barWidth":'+23*60*60*1000+', "fillColor": "'+colorCodes[idx]+'", "order": 1, "align": "center"}';
var object = '{ "data": ['+dataArray+'], "label": "'+value["key"]+'", '+barObject+'}';
mainArray.push(JSON.parse(object));
idx++;
}, log);
$scope.tasksRunData = mainArray;
$scope.tasksRunChartOptions = {
legend: {
show: true,
margin: 2
},
xaxis: {
mode: "time", timeformat: "%m/%d/%y", minTickSize: [1, "day"]
},
grid: {
labelMargin: 10,
hoverable: true,
borderWidth: 0
},
series: {
stack: true
},
colors: colorCodes,
tooltip: true
};
return mainArray;
}
Angularjs Service
angular.module('myApp')
.service('ReportService', function ReportService($http, $q) {
var getTasksRunDateHistoByType = function() {
var deferred = $q.defer();
$http({
method: 'POST',
url: "http://localhost:4040/reports/taskRun",
data: '{ "client_user_info": { "client_id": "MU03"}}'
}).
success(function(result, status, headers, config) {
deferred.resolve(result);
}).
error(function(result, status, headers, config) {
console.log("Error");
});
return deferred.promise;
};
return {
getTasksRunDateHistoByType: getTasksRunDateHistoByType
};
});
fleet schedule
source to share
From your question, it looks like you are making an AJAX call on an event slideEnded
and replacing the data in the chart. This will work, but it will be slow and will not provide a better user experience. Instead, I would draw the entire graph with all the data. Then I would tweak the min / max charts for when the user slides and redraws. This way you can only do one AJAX on load to quickly populate all data and update charts.
BUT we have a problem. An angular directive where you only work with one observation to trigger the correct stream reallocation is the plot dataset. Wouldn't it be great if he could watch yours as $scope.reportTasksRunRange.min
well $scope.reportTasksRunRange.max
, and if they changed, you can trigger a redraw? This really is the heart of angularjs data binding!
So let's "fix" this directive. All you have to do is first change the scope:
scope: {
dataset: '=',
min: '=',
max: '=',
options: '=',
callback: '='
},
And add a couple $watch
:
onMinChanged = function(min) {
if (plot) {
plot.getOptions().xaxes[0].min = min;
plot.setupGrid();
return plot.draw();
}
};
onMaxChanged = function(min) {
if (plot) {
plot.getOptions().xaxes[0].max = max;
plot.setupGrid();
return plot.draw();
}
};
scope.$watch('min', onMinChanged, true);
scope.$watch('max', onMaxChanged, true);
Here's my example putting this together.
The Power of Angularjs ...
source to share