diff --git a/ui/src/app/common/utils.service.js b/ui/src/app/common/utils.service.js
index f140893d2b..7f05481f0e 100644
--- a/ui/src/app/common/utils.service.js
+++ b/ui/src/app/common/utils.service.js
@@ -120,18 +120,6 @@ function Utils($mdColorPalette, $rootScope, $window, $translate, $q, $timeout, t
     ];
 
     var defaultAlarmDataKeys = [];
-    for (var i=0;i<defaultAlarmFields.length;i++) {
-        var name = defaultAlarmFields[i];
-        var dataKey = {
-            name: name,
-            type: types.dataKeyType.alarm,
-            label: $translate.instant(types.alarmFields[name].name)+'',
-            color: getMaterialColor(i),
-            settings: {},
-            _hash: Math.random()
-        };
-        defaultAlarmDataKeys.push(dataKey);
-    }
 
     var imageAspectMap = {};
 
@@ -312,7 +300,25 @@ function Utils($mdColorPalette, $rootScope, $window, $translate, $q, $timeout, t
         return angular.toJson(getDefaultDatasource(dataKeySchema));
     }
 
+    function initDefaultAlarmDataKeys() {
+        for (var i=0;i<defaultAlarmFields.length;i++) {
+            var name = defaultAlarmFields[i];
+            var dataKey = {
+                name: name,
+                type: types.dataKeyType.alarm,
+                label: $translate.instant(types.alarmFields[name].name)+'',
+                color: getMaterialColor(i),
+                settings: {},
+                _hash: Math.random()
+            };
+            defaultAlarmDataKeys.push(dataKey);
+        }
+    }
+
     function getDefaultAlarmDataKeys() {
+        if (!defaultAlarmDataKeys.length) {
+            initDefaultAlarmDataKeys();
+        }
         return angular.copy(defaultAlarmDataKeys);
     }
 
diff --git a/ui/src/app/components/datasource-entity.directive.js b/ui/src/app/components/datasource-entity.directive.js
index f9dbc45ada..f9074c7066 100644
--- a/ui/src/app/components/datasource-entity.directive.js
+++ b/ui/src/app/components/datasource-entity.directive.js
@@ -152,7 +152,15 @@ function DatasourceEntity($compile, $templateCache, $q, $mdDialog, $window, $doc
             if (scope.maxDataKeys > 0 && ngModelCtrl.$viewValue.dataKeys.length >= scope.maxDataKeys ) {
                 return null;
             } else {
-                return scope.generateDataKey({chip: chip.name, type: chip.type});
+                if (chip.type) {
+                    return scope.generateDataKey({chip: chip.name, type: chip.type});
+                } else {
+                    if (scope.widgetType != types.widgetType.latest.value) {
+                        return scope.generateDataKey({chip: chip, type: types.dataKeyType.timeseries});
+                    } else {
+                        return null;
+                    }
+                }
             }
         };
 
diff --git a/ui/src/app/components/datasource-entity.tpl.html b/ui/src/app/components/datasource-entity.tpl.html
index 50858caef1..b609daa361 100644
--- a/ui/src/app/components/datasource-entity.tpl.html
+++ b/ui/src/app/components/datasource-entity.tpl.html
@@ -70,20 +70,23 @@
 					  </md-autocomplete>
 					  <md-chip-template>
 						  <div layout="row" layout-align="start center" class="tb-attribute-chip">
+                              <div class="tb-chip-drag-handle" style="margin-right: 5px;" tb-chip-draggable>
+                                  <ng-md-icon size="20" icon="drag_handle"></ng-md-icon>
+                              </div>
 							  <div class="tb-color-preview" ng-click="showColorPicker($event, $chip, $index)" style="margin-right: 5px;">
 								  <div class="tb-color-result" ng-style="{background: $chip.color}"></div>
 							  </div>
 							  <div layout="row">
-								  <div class="tb-chip-label" tb-chip-draggable>
-								  <span ng-show="$chip.type==types.dataKeyType.attribute">
-									  <md-tooltip>{{'datakey.attributes' | translate }}</md-tooltip>
-								      <ng-md-icon size="20" icon="perm_device_information"></ng-md-icon>
-								  </span>
-		                          <span ng-show="$chip.type==types.dataKeyType.timeseries">
-									  <md-tooltip>{{'datakey.timeseries' | translate }}</md-tooltip>
-		                              <ng-md-icon size="20" icon="timeline"></ng-md-icon>
-		                          </span>
-									  {{$chip.label}}
+								  <div class="tb-chip-label">
+                                      <span ng-show="$chip.type==types.dataKeyType.attribute">
+                                          <md-tooltip>{{'datakey.attributes' | translate }}</md-tooltip>
+                                          <ng-md-icon size="20" icon="perm_device_information"></ng-md-icon>
+                                      </span>
+                                      <span ng-show="$chip.type==types.dataKeyType.timeseries">
+                                          <md-tooltip>{{'datakey.timeseries' | translate }}</md-tooltip>
+                                          <ng-md-icon size="20" icon="timeline"></ng-md-icon>
+                                      </span>
+                                          {{$chip.label}}
 								  </div>
 								  <div class="tb-chip-separator">: </div>
 								  <div class="tb-chip-label">
@@ -130,11 +133,14 @@
 				   </md-autocomplete>
 				   <md-chip-template>
 					   <div layout="row" layout-align="start center" class="tb-attribute-chip">
+                           <div class="tb-chip-drag-handle" style="margin-right: 5px;" tb-chip-draggable>
+                               <ng-md-icon size="20" icon="drag_handle"></ng-md-icon>
+                           </div>
 						   <div class="tb-color-preview" ng-click="showColorPicker($event, $chip, $index)" style="margin-right: 5px;">
 							   <div class="tb-color-result" ng-style="{background: $chip.color}"></div>
 						   </div>
 						   <div layout="row">
-							   <div class="tb-chip-label" tb-chip-draggable>
+							   <div class="tb-chip-label">
 								   {{$chip.label}}
 							   </div>
 							   <div class="tb-chip-separator">: </div>
diff --git a/ui/src/app/components/datasource-func.tpl.html b/ui/src/app/components/datasource-func.tpl.html
index 289570fd77..5cae48df77 100644
--- a/ui/src/app/components/datasource-func.tpl.html
+++ b/ui/src/app/components/datasource-func.tpl.html
@@ -58,11 +58,14 @@
 				  </md-autocomplete>
 				  <md-chip-template>
 					  <div layout="row" layout-align="start center" class="tb-attribute-chip">
-						  <div class="tb-color-preview" ng-click="showColorPicker($event, $chip, $index)" style="margin-right: 5px;">
+                          <div class="tb-chip-drag-handle" style="margin-right: 5px;" tb-chip-draggable>
+                              <ng-md-icon size="20" icon="drag_handle"></ng-md-icon>
+                          </div>
+                          <div class="tb-color-preview" ng-click="showColorPicker($event, $chip, $index)" style="margin-right: 5px;">
 							  <div class="tb-color-result" ng-style="{background: $chip.color}"></div>
 						  </div>
 						  <div layout="row">
-							  <div class="tb-chip-label" tb-chip-draggable>
+							  <div class="tb-chip-label">
 								  {{$chip.label}}
 							  </div>
 							  <div class="tb-chip-separator">: </div>
@@ -109,11 +112,14 @@
 			</md-autocomplete>
 			<md-chip-template>
 				<div layout="row" layout-align="start center" class="tb-attribute-chip">
-					<div class="tb-color-preview" ng-click="showColorPicker($event, $chip, $index)" style="margin-right: 5px;">
+                    <div class="tb-chip-drag-handle" style="margin-right: 5px;" tb-chip-draggable>
+                        <ng-md-icon size="20" icon="drag_handle"></ng-md-icon>
+                    </div>
+                    <div class="tb-color-preview" ng-click="showColorPicker($event, $chip, $index)" style="margin-right: 5px;">
 						<div class="tb-color-result" ng-style="{background: $chip.color}"></div>
 					</div>
 					<div layout="row">
-						<div class="tb-chip-label" tb-chip-draggable>
+						<div class="tb-chip-label">
 							{{$chip.label}}
 						</div>
 						<div class="tb-chip-separator">: </div>
diff --git a/ui/src/app/components/datasource.scss b/ui/src/app/components/datasource.scss
index 217e73f6aa..8cd552ff47 100644
--- a/ui/src/app/components/datasource.scss
+++ b/ui/src/app/components/datasource.scss
@@ -58,6 +58,14 @@
 }
 
 .tb-attribute-chip {
+  .tb-chip-drag-handle {
+    cursor: move;
+
+    ng-md-icon {
+      pointer-events: none;
+    }
+  }
+
   .tb-chip-label {
     overflow: hidden;
     text-overflow: ellipsis;
diff --git a/ui/src/app/components/md-chip-draggable.directive.js b/ui/src/app/components/md-chip-draggable.directive.js
index 8fcdc0ad73..9ac63fdefc 100644
--- a/ui/src/app/components/md-chip-draggable.directive.js
+++ b/ui/src/app/components/md-chip-draggable.directive.js
@@ -22,9 +22,6 @@ export default angular.module('thingsboard.directives.mdChipDraggable', [])
       controllerAs: 'vm',
       controller: ['$document', '$scope', '$element', '$timeout',
         function ($document, $scope, $element, $timeout) {
-          var options = {
-            axis: 'horizontal',
-          };
           var handle = $element[0];
           var draggingClassName = 'dragging';
           var droppingClassName = 'dropping';
@@ -92,26 +89,28 @@ export default angular.module('thingsboard.directives.mdChipDraggable', [])
               y: (event.originalEvent || event).clientY - bounds.top,
             };
 
-            var offset = options.axis === 'vertical' ? props.y : props.x;
-            var midPoint = (options.axis === 'vertical' ? props.height : props.width) / 2;
+            var horizontalOffset = props.x;
+            var horizontalMidPoint = props.width / 2;
+
+            var verticalOffset = props.y;
+            var verticalMidPoint = props.height / 2;
 
             $element.addClass(droppingClassName);
-            
-            if (offset < midPoint) {
-              dropPosition = 'before';
-              $element.removeClass(droppingAfterClassName);
-              $element.addClass(droppingBeforeClassName);
 
+            if (horizontalOffset >= horizontalMidPoint || verticalOffset >= verticalMidPoint) {
+                dropPosition = 'after';
+                $element.removeClass(droppingBeforeClassName);
+                $element.addClass(droppingAfterClassName);
             } else {
-              dropPosition = 'after';
-              $element.removeClass(droppingBeforeClassName);
-              $element.addClass(droppingAfterClassName);
+                dropPosition = 'before';
+                $element.removeClass(droppingAfterClassName);
+                $element.addClass(droppingBeforeClassName);
             }
+
           };
 
           var dropHandler = function (event) {
             event.preventDefault();
-
             var droppedItemIndex = parseInt((event.dataTransfer || event.originalEvent.dataTransfer).getData('text/plain'), 10);
             var currentIndex = $scope.$parent.$mdChipsCtrl.items.indexOf($scope.$parent.$chip);
             var newIndex = null;
diff --git a/ui/src/app/components/widget/widget-config.tpl.html b/ui/src/app/components/widget/widget-config.tpl.html
index c4db5386dc..0998ad9378 100644
--- a/ui/src/app/components/widget/widget-config.tpl.html
+++ b/ui/src/app/components/widget/widget-config.tpl.html
@@ -23,12 +23,14 @@
         <md-content class="md-padding" layout="column">
             <div ng-show="widgetType === types.widgetType.timeseries.value || widgetType === types.widgetType.alarm.value" layout='column' layout-align="center"
                  layout-gt-sm='row' layout-align-gt-sm="start center">
-                <md-checkbox flex aria-label="{{ 'widget-config.use-dashboard-timewindow' | translate }}"
-                             ng-model="useDashboardTimewindow">{{ 'widget-config.use-dashboard-timewindow' | translate }}
-                </md-checkbox>
-                <md-checkbox ng-disabled="useDashboardTimewindow" flex aria-label="{{ 'widget-config.display-timewindow' | translate }}"
-                             ng-model="displayTimewindow">{{ 'widget-config.display-timewindow' | translate }}
-                </md-checkbox>
+                <div layout="column" flex>
+                    <md-checkbox flex aria-label="{{ 'widget-config.use-dashboard-timewindow' | translate }}"
+                                 ng-model="useDashboardTimewindow">{{ 'widget-config.use-dashboard-timewindow' | translate }}
+                    </md-checkbox>
+                    <md-checkbox ng-disabled="useDashboardTimewindow" flex aria-label="{{ 'widget-config.display-timewindow' | translate }}"
+                                 ng-model="displayTimewindow">{{ 'widget-config.display-timewindow' | translate }}
+                    </md-checkbox>
+                </div>
                 <section flex layout="row" layout-align="start center" style="margin-bottom: 16px;">
                     <span ng-class="{'tb-disabled-label': useDashboardTimewindow}" translate style="padding-right: 8px;">widget-config.timewindow</span>
                     <tb-timewindow ng-disabled="useDashboardTimewindow" as-button="true" aggregation="{{ widgetType === types.widgetType.timeseries.value }}"