Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /* 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);
- }],
- });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement