summaryrefslogtreecommitdiff
path: root/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'index.html')
-rw-r--r--index.html46
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>