--- a/cms/app-client/app/components/visu-chrono.js	Mon Nov 14 17:23:43 2016 +0100
+++ b/cms/app-client/app/components/visu-chrono.js	Tue Nov 15 17:42:57 2016 +0100
@@ -3,11 +3,21 @@
 
 export default Ember.Component.extend({
 
-    range: [],
+    colors: Ember.inject.service(),
+    filter: Ember.inject.service(),
+
+    range: null,
     rawdatestats: null,
 
-    decades: Ember.computed('range', function() {
-        var range = this.get('range');
+    rangeArray: Ember.computed('range', 'range.[]', function() {
+        let range = this.get('range');
+        let resArray = [];
+        range.forEach(function(s) { resArray.push(parseInt(s.id)); });
+        return resArray.sort();
+    }),
+
+    decades: Ember.computed('rangeArray', function() {
+        var range = this.get('rangeArray');
         return _.range(Math.floor(range[0]/10)*10, (Math.floor(range[1]/10)+1)*10, 10);
     }),
 
@@ -22,8 +32,9 @@
     counts: Ember.computed.mapBy('rawdatestats', 'count'),
     maxCount: Ember.computed.max('counts'),
     minCount: Ember.computed.min('counts'),
-
-    filter: Ember.inject.service(),
+    colorScale: Ember.computed('maxCount', 'minCount', function() {
+        return this.get('colors').getScaleLinear(this.get('minCount'), this.get('maxCount'));
+    }),
 
     date: Ember.computed.alias('filter.dateList'),
 
@@ -43,8 +54,10 @@
             if(event.button === 0) {
 
                 isMouseDown = true;
-                var element = parseInt(Ember.$(this).attr('id'));
-                if(!_.inRange(element, self.get('range')[0], self.get('range')[1]+1)) {
+                var $elem = Ember.$(this);
+                var element = parseInt($elem.attr('id'));
+                var range = self.get('rangeArray');
+                if(!$elem.hasClass('highlighted') && !_.inRange(element, range[0], range[1]+1)) {
                     return false;
                 }
                 var elements = [element];