add a selected range preview

1 files changed, 45 insertions, 1 deletions

diff --git a/index.html b/index.html
index 810e1f0..f8f2838 100644
--- a/index.html
+++ b/index.html
@@ -13,6 +13,14 @@
             text-align: center;
         }
 
+        .range-preview {
+            width: 700px;
+            height:50px;
+            margin: 0 auto 0 auto;
+            left: 50px;
+            position: relative;
+        }
+
         .chart {
             width:800px;
             height:200px;
@@ -136,11 +144,46 @@
                 self.reset();
                 return false;
             });
+            var rangePreviewOptions = {
+                selection: {
+                    mode: 'x'
+                },
+                xaxis: {
+                    mode: "time"
+                },
+                yaxis: {
+                    ticks: []
+                }
+            };
+            var now = new Date().getTime();
+            var HOUR = 1000 * 60 * 60;
+            var DAY = HOUR * 24;
+            var WEEK = DAY * 7;
+            var MONTH = DAY * 31;
+            var YEAR = DAY * 365;
+
+            var data = [
+                [now - WEEK, null],
+                [now, null]];
+
+            this.rangePreview = $.plot(this.ui.find('.range-preview'), [data], rangePreviewOptions);
+
+            this.ui.bind("plotselected", function(event, ranges) {
+                self.setTimeRange(new Date(ranges.xaxis.from),
+                                  new Date(ranges.xaxis.to));
+            });
         };
 
         ChartCoordinator.prototype.update = function() {
             var startTime = new Date(this.ui[0].startTime.value);
             var endTime = new Date(this.ui[0].endTime.value);
+            var ranges = {
+                xaxis: {
+                    from: startTime.getTime(),
+                    to: endTime.getTime()
+                }
+            };
+            this.rangePreview.setSelection(ranges, true);
             for(var i=0; i<this.charts.length; i++){
                 this.charts[i].draw(startTime, endTime);
             }
@@ -148,7 +191,7 @@
 
         ChartCoordinator.prototype.setTimeRange = function(startTime, endTime) {
             this.ui[0].startTime.value = startTime.toString().split(' ').slice(1,5).join(' ');
-            this.ui[0].endTime.value = endTime.toString().split(' ').slice(1,5).join(' ');;
+            this.ui[0].endTime.value = endTime.toString().split(' ').slice(1,5).join(' ');
             this.update();
         };
 
@@ -195,6 +238,7 @@
                 <input type="submit" value="Update" />
                 <input type="reset" value="Reset" />
             </div>
+            <div class="range-preview"></div>
         </form>
         <div class="charts">
             <div class="chart"></div>