diff options
author | Richard Wall <richard@aziz> | 2010-04-16 01:19:45 +0100 |
---|---|---|
committer | Richard Wall <richard@aziz> | 2010-04-16 01:19:45 +0100 |
commit | 42422fae12e64c44dc38510eb68f561000860d61 (patch) | |
tree | 6dcf5e45c40b3ccfc3c9b54290da7a69eff0db94 /index.html | |
parent | 936f85faa33fb7781565f8b650c9554f3125d067 (diff) |
add a selected range preview
Diffstat (limited to 'index.html')
-rw-r--r-- | index.html | 46 |
1 files changed, 45 insertions, 1 deletions
@@ -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> |