First attempt for time span selection, but the box is not drawn insid…

…e the chart
phpmyadmin · Sep 16, 2012 · 50f0c43 · 50f0c43
1 parent eae5555
commit 50f0c43
Showing 1 changed file with 41 additions and 0 deletions.
diff --git a/js/server_status_monitor.js b/js/server_status_monitor.js
@@ -1,3 +1,4 @@
+/* vim: set expandtab sw=4 ts=4 sts=4: */
 $(function() {
     // Show tab links
     $('div#statustabs_charting div.tabLinks').show();
@@ -88,6 +89,10 @@ $(function() {
             maxYLabel: []
         }
     };
+
+    // time span selection
+    var selectionTimeDiff = new Array();
+    var selectionStartX, selectionStartY, selectionEndX, selectionEndY;
 
     /* Add OS specific system info charts to the preset chart list */
     switch(server_os) {
@@ -1179,6 +1184,42 @@ $(function() {
             buildRequiredDataList();
         }
 
+        // time span selection
+        $('#gridchart' + runtime.chartAI).bind('jqplotMouseDown', function(ev, gridpos, datapos, neighbor, plot) {
+		    selectionTimeDiff.push(datapos.xaxis);
+            $('#selection_box').remove();
+            selectionBox = $('<div style="border:1px #FF00FF solid; position:fixed;">').hide();
+            $(document.body).append(selectionBox);
+            selectionStartX = gridpos.x;
+            selectionStartY = gridpos.y;
+            selectionBox
+                .attr({id: 'selection_box'})
+                .css({
+                    top: selectionStartY,
+                    left: selectionStartX
+                })
+                .fadeIn();
+	    });
+
+        $('#gridchart' + runtime.chartAI).bind('jqplotMouseUp', function(ev, gridpos, datapos, neighbor, plot) {
+		    selectionTimeDiff.push(datapos.xaxis);
+            //get date from timestamp
+            alert(new Date(Math.ceil(selectionTimeDiff[0])) + " \n to \n " + new Date(Math.ceil(selectionTimeDiff[1])));
+            selectionTimeDiff = [];
+            $('#selection_box').attr({ id: '' });
+	    });
+
+        $('#gridchart' + runtime.chartAI).bind('jqplotMouseMove', function(ev, gridpos, datapos, neighbor, plot) {
+            if (selectionStartX != undefined) {
+                $('#selection_box')
+                    .css({
+                        width: Math.abs(gridpos.x - selectionStartX), 
+                        height: Math.abs(gridpos.y - selectionStartY), 
+                    })
+                    .fadeIn();
+            }
+	    });
+
         // Edit, Print icon only in edit mode
         $('table#chartGrid div svg').find('*[zIndex=20], *[zIndex=21], *[zIndex=19]').toggle(editMode)