diff options
| author | Richard Wall <richard@aziz> | 2010-04-12 02:41:24 +0100 |
|---|---|---|
| committer | Richard Wall <richard@aziz> | 2010-04-12 02:41:24 +0100 |
| commit | 936f85faa33fb7781565f8b650c9554f3125d067 (patch) | |
| tree | 1e4cb89299e5172734e3ac4da8ecb116b67b3796 /index.html | |
| parent | e5716002c8d9cc092bd4ee87db9c9b5551f41309 (diff) | |
Add argument validation, a time range form and various docs and comments
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 72 |
1 files changed, 59 insertions, 13 deletions
@@ -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> |