paint selected area on bottom graph

yafitsv/views/olqv.ejs

@@ -1578,7 +1578,9 @@ var SAMPPNGPublishControl = (function (Control) {
                     text: toptitle
                 },
                 chart: {
-                    zoomType: 'xy',
+                    zoomType: 'x',
+                    panning: true,
+                    panKey: 'shift',
                     events:{
                         click: function(event){
                             console.log("A click occurred on the spectrum : enter");                      
@@ -1967,15 +1969,22 @@ var SAMPPNGPublishControl = (function (Control) {
             text: toptitle
         },
         chart: {
-            zoomType: 'xy',
+            zoomType: 'x',
+            panning: true,
+            panKey: 'shift',
             events:{
                 selection: function(event){
-                    console.log("selection");
-
+                    console.log("### selection");
+                    this.xAxis[0].update({
+                            plotBands : [{ // visualize the weekend
+                                                from: event.xAxis[0].min,
+                                                to: event.xAxis[0].max,
+                                                color: 'rgba(68, 170, 213, .2)'
+                                            }]
+                    });
+                
                     var imin = Math.round((event.xAxis[0].min  - plotData2.x[0]) / (plotData2.x[1]-plotData2.x[0]));
                     var imax = Math.round((event.xAxis[0].max - plotData2.x[0]) / (plotData2.x[1]-plotData2.x[0]));
-                    console.log("imin / imax");
-                    console.log(imin+"   "+imax);
 
                     if (_cunit3 in unitFactor) {
                         switch (_ctype3) {
@@ -2017,11 +2026,6 @@ var SAMPPNGPublishControl = (function (Control) {
                 text: xtitle
             },
             reversed : false,
-            plotBands: [{ // visualize the weekend
-                from: 0,
-                to: 200,
-                color: 'rgba(68, 170, 213, .2)'
-            }]
         },
         yAxis: {
             title: {
@@ -2181,13 +2185,6 @@ var SAMPPNGPublishControl = (function (Control) {
                             height: 16
                         },
                         data: highChartData,
-                        fillColor: {
-                            linearGradient: [0, 200, -0.5, 5],
-                            stops: [
-                                [0, Highcharts.getOptions().colors[0]],
-                                [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
-                            ]
-                        }
                        }    
           );