SerialChartCustomized

/* Modified from https://github.com/infiniteautomation/ma-dashboards/blob/3.3.x/UI/web/ngMango/directives/serialChart.js */

userModule.directive('myCustomMangoChart',
function(){

    var MAX_SERIES = 10;


    var scope = {
        options: '<?',
        timeFormat: '@',
        timezone: '@',
        stackType: '@',
        values: '<?',
        points: '<?',
        graphOptions: '<?',
        defaultType: '@',
        defaultColor: '@',
        defaultAxis: '@',
        defaultBalloonText: '@',
        defaultGraphOptions: '<?',
        'export': '<?',
        oneBalloon: '<?',
        legend: '<?',
        customBullet: '@',
        bullet: '@',
        annotateMode: '<?',
        lineThickness: '@',
        onChartInit: '&?',
        graphItemClicked: '&?',
        trendLines: '<?',
        guides: '<?',
        cursorSyncId: '@?',
        end:'<?',
        hours:'<?',
        selected:'=?',
        pointTitle: '&?'
    };

    for (var j = 1; j <= MAX_SERIES; j++) {
        scope['series' + j + 'Values'] = '<?';
        scope['series' + j + 'Type'] = '@';
        scope['series' + j + 'Title'] = '@';
        scope['series' + j + 'Color'] = '@';
        scope['series' + j + 'Axis'] = '@';
        scope['series' + j + 'BalloonText'] = '@';
        scope['series' + j + 'Point'] = '<?';
        scope['series' + j + 'GraphOptions'] = '<?';
    }

    const cursorSyncCharts = {};

    const addCursorSyncChart = (cursorSyncId, chart) => {
        if (!cursorSyncCharts.hasOwnProperty(cursorSyncId)) {
            cursorSyncCharts[cursorSyncId] = [];
        }
        if (cursorSyncCharts[cursorSyncId].includes(chart)) return;
        cursorSyncCharts[cursorSyncId].push(chart);
    };

    const removeCursorSyncChart = (cursorSyncId, chart) => {
        const chartsArray = cursorSyncCharts[cursorSyncId];
        if (!chartsArray) return;
        const index = chartsArray.indexOf(chart);
        if (index >= 0) {
            chartsArray.splice(index, 1);
        }
        if (!chartsArray.length) {
            delete cursorSyncCharts[cursorSyncId];
        }
    };

    const chartZoomed = (cursorSyncId, event) => {
        const chartsArray = cursorSyncCharts[cursorSyncId];
        if (!chartsArray) return;
        chartsArray.forEach(chart => {
            if (chart.ignoreZoom) {
                chart.ignoreZoom = false;
            }
            if (chart !== event.chart) {
                chart.ignoreZoom = true;
                try {
                    chart.zoomToDates(event.startDate, event.endDate);
                } catch (e) {} // throws error on first run
            }
        });
    };

    const cursorChanged = (cursorSyncId, event) => {
        const chartsArray = cursorSyncCharts[cursorSyncId];
        if (!chartsArray) return;
        chartsArray.forEach(chart => {
            if (chart !== event.chart) {
                chart.chartCursor.syncWithCursor(event.chart.chartCursor);
            }
        });
    };

    const cursorHidden = (cursorSyncId, event) => {
        const chartsArray = cursorSyncCharts[cursorSyncId];
        if (!chartsArray) return;
        chartsArray.forEach(chart => {
            if (chart.chartCursor.hideCursor) {
                chart.chartCursor.forceShow = false;
                chart.chartCursor.hideCursor(false);
            }
        });
    };

    return {
        restrict: 'E',
        scope: scope,
        compile: function() {
            return postLink;
        }
    };

    function postLink($scope, $element, attrs) {
        $element.addClass('amchart');

        var options = defaultOptions();

        if ($scope.timeFormat) {
            options.categoryAxis.parseDates = false;
        }

        if ($scope.stackType) {
            options.valueAxes[0].stackType = $scope.stackType;
        }

        if ($scope.legend) {
            options.legend = {
                valueWidth: 100,
                valueFunction: dataItemToText
            };
        }

        if ($scope['export']) {
            options['export'].enabled = true;
        }

        if ($scope.oneBalloon) {
            options.chartCursor = {
                oneBalloonOnly: true
            };
        }

        if ($scope.annotateMode) {
            options.chartCursor = {
                oneBalloonOnly: true,
                graphBulletSize: 2,
                zoomable: false,
                categoryBalloonDateFormat: 'h:mm:ss A - MMM DD, YYYY'
            };
            options.balloon = {
                fillAlpha: 1
            };
        }

        var valueArray = !!attrs.values;

        $.extend(true, options, $scope.options);

        var chart = AmCharts.makeChart($element[0], angular.copy(options));

        if ($scope.onChartInit) {
            $scope.onChartInit({$chart: chart});
        }

        if ($scope.cursorSyncId) {
            addCursorSyncChart($scope.cursorSyncId, chart);
            $scope.$on('$destroy', () => removeCursorSyncChart($scope.cursorSyncId, chart));
        }


        // Added listeners from previous component

        chart.addListener("dataUpdated", () => {
            if (angular.isArray(chart.dataProvider) && typeof $scope.end !== "undefined"){

                var e = moment($scope.end);
                // Default zooming interval is 12 hours if not defined otherway
                var hourvar;

                if (typeof $scope.hours !== "undefined"){
                    hourvar = $scope.hours;
                }else{
                    hourvar = 12;
                }

                var s = moment($scope.end).subtract(hourvar, 'hours');
                e = e.toDate();
                s = s.toDate();

                console.log(e);
                console.log(s);
                chart.zoomToDates(s, e);
          }

        });

        chart.addListener('zoomed', event => {
            if ($scope.cursorSyncId) {
                chartZoomed($scope.cursorSyncId, event);
            }
            if (angular.isArray(chart.dataProvider)){
                $scope.selected = [];
                let s = moment(chart.startDate).format('LLL');
                let e = moment(chart.endDate).format('LLL');
                $scope.selected.push({
                   start : s,
                   end : e
                    });

            }
        });

        if (chart.chartCursor) {
            chart.chartCursor.addListener('changed', event => {
                if ($scope.cursorSyncId) {
                    cursorChanged($scope.cursorSyncId, event);
                }
            });

            chart.chartCursor.addListener('onHideCursor', event => {
                if ($scope.cursorSyncId) {
                    cursorHidden($scope.cursorSyncId, event);
                }
            });
        }

        chart.addListener('changed', function(event) {
            chart.lastCursorPosition = event.index;
        });

        if ($scope.graphItemClicked) {
            chart.addListener('clickGraphItem', function(event) {
                $scope.graphItemClicked({$chart: chart, $event: event});
            });
        }

        $scope.$watchCollection('trendLines', function(newValue, oldValue) {
            if (newValue === oldValue && newValue === undefined) return;
            $scope.options.trendLines = newValue;
        });

        $scope.$watch('guides', (newValue, oldValue) => {
            if (newValue === oldValue && newValue === undefined) return;
            if (!chart || !chart.categoryAxis) return;

            let guides = newValue;
            if (!Array.isArray(guides)) {
                guides = [];
            }
            // must copy the guides as amCharts turns modifies the guide objects causing infinite digest errors
            chart.categoryAxis.guides = angular.copy(guides);
            chart.validateNow();
        }, true);

        $scope.$watch('options', function(newValue, oldValue) {
            if (!newValue) return;

            $.extend(true, chart, newValue);
            checkForAxisColors();
            watchPointsAndGraphs($scope.graphOptions);
        }, true);

        $scope.$watchGroup([
            'defaultType',
            'defaultColor',
            'defaultAxis',
            'defaultBalloonText',
            'defaultGraphOptions'
        ], graphOptionsChanged.bind(null, null));

        if (valueArray) {
            $scope.$watchCollection('values', watchValues);
            $scope.$watchCollection('points', watchPointsAndGraphs);
            $scope.$watch('graphOptions', watchPointsAndGraphs, true);
        }

        for (var i = 1; i <= MAX_SERIES; i++) {
            var seriesAttributes = [
                'series' + i + 'Type',
                'series' + i + 'Title',
                'series' + i + 'Color',
                'series' + i + 'Axis',
                'series' + i + 'BalloonText',
                'series' + i + 'GraphOptions'
            ];

            if (!valueArray) {
                seriesAttributes.push('series' + i + 'Values');
                seriesAttributes.push('series' + i + 'Point');
            }

            var hasSeries = false;
            for (var j = 0; j < seriesAttributes.length; j++) {
                if (!angular.isUndefined(attrs[seriesAttributes[j]])) {
                    hasSeries = true;
                    break;
                }
            }

            if (hasSeries) {
                $scope.$watchGroup(seriesAttributes, graphOptionsChanged.bind(null, i));
                if (!valueArray) {
                    $scope.$watchCollection('series' + i + 'Values', valuesChanged.bind(null, i));
                }
            }
        }

        function watchValues(newValues, oldValues) {
            if (newValues === oldValues && newValues === undefined) return;

            chart.dataProvider = newValues;
            checkEqualSpacing();
            chart.validateData();
        }

        function checkEqualSpacing() {
            if (options.categoryAxis.equalSpacing) return;

            if (chart.dataProvider) {
                chart.categoryAxis.equalSpacing = !chart.dataProvider.map(function(dataItem, index, array) {
                    if (index === 0) return null;
                    return dataItem.timestamp - array[index - 1].timestamp;
                }).some(function(diff, index, array) {
                    if (index <= 1) return;
                    return diff !== array[index - 1];
                });
            } else {
                chart.categoryAxis.equalSpacing = true;
            }
        }

        function watchPointsAndGraphs(newValues, oldValues) {
            if (newValues === oldValues && newValues === undefined) return;

            if (!$scope.points && !$scope.graphOptions) {
                chart.graphs = [];
            }

            if (newValues) {
                var numGraphs = $scope.points && $scope.points.length || 0;
                var graphOptionsLength = $scope.graphOptions && $scope.graphOptions.length || 0;
                if (graphOptionsLength > numGraphs) {
                    numGraphs = graphOptionsLength;
                }
                while (chart.graphs.length > numGraphs) {
                    chart.graphs.pop();
                }

                for (var i = 0; i < newValues.length; i++) {
                    var val = newValues[i];
                    if (!val) continue;
                    setupGraph(i + 1);
                }
            }

            sortGraphs();
            chart.validateNow(true);
        }

        function findGraph(propName, prop, removeGraph) {
            for (var i = 0; i < chart.graphs.length; i++) {
                if (chart.graphs[i][propName] === prop) {
                    var graph = chart.graphs[i];
                    if (removeGraph) chart.graphs.splice(i, 1);
                    return graph;
                }
            }
        }

        function graphOptionsChanged(graphNum, values) {
            if (isAllUndefined(values)) return;

            if (graphNum === null) {
                // update all graphs
                for (var i = 0; i < chart.graphs.length; i++) {
                    setupGraph(chart.graphs[i]);
                }
            } else {
                setupGraph(graphNum);
            }

            sortGraphs();
            chart.validateNow(true);
        }

        function valuesChanged(graphNum, newValues, oldValues) {
            if (newValues === oldValues && newValues === undefined) return;

            if (!newValues) {
                findGraph('graphNum', graphNum, true);
            } else  {
                setupGraph(graphNum);
                sortGraphs();
            }
            updateValues();
        }

        function getPointForGraph(graphNum) {
            var point = $scope['series' + graphNum + 'Point'];
            if (!point && $scope.points) {
                point = $scope.points[graphNum - 1];
            }
            return point;
        }

        function setupGraph(graphNum, point) {
            var graph;

            // first arg can be the graph itself
            if (typeof graphNum === 'object') {
                graph = graphNum;
                graphNum = graph.graphNum;
            } else {
                graph = findGraph('graphNum', graphNum);
            }
            if (!graph) {
                graph = {};
                chart.graphs.push(graph);
            }

            var hardDefaults = {
                graphNum: graphNum,
                id: 'series-' + graphNum,
                valueField: 'value_' + graphNum,
                title: 'Series ' + graphNum,
                type: 'smoothedLine',
                valueAxis: 'left',
                clustered: false,
                balloonFunction: function(dataItem, graph) {
                    var valueForBalloon = dataItemToText(dataItem);
                    if ($scope.annotateMode) {
                        return dataItem.dataContext[graph.xid + 'AnnotationBalloonText'] ?
                                dataItem.dataContext[graph.xid + 'AnnotationBalloonText'] :
                                valueForBalloon;
                    } else {
                        return valueForBalloon;
                    }
                }
            };

            var pointDefaults;
            point = point || getPointForGraph(graphNum);
            if (point) {
                pointDefaults = {
                    xid: point.xid,
                    valueField: 'value_' + point.xid,
                    title: point.deviceName + ' - ' + point.name,
                    lineColor: point.chartColour
                };

                if ($scope.pointTitle) {
                    pointDefaults.title = $scope.pointTitle({$point: point});
                }

                if (typeof point.amChartsGraphType === 'function') {
                    pointDefaults.type = point.amChartsGraphType();
                }
            }

            var defaultAttributes = {
                type: $scope.defaultType,
                lineColor: $scope.defaultColor,
                lineThickness: $scope.lineThickness,
                valueAxis: $scope.defaultAxis,
                bullet: $scope.bullet,
                customBullet: $scope.customBullet
            };

            var attributeOptions = {
                title: $scope['series' + graphNum + 'Title'],
                type: $scope['series' + graphNum + 'Type'],
                lineColor: $scope['series' + graphNum + 'Color'],
                valueAxis: $scope['series' + graphNum + 'Axis'],
                balloonText: $scope['series' + graphNum + 'BalloonText']
            };

            var graphOptions = $scope['series' + graphNum + 'GraphOptions'] ||
                ($scope.graphOptions && $scope.graphOptions[graphNum - 1]);

            var annotateOptions = {};

            if ($scope.annotateMode) {
                annotateOptions = {
                    labelText: '[[' + graph.xid + 'AnnotationText]]',
                    labelRotation: 0,
                    labelPosition: 'right',
                    labelOffset: 5,
                    labelColorField: graph.xid + 'AnnotationTextColor',
                    bulletSize: 10,
                    bulletSizeField: graph.xid + 'AnnotationBulletSize',
                    bulletHitAreaSize: 14,
                    bulletAlpha: 1,
                    bulletColor: 'rgba(0, 0, 0, 0)',
                    bullet: 'circle',
                    bulletField: graph.xid + 'AnnotationBullet'
                };
            }

            var opts = $.extend(true, {}, hardDefaults, pointDefaults, $scope.defaultGraphOptions,
                    defaultAttributes, attributeOptions, graphOptions, annotateOptions);

            var graphAxis;
            chart.valueAxes.some(function(axis) {
                if (axis.id === opts.valueAxis) {
                    graphAxis = axis;
                    return true;
                }
            });

            if (opts.balloonText)
                delete opts.balloonFunction;
            if (angular.isUndefined(opts.fillAlphas)) {
                var isStacked = graphAxis && graphAxis.stackType && graphAxis.stackType !== 'none';
                if (isStacked || opts.type === 'column') {
                    opts.fillAlphas = 0.7;
                } else {
                    opts.fillAlphas = 0;
                }
            }
            if (angular.isUndefined(opts.lineThickness)) {
                opts.lineThickness = opts.type === 'column' ? 1.0 : 2.0;
            }

            // using smoothing without equal spacing gives strange loopy lines due to bug in amCharts
            // https://stackoverflow.com/questions/45863892/random-curves-in-js-chart-line-graph-by-amcharts
            if (!chart.categoryAxis.equalSpacing && opts.type === 'smoothedLine') {
                opts.type = 'line';
            }

            $.extend(true, graph, opts);
        }

        function checkForAxisColors() {
              if ($scope.options && $scope.options.valueAxes) {
                  var customAxisColors = false;
                  $scope.options.valueAxes.some(function(axis, index, array) {
                      if (axis.color) {
                            // Turn on custom color mode
                            customAxisColors = true;
                            return true;
                      }
                  });
                  if (customAxisColors) {
                      $element.addClass('amcharts-custom-color');
                  } else {
                      $element.removeClass('amcharts-custom-color');
                  }
              }
        }

        function sortGraphs() {
            chart.graphs.sort(function(a, b) {
                return a.graphNum - b.graphNum;
            });
        }

        function combine(output, newValues, valueField, point) {
            if (!newValues) return;

            for (var i = 0; i < newValues.length; i++) {
                var value = newValues[i];
                var timestamp;
                if ($scope.timeFormat) {
                    var m = $scope.timezone ? moment.tz(value.timestamp, $scope.timezone) : moment(value.timestamp);
                    timestamp = m.format($scope.timeFormat);
                } else {
                    timestamp = value.timestamp;
                }

                if (!output[timestamp]) {
                    output[timestamp] = {timestamp: timestamp};
                }

                output[timestamp][valueField] = value.value;
                output[timestamp][valueField + '_rendered'] = value.rendered || pointValueToString(value.value, point);
            }
        }

        function updateValues() {
            var values = $scope.timeFormat ? {} : [];

            for (var i = 1; i <= MAX_SERIES; i++) {
                var seriesValues = $scope['series' + i + 'Values'];

                var point = getPointForGraph(i);
                var valueField = 'value_' + (point ? point.xid : i);

                combine(values, seriesValues, valueField, point);
            }

            // normalize sparse array or object into dense array
            var output = [];
            for (var timestamp in values) {
                output.push(values[timestamp]);
            }

            // XXX sparse array to dense array doesnt result in sorted array
            // manually sort here
            if (output.length && typeof output[0].timestamp === 'number') {
                output.sort(function(a,b) {
                    return a.timestamp - b.timestamp;
                });
            }

            chart.dataProvider = output;
            checkEqualSpacing();
            chart.validateNow(true);
        }

        function isAllUndefined(a) {
            for (var i = 0; i < a.length; i++) {
                if (a[i] !== undefined) return false;
            }
            return true;
        }

        function dataItemToText(dataItem) {
            if (dataItem.dataContext) {
                var graph = dataItem.graph;

                var value = extractField(dataItem.dataContext, graph.valueField);
                if (value) return value;

//                for (var i = dataItem.index - 1; i >= 0; i--) {
//                    value = extractField(chart.dataProvider[i], graph.valueField);
//                    if (value) return value;
//                }
            }
            return '';
        }

        function pointValueToString(pointValue,point){
            if (point && typeof point.valueRenderer === 'function') {
                var rendered = point.valueRenderer(pointValue);
                if (rendered && rendered.text && typeof rendered.text === 'string') {
                    return rendered.text;
                }
            }

            if (typeof pointValue === 'number') {
                // convert to 3 fixed decimal places
                var numberString = pointValue.toFixed(3);

                // dont display trailing zeros
                if (numberString.substr(-4) === '.000') {
                    return numberString.slice(0, -4);
                } else if (numberString.substr(-2) === '00') {
                    return numberString.slice(0, -2);
                } else if (numberString.substr(-1) === '0') {
                    return numberString.slice(0, -1);
                } else {
                    return numberString;
                }
            }

            if (typeof pointValue === 'boolean') {
                return pointValue ? '1' : '0';
            }

            return '' + pointValue;

        }

        function extractField(data, fieldName) {
            var rendered = data[fieldName + '_rendered'];
            if (rendered) return rendered;

            var value = data[fieldName];
            if (value != null) {
                return pointValueToString(value);
            }
        }
    }

    function defaultOptions() {
        return {
            type: 'serial',
            theme: 'light',
            addClassNames: true,
            synchronizeGrid: true,
            valueAxes: [{
                id: 'left',
                position: 'left',
                axisThickness: 2
            },{
                id: 'right',
                position: 'right',
                axisThickness: 2
            },{
                id: 'left-2',
                position: 'left',
                offset: 50,
                axisThickness: 2
            },{
                id: 'right-2',
                position: 'right',
                offset: 50,
                axisThickness: 2
            }],

            categoryAxis: {
                parseDates: true,
                minPeriod: 'fff',
                equalSpacing: false,
                dashLength: 1,
                minorGridEnabled: true,
                axisThickness: 0,
                dateFormats:[{period:'fff',format:'HH:mm:ss'},
                                    {period:'ss',format:'HH:mm:ss'},
                                    {period:'mm',format:'HH:mm:ss'},
                                    {period:'hh',format:'HH:mm'},
                                    {period:'DD',format:'MMM DD'},
                                    {period:'WW',format:'MMM DD'},
                                    {period:'MM',format:'MMM'},
                                    {period:'YYYY',format:'YYYY'}],
                firstDayOfWeek: moment.localeData(moment.locale()).firstDayOfWeek()
            },
            chartCursor: {
                    categoryBalloonDateFormat:'MMM DD HH:mm:ss',
                    pan: true,
                    valueLineEnabled: true,
                    valueLineBalloonEnabled: true,
                    cursorAlpha:1,
                    cursorColor:'#258cbb',
                    valueLineAlpha:0.2,
                    valueZoomable:false
            },
            chartScrollbar: {
                    oppositeAxis:false,
                    offset:30,
                    scrollbarHeight: 80,
                    backgroundAlpha: 0,
                    selectedBackgroundAlpha: 0.1,
                    selectedBackgroundColor: '#888888',
                    graphFillAlpha: 0,
                    graphLineAlpha: 0.5,
                    selectedGraphFillAlpha: 0,
                    selectedGraphLineAlpha: 1,
                    autoGridCount:true,
                    hideResizeGrips:true,
                    resizeEnabled:false,
                    color:'#AAAAAA'
                },
            startDuration: 0,
            graphs: [],
            plotAreaFillAlphas: 0.0,
            categoryField: 'timestamp',
            'export': {
                enabled: false,
                libs: {autoLoad: false},
                dateFormat: 'MMM D, YYYY HH:mm:ss',
                fileName: 'chart'
            }
        };
    }


}
);

userModule.component('customchartcomponent', {
    bindings: {
        values: '<?',
        end:'<?',
        hours:'<?',
        selected:'=?',
    },
    controller: ['$scope', '$element',
    function($scope, $element) {

         //Define your own locale
        moment.locale('et');

        const options = {
                "zoomOutText": "",
                "type": "serial",
                "theme": "light",
                "marginRight": 40,
                "marginLeft": 40,
                "autoMarginOffset": 20,
                "mouseWheelZoomEnabled":false,
                "dataProvider":[],
                "valueAxes": [{
                    "id": "v1",
                    "axisAlpha": 0,
                    "position": "left",
                    "ignoreAxisWidth":true
                }],
                "balloon": {
                    "borderThickness": 1,
                    "shadowAlpha": 0
                },
                "graphs": [{
                    "id": "g1",
                    "balloon":{
                      "drop":true,
                      "adjustBorderColor":false,
                      "color":"#ffffff"
                    },
                    "bullet": "round",
                    "bulletBorderAlpha": 1,
                    "bulletColor": "#FFFFFF",
                    "bulletSize": 5,
                    "hideBulletsCount": 50,
                    "lineThickness": 2,
                    "title": "red line",
                    "useLineColorForBulletBorder": true,
                    "valueField": "value",
                    "balloonText": "<span style='font-size:18px;'>[[value]]</span>"
                }],
                "chartScrollbar": {
                    "graph": "g1",
                    "oppositeAxis":false,
                    "offset":30,
                    "scrollbarHeight": 80,
                    "backgroundAlpha": 0,
                    "selectedBackgroundAlpha": 0.1,
                    "selectedBackgroundColor": "#888888",
                    "graphFillAlpha": 0,
                    "graphLineAlpha": 0.5,
                    "selectedGraphFillAlpha": 0,
                    "selectedGraphLineAlpha": 1,
                    "autoGridCount":true,
                    "hideResizeGrips":true,
                    "resizeEnabled":false,
                    "color":"#AAAAAA"
                },
                "chartCursor": {
                    "pan": true,
                    "valueLineEnabled": true,
                    "valueLineBalloonEnabled": true,
                    "cursorAlpha":1,
                    "cursorColor":"#258cbb",
                    "limitToGraph":"g1",
                    "valueLineAlpha":0.2,
                    "categoryBalloonDateFormat":'MMM DD HH:mm:ss',
                    "valueZoomable":false
                },
                "categoryField": "timestamp",
                "categoryAxis": {
                    "dateFormats":[{period:'fff',format:'HH:mm:ss'},
                                    {period:'ss',format:'HH:mm:ss'},
                                    {period:'mm',format:'HH:mm:ss'},
                                    {period:'hh',format:'HH:mm'},
                                    {period:'DD',format:'MMM DD'},
                                    {period:'WW',format:'MMM DD'},
                                    {period:'MM',format:'MMM'},
                                    {period:'YYYY',format:'YYYY'}],
                    "minPeriod":"fff",
                    "parseDates": true,
                    "dashLength": 1,
                    "minorGridEnabled": true
                },
                "export": {
                    "enabled": true
                }
            }

        const chart = AmCharts.makeChart($element[0], options);

        chart.addListener('zoomed', event => {
            if (angular.isArray(this.values)){
               //console.log("This is zoomed");
                this.selected = [];
                let s = moment(chart.startDate).format('LLL');
                let e = moment(chart.endDate).format('LLL');
                this.selected.push({
                   start : s,
                   end : e
                    });

            }

        });

        chart.addListener("dataUpdated", () => {
            if (angular.isArray(chart.dataProvider) && typeof this.end !== "undefined"){

                var e = moment(this.end);
                // Default zooming interval is 12 hours if not defined otherway
                var hourvar;

                if (typeof this.hours !== "undefined"){
                    hourvar = this.hours;
                }else{
                    hourvar = 12;
                }

                var s = moment(this.end).subtract(hourvar, 'hours');
                e = e.toDate();
                s = s.toDate();
                chart.zoomToDates(s, e);
          }

        });

        chart.addListener("rendered", () => {

        });


        $scope.$watch('$ctrl.values', () => {
           let new_values = [];
            if (angular.isArray(this.values)){

                angular.forEach(this.values, function(value,key){

                    let new_timestamp = moment(value.timestamp).valueOf();
                    new_values.push({
                        timestamp : new_timestamp,
                        value:value.value
                    });


                });

                chart.dataProvider = new_values;
                //console.log(new_values);
                chart.validateNow(true);
            }
        }, true);

    }],

});