Я использую angularjsFlot а такжеползунок чтобы показать какую-то диаграмму и на основе выбора диапазона визуализация данных должна измениться во флотационной диаграмме.

Мой вопрос заключается в том, что будет лучшим способом визуализации данных в зависимости от выбора диапазона? Нужно ли добавлять / удалять данные диаграммы с плавающей точкой каждый раз, когда выбирается диапазон, или есть лучший способ? Я предоставляю свой исходный код ниже и несколько скриншотов. Пожалуйста помоги.

Заметка: $scope.tasksRunDataChartObject; имеет данные json с сервера, отформатированные для флот-чарта

Скриншот слайдера и код

<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 с сервера

{
    "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

Обновить

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 сервис

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
    };
});

флот-карта