summaryrefslogtreecommitdiff
path: root/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'index.html')
-rw-r--r--index.html72
1 files changed, 59 insertions, 13 deletions
diff --git a/index.html b/index.html
index d52776b..810e1f0 100644
--- a/index.html
+++ b/index.html
@@ -5,6 +5,14 @@
<title>untitled</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style type="text/css">
+ body {
+ font-family: sans;
+ }
+
+ form div {
+ text-align: center;
+ }
+
.chart {
width:800px;
height:200px;
@@ -114,11 +122,47 @@
return c;
}
+ var ChartCoordinator = function(ui) {
+ this.ui = ui;
+ this.charts = [];
+
+ var self = this;
+ this.ui.bind('submit', function(e) {
+ self.update();
+ return false;
+ });
+
+ this.ui.bind('reset', function(e) {
+ self.reset();
+ return false;
+ });
+ };
+
+ ChartCoordinator.prototype.update = function() {
+ var startTime = new Date(this.ui[0].startTime.value);
+ var endTime = new Date(this.ui[0].endTime.value);
+ for(var i=0; i<this.charts.length; i++){
+ this.charts[i].draw(startTime, endTime);
+ }
+ };
+
+ 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.update();
+ };
+
+ ChartCoordinator.prototype.reset = function() {
+ this.setTimeRange(new Date(new Date().getTime()-1*60*60*1000),
+ new Date());
+ };
+
$(function() {
+ var cc = new ChartCoordinator($('.chartRangeControl'));
var chartTemplate = $('.chart').remove();
- var charts = [
- dnsChartFactory(
- chartTemplate.clone().appendTo('.charts')),
+ cc.charts = [
+ //dnsChartFactory(
+ // chartTemplate.clone().appendTo('.charts')),
loadChartFactory(
chartTemplate.clone().appendTo('.charts')),
@@ -133,23 +177,25 @@
chartTemplate.clone().appendTo('.charts'))
];
- jQuery.each(charts, function(i, chart) {
- chart.draw(new Date('10 April 2010 19:30:00'),
- new Date());
- });
+ cc.reset();
- $('.chart').bind("plotselected", function(event, ranges) {
- var startTime = new Date(ranges.xaxis.from);
- var endTime = new Date(ranges.xaxis.to);
- jQuery.each(charts, function(i, chart) {
- chart.draw(startTime, endTime);
- });
+ $('.charts').bind("plotselected", function(event, ranges) {
+ cc.setTimeRange(new Date(ranges.xaxis.from),
+ new Date(ranges.xaxis.to));
});
});
</script>
</head>
<body>
+ <form method="GET" class="chartRangeControl">
+ <div>
+ <label>Start: <input type="text" name="startTime" /></label>
+ <label>End: <input type="text" name="endTime" /></label>
+ <input type="submit" value="Update" />
+ <input type="reset" value="Reset" />
+ </div>
+ </form>
<div class="charts">
<div class="chart"></div>
</div>