graph.js in visage-app-0.9.5

- old
+ new

@@ -183,14 +183,14 @@
         }
         return url.join('/')
     },
     getData: function() {
         this.request = new Request.JSONP({
-            url: this.dataURL(),
-            data: this.requestData,
-            secure: this.options.secureJSON,
-            method: this.options.httpMethod,
+            url:        this.dataURL(),
+            data:       this.requestData,
+            secure:     this.options.secureJSON,
+            method:     this.options.httpMethod,
             onComplete: function(json) {
                 this.graphData(json);
             }.bind(this),
             onFailure: function(header, value) {
                 $(this.parentElement).set('html', header)
@@ -226,17 +226,37 @@
     Implements: Chain,
     // assemble data to graph, then draw it
     graphData: function(data) {
         this.response = data
         this.buildDataStructures()
+        this.lastStart  = this.series[0].data[0][0]
+        this.lastFinish = this.series[0].data.getLast()[0]
 
-        if ( $defined(this.chart) ) {
-            this.series.each(function(series, index) {
-                this.chart.series[index].setData(series.data, true)
-            }, this);
-        } else {
-            this.drawChart()
+        switch(true) {
+            case $defined(this.chart) && this.requestData['live']:
+                this.series.each(function(series, index) {
+                    var point = series.data[1];
+                    this.chart.series[index].addPoint(point, false);
+                }, this);
+                this.chart.redraw();
+                break;
+            case $defined(this.chart):
+                this.series.each(function(series, index) {
+                    this.chart.series[index].setData(series.data, false);
+                }, this);
+
+                /* Reset the zoom */
+                this.chart.toolbar.remove('zoom');
+                this.chart.xAxis.concat(this.chart.yAxis).each(function(axis) {
+                    axis.setExtremes(null,null,false);
+                });
+
+                this.chart.redraw();
+                break;
+            default:
+                this.drawChart()
+                break;
         }
     },
     buildDataStructures: function (data) {
         var series  = this.series = []
         var host    = this.options.host
@@ -292,10 +312,14 @@
                 height: 300,
                 events: {
                     load: function(e) {
                         setInterval(function() {
                             if (this.options.live) {
+                                var data = { 'start':  this.lastFinish,
+                                             'finish': this.lastFinish + 10,
+                                             'live':   true };
+                                this.requestData = data;
                                 this.getData()
                             }
                         }.bind(this), 10000);
                     }.bind(this)
                 }
@@ -409,15 +433,14 @@
             'method': 'get',
             'events': {
                 'submit': function(e, foo) {
                     e.stop();
                     e.target.getElement('select').getSelected().each(function(option) {
-                        data = new Hash()
-                        split = option.value.split('=')
-                        data.set(split[0], split[1])
+                        value = parseInt(option.value.split('=')[1])
+                        data = { 'start': value }
                     });
-                    this.requestData = data
+                    this.requestData = data;
 
                    /* Draw everything again. */
                     this.getData();
                 }.bind(this)
             }
@@ -444,10 +467,11 @@
 
         var liveToggler = new Element('input', {
             'type': 'checkbox',
             'id':   this.parentElement + '-live',
             'name': 'live',
+            'checked': this.options.live,
             'events': {
                 'click': function() {
                     this.options.live = !this.options.live
                 }.bind(this)
             },
@@ -476,15 +500,18 @@
                 'font-size':   '11px',
                 'margin-left': '8px',
             },
             'events': {
                 'mouseover': function(e) {
-                    var url     = e.target.get('href')
-                    var options = this.requestData.toQueryString()
+                    e.stop();
+                    var url      = e.target.get('href'),
+                        extremes = this.chart.xAxis[0].getExtremes(),
+                        options  = { 'start':  extremes.dataMin,
+                                     'finish': parseInt(extremes.dataMax) };
 
-                    if ( options != '' && ! url.contains('?') ) {
-                        url += '?' + options
-                    }
+                    var options = new Hash(options).toQueryString(),
+                        baseurl = this.dataURL(),
+                        url     = baseurl += '?' + options;
 
                     e.target.set('href', url)
                 }.bind(this)
             }
         });