From 7c2f1e1f3ad9efb66c2c6f2f76307ca019f5c9b1 Mon Sep 17 00:00:00 2001
From: Marc Delisle <marc@infomarc.info>
Date: Sun, 29 Jul 2012 06:23:55 -0400
Subject: [PATCH 01/42] Testing DateAxisRenderer

---
 js/server_status.js | 66 +++++++++++++++++++++++++++++++++++++++++++++
 server_status.php   |  6 +++++
 2 files changed, 72 insertions(+)

diff --git a/js/server_status.js b/js/server_status.js
index 438ed416c5..7619fb6ef5 100644
--- a/js/server_status.js
+++ b/js/server_status.js
@@ -332,6 +332,7 @@ $(function() {
         var settings = null;
 
         if (tabStatus[$tab.attr('id')] == 'static') {
+        /*
             settings = {
                 series: [ { name: PMA_messages['strChartIssuedQueries'], data: [] } ],
                 title: { text: PMA_messages['strChartIssuedQueriesTitle'] },
@@ -352,6 +353,31 @@ $(function() {
                             error: function() { serverResponseError(); }
                          }
             };
+        */
+            settings = {
+                title: PMA_messages['strChartIssuedQueriesTitle'],
+                axes: {
+                    xaxis: {
+                        label: PMA_messages['strChartIssuedQueries'],
+                        labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
+                        renderer: $.jqplot.DateAxisRenderer,
+                        tickInterval: 300000,
+                        //min: '2008-06-30 08:00:00',
+                        //min: '2012-06-07 12:00:00',
+                        //min: '1970-01-01 12:00:00',
+                        tickOptions: {
+                            formatString: '%Y-%m-%d %H:%M:%S'
+                        }
+                    }
+                }
+            };
+            $tab.find('.tabInnerContent')
+                .hide()
+                .after('<div class="liveChart" id="' + $tab.attr('id') + '_chart_cnt"></div>');
+            //currentChart = $.jqplot($tab.attr('id') + '_chart_cnt', [[null]], settings);
+            currentChart = $.jqplot($tab.attr('id') + '_chart_cnt', [[['2008-06-30 08:00:00',4], ['2008-06-30 08:00:05',6.5], ['2008-06-30 08:00:10',5.7], ['2008-06-30 08:00:15',9], ['2008-06-30 08:00:20',8.2]]], settings);
+            recursiveTimer(); 
+
         } else {
             $(this).html(PMA_messages['strLiveQueryChart']);
         }
@@ -361,6 +387,46 @@ $(function() {
         return false;
     });
 
+    var t;
+    var currentChart;
+    var series = new Array();
+    series[0] = new Array();
+
+    function recursiveTimer() {
+        ajaxGetStatus();
+        t = setTimeout(function() {
+                recursiveTimer() }, 5000);
+    }
+
+    function ajaxGetStatus() {
+        var ret = null;
+        $.ajax({
+            async: false,
+            url: 'server_status.php',
+            type: 'post',
+            data: {
+                'token' : window.parent.token,
+                'ajax_request' : true,
+                'chart_data' : true,
+                'type' : 'queries'
+            },
+            dataType: 'json',
+            success: function(data) {
+            ret = data;
+            }
+        });
+        
+        series[0].push([
+            //ret.x,
+            new Date().getTime(),
+            //getDateFromFormat('1970-01-01 12:15:00', 'yyyy-MM-dd HH:mm:ss'),
+            //-344401659000,
+            ret.y
+        ]); 
+        currentChart.series[0].data = series[0];
+        currentChart.replot();
+   };
+
     function setupLiveChart($tab, link, settings) {
         if (settings != null) {
             // Loading a chart with existing chart => remove old chart first
diff --git a/server_status.php b/server_status.php
index 58b11031df..67b6dab368 100644
--- a/server_status.php
+++ b/server_status.php
@@ -433,6 +433,12 @@ $GLOBALS['js_include'][] = 'canvg/canvg.js';
 // for profiling chart
 $GLOBALS['js_include'][] = 'jqplot/jquery.jqplot.js';
 $GLOBALS['js_include'][] = 'jqplot/plugins/jqplot.pieRenderer.js';
+$GLOBALS['js_include'][] = 'jqplot/plugins/jqplot.canvasTextRenderer.js';
+$GLOBALS['js_include'][] = 'jqplot/plugins/jqplot.canvasAxisLabelRenderer.js';
+$GLOBALS['js_include'][] = 'jqplot/plugins/jqplot.dateAxisRenderer.js';
+$GLOBALS['js_include'][] = 'jqplot/plugins/jqplot.highlighter.js';
+$GLOBALS['js_include'][] = 'jqplot/plugins/jqplot.cursor.js';
+$GLOBALS['js_include'][] = 'date.js';
 
 /**
  * flush status variables if requested

From f9cf1d1f70401cb908f51dc1cd27dd19f1237864 Mon Sep 17 00:00:00 2001
From: Marc Delisle <marc@infomarc.info>
Date: Sun, 29 Jul 2012 06:57:36 -0400
Subject: [PATCH 02/42] Upgrade to jqplot 1.0.2

---
 js/jqplot/jquery.jqplot.js                    | 607 ++++++++++++++----
 .../plugins/jqplot.canvasAxisLabelRenderer.js |   3 +-
 .../plugins/jqplot.canvasTextRenderer.js      |   3 +-
 js/jqplot/plugins/jqplot.cursor.js            |  33 +-
 js/jqplot/plugins/jqplot.dateAxisRenderer.js  |  37 +-
 js/jqplot/plugins/jqplot.highlighter.js       |  13 +-
 js/jqplot/plugins/jqplot.pieRenderer.js       |   7 +-
 7 files changed, 580 insertions(+), 123 deletions(-)

diff --git a/js/jqplot/jquery.jqplot.js b/js/jqplot/jquery.jqplot.js
index 3c620f2e3e..3e767e8643 100644
--- a/js/jqplot/jquery.jqplot.js
+++ b/js/jqplot/jquery.jqplot.js
@@ -5,7 +5,8 @@
  * 
  * About: Version
  * 
- * 1.0.0b2_r1012 
+ * version: 1.0.2 
+ * revision: 1108
  * 
  * About: Copyright & License
  * 
@@ -89,11 +90,11 @@
       for ( var i = 0, elem; (elem = $(this)[i]) != null; i++ ) {
         // Remove element nodes and prevent memory leaks
         if ( elem.nodeType === 1 ) {
-          jQuery.cleanData( elem.getElementsByTagName("*") );
+          $.cleanData( elem.getElementsByTagName("*") );
         }
   
         // Remove any remaining nodes
-        if ($.jqplot_use_excanvas) {
+        if ($.jqplot.use_excanvas) {
           elem.outerHTML = "";
         }
         else {
@@ -115,6 +116,56 @@
       }
     };
 
+    $.fn.jqplot = function() {
+        var datas = [];
+        var options = [];
+        // see how many data arrays we have
+        for (var i=0, l=arguments.length; i<l; i++) {
+            if ($.isArray(arguments[i])) {
+                datas.push(arguments[i]);
+            }
+            else if ($.isPlainObject(arguments[i])) {
+                options.push(arguments[i]);
+            }
+        }
+
+        return this.each(function(index) {
+            var tid, 
+                plot, 
+                $this = $(this),
+                dl = datas.length,
+                ol = options.length,
+                data, 
+                opts;
+
+            if (index < dl) {
+                data = datas[index];
+            }
+            else {
+                data = dl ? datas[dl-1] : null;
+            }
+
+            if (index < ol) {
+                opts = options[index];
+            }
+            else {
+                opts = ol ? options[ol-1] : null;
+            }
+
+            // does el have an id?
+            // if not assign it one.
+            tid = $this.attr('id');
+            if (tid === undefined) {
+                tid = 'jqplot_target_' + $.jqplot.targetCounter++;
+                $this.attr('id', tid);
+            }
+
+            plot = $.jqplot(tid, data, opts);
+
+            $this.data('jqplot', plot);
+        });
+    };
+
 
     /**
      * Namespace: $.jqplot
@@ -141,23 +192,27 @@
      */
 
     $.jqplot = function(target, data, options) {
-        var _data, _options;
-        
-        if (options == null) {
-            if (jQuery.isArray(data)) {
-                _data = data;
-                _options = null;   
-            }
-            
-            else if (typeof(data) === 'object') {
-                _data = null;
-                _options = data;
-            }
-        }
-        else {
+        var _data = null, _options = null;
+
+        if (arguments.length === 3) {
             _data = data;
             _options = options;
         }
+
+        else if (arguments.length === 2) {
+            if ($.isArray(data)) {
+                _data = data;
+            }
+
+            else if ($.isPlainObject(data)) {
+                _options = data;
+            }
+        }
+
+        if (_data === null && _options !== null && _options.data) {
+            _data = _options.data;
+        }
+
         var plot = new jqPlot();
         // remove any error class that may be stuck on target.
         $('#'+target).removeClass('jqplot-error');
@@ -189,7 +244,10 @@
         }
     };
 
-    $.jqplot.version = "1.0.0b2_r1012";
+    $.jqplot.version = "1.0.2";
+    $.jqplot.revision = "1108";
+
+    $.jqplot.targetCounter = 1;
 
     // canvas manager to reuse canvases on the plot.
     // Should help solve problem of canvases not being freed and
@@ -573,6 +631,9 @@
         // prop: borderColor
         // color of the border adjacent to the axis.  Defaults to grid border color.
         this.borderColor = null;
+        // prop: scaleToHiddenSeries
+        // True to include hidden series when computing axes bounds and scaling.
+        this.scaleToHiddenSeries = false;
         // minimum and maximum values on the axis.
         this._dataBounds = {min:null, max:null};
         // statistics (min, max, mean) as well as actual data intervals for each series attached to axis.
@@ -607,7 +668,9 @@
     Axis.prototype.constructor = Axis;
     
     Axis.prototype.init = function() {
-        this.renderer = new this.renderer();
+        if ($.isFunction(this.renderer)) {
+            this.renderer = new this.renderer();  
+        }
         // set the axis name
         this.tickOptions.axis = this.name;
         // if showMark or showLabel tick options not specified, use value of axis option.
@@ -715,7 +778,7 @@
         var doforce = (this.show) ? true : false;
         for (var i=0; i<this._series.length; i++) {
             s = this._series[i];
-            if (s.show) {
+            if (s.show || this.scaleToHiddenSeries) {
                 d = s._plotData;
                 if (s._type === 'line' && s.renderer.bands.show && this.name.charAt(0) !== 'x') {
                     d = [[0, s.renderer.bands._min], [1, s.renderer.bands._max]];
@@ -994,15 +1057,17 @@
     };
     
     Legend.prototype.init = function() {
-        this.renderer = new this.renderer();
+        if ($.isFunction(this.renderer)) {
+            this.renderer = new this.renderer();  
+        }
         this.renderer.init.call(this, this.rendererOptions);
     };
     
-    Legend.prototype.draw = function(offsets) {
+    Legend.prototype.draw = function(offsets, plot) {
         for (var i=0; i<$.jqplot.preDrawLegendHooks.length; i++){
             $.jqplot.preDrawLegendHooks[i].call(this, offsets);
         }
-        return this.renderer.draw.call(this, offsets);
+        return this.renderer.draw.call(this, offsets, plot);
     };
     
     Legend.prototype.pack = function(offsets) {
@@ -1057,7 +1122,9 @@
     Title.prototype.constructor = Title;
     
     Title.prototype.init = function() {
-        this.renderer = new this.renderer();
+        if ($.isFunction(this.renderer)) {
+            this.renderer = new this.renderer();  
+        }
         this.renderer.init.call(this, this.rendererOptions);
     };
     
@@ -1271,10 +1338,12 @@
         this.data = temp;
 
         // parse the renderer options and apply default colors if not provided
-        if (!this.color && this.show) {
+        // Set color even if not shown, so series don't change colors when other
+        // series on plot shown/hidden.
+        if (!this.color) {
             this.color = plot.colorGenerator.get(this.index);
         }
-        if (!this.negativeColor && this.show) {
+        if (!this.negativeColor) {
             this.negativeColor = plot.negativeColorGenerator.get(this.index);
         }
 
@@ -1287,7 +1356,9 @@
             var comp = $.jqplot.getColorComponents(comp);
             this.fillColor = 'rgba('+comp[0]+','+comp[1]+','+comp[2]+','+this.fillAlpha+')';
         }
-        this.renderer = new this.renderer();
+        if ($.isFunction(this.renderer)) {
+            this.renderer = new this.renderer();  
+        }
         this.renderer.init.call(this, this.rendererOptions, plot);
         this.markerRenderer = new this.markerRenderer();
         if (!this.markerOptions.color) {
@@ -1372,7 +1443,7 @@
             }
             gridData = options.gridData || this.renderer.makeGridData.call(this, data, plot);
         
-            this.renderer.drawShadow.call(this, sctx, gridData, options);
+            this.renderer.drawShadow.call(this, sctx, gridData, options, plot);
         }
         
         for (j=0; j<$.jqplot.postDrawSeriesShadowHooks.length; j++) {
@@ -1384,7 +1455,7 @@
     };
     
     // toggles series display on plot, e.g. show/hide series
-    Series.prototype.toggleDisplay = function(ev) {
+    Series.prototype.toggleDisplay = function(ev, callback) {
         var s, speed;
         if (ev.data.series) {
             s = ev.data.series;
@@ -1392,42 +1463,53 @@
         else {
             s = this;
         }
+
         if (ev.data.speed) {
             speed = ev.data.speed;
         }
         if (speed) {
-            if (s.canvas._elem.is(':hidden')) {
+            // this can be tricky because series may not have a canvas element if replotting.
+            if (s.canvas._elem.is(':hidden') || !s.show) {
+                s.show = true;
+
                 s.canvas._elem.removeClass('jqplot-series-hidden');
                 if (s.shadowCanvas._elem) {
                     s.shadowCanvas._elem.fadeIn(speed);
                 }
-                s.canvas._elem.fadeIn(speed);
+                s.canvas._elem.fadeIn(speed, callback);
                 s.canvas._elem.nextAll('.jqplot-point-label.jqplot-series-'+s.index).fadeIn(speed);
             }
             else {
+                s.show = false;
+
                 s.canvas._elem.addClass('jqplot-series-hidden');
                 if (s.shadowCanvas._elem) {
                     s.shadowCanvas._elem.fadeOut(speed);
                 }
-                s.canvas._elem.fadeOut(speed);
+                s.canvas._elem.fadeOut(speed, callback);
                 s.canvas._elem.nextAll('.jqplot-point-label.jqplot-series-'+s.index).fadeOut(speed);
             }
         }
         else {
-            if (s.canvas._elem.is(':hidden')) {
+            // this can be tricky because series may not have a canvas element if replotting.
+            if (s.canvas._elem.is(':hidden') || !s.show) {
+                s.show = true;
+
                 s.canvas._elem.removeClass('jqplot-series-hidden');
                 if (s.shadowCanvas._elem) {
                     s.shadowCanvas._elem.show();
                 }
-                s.canvas._elem.show();
+                s.canvas._elem.show(0, callback);
                 s.canvas._elem.nextAll('.jqplot-point-label.jqplot-series-'+s.index).show();
             }
             else {
+                s.show = false;
+
                 s.canvas._elem.addClass('jqplot-series-hidden');
                 if (s.shadowCanvas._elem) {
                     s.shadowCanvas._elem.hide();
                 }
-                s.canvas._elem.hide();
+                s.canvas._elem.hide(0, callback);
                 s.canvas._elem.nextAll('.jqplot-point-label.jqplot-series-'+s.index).hide();
             }
         }
@@ -1512,7 +1594,9 @@
     Grid.prototype.constructor = Grid;
     
     Grid.prototype.init = function() {
-        this.renderer = new this.renderer();
+        if ($.isFunction(this.renderer)) {
+            this.renderer = new this.renderer();  
+        }
         this.renderer.init.call(this, this.rendererOptions);
     };
     
@@ -1589,7 +1673,7 @@
         args = args || [];
         var havehook = false;
         for (var i=0, l=this.hooks.length; i<l; i++) {
-            if (this.hooks[i][0] == fn) {
+            if (this.hooks[i] == fn) {
                 havehook = true;
             }
         }
@@ -1873,7 +1957,7 @@
             // Add a reference to plot
             //////
             if (this._addDomReference) {
-                this.target.data('jqplot_plot', this);
+                this.target.data('jqplot', this);
             }
             // remove any error class that may be stuck on target.
             this.target.removeClass('jqplot-error');
@@ -1924,6 +2008,10 @@
             else {
                 this._width = w = this.target.width();
             }
+
+            for (var i=0, l=_axisNames.length; i<l; i++) {
+                this.axes[_axisNames[i]] = new Axis(_axisNames[i]);
+            }
             
             this._plotDimensions.height = this._height;
             this._plotDimensions.width = this._width;
@@ -1936,7 +2024,7 @@
                 throw "Canvas dimension not set";
             }
             
-            if (options.dataRenderer && jQuery.isFunction(options.dataRenderer)) {
+            if (options.dataRenderer && $.isFunction(options.dataRenderer)) {
                 if (options.dataRendererOptions) {
                     this.dataRendererOptions = options.dataRendererOptions;
                 }
@@ -1944,17 +2032,14 @@
                 data = this.dataRenderer(data, this, this.dataRendererOptions);
             }
             
-            if (options.noDataIndicator && jQuery.isPlainObject(options.noDataIndicator)) {
+            if (options.noDataIndicator && $.isPlainObject(options.noDataIndicator)) {
                 $.extend(true, this.noDataIndicator, options.noDataIndicator);
             }
             
-            if (data == null || jQuery.isArray(data) == false || data.length == 0 || jQuery.isArray(data[0]) == false || data[0].length == 0) {
+            if (data == null || $.isArray(data) == false || data.length == 0 || $.isArray(data[0]) == false || data[0].length == 0) {
                 
                 if (this.noDataIndicator.show == false) {
-                    throw{
-                        name: "DataError",
-                        message: "No data to plot."
-                    };
+                    throw "No Data";
                 }
                 
                 else {
@@ -1991,7 +2076,8 @@
                 }
             }
             
-            this.data = data;
+            // make a copy of the data
+            this.data = $.extend(true, [], data);
             
             this.parseOptions(options);
             
@@ -2016,35 +2102,37 @@
                 this.series[i].shadowCanvas._plotDimensions = this._plotDimensions;
                 this.series[i].canvas._plotDimensions = this._plotDimensions;
                 for (var j=0; j<$.jqplot.preSeriesInitHooks.length; j++) {
-                    $.jqplot.preSeriesInitHooks[j].call(this.series[i], target, data, this.options.seriesDefaults, this.options.series[i], this);
+                    $.jqplot.preSeriesInitHooks[j].call(this.series[i], target, this.data, this.options.seriesDefaults, this.options.series[i], this);
                 }
                 for (var j=0; j<this.preSeriesInitHooks.hooks.length; j++) {
-                    this.preSeriesInitHooks.hooks[j].call(this.series[i], target, data, this.options.seriesDefaults, this.options.series[i], this);
+                    this.preSeriesInitHooks.hooks[j].call(this.series[i], target, this.data, this.options.seriesDefaults, this.options.series[i], this);
                 }
                 this.populatePlotData(this.series[i], i);
                 this.series[i]._plotDimensions = this._plotDimensions;
                 this.series[i].init(i, this.grid.borderWidth, this);
                 for (var j=0; j<$.jqplot.postSeriesInitHooks.length; j++) {
-                    $.jqplot.postSeriesInitHooks[j].call(this.series[i], target, data, this.options.seriesDefaults, this.options.series[i], this);
+                    $.jqplot.postSeriesInitHooks[j].call(this.series[i], target, this.data, this.options.seriesDefaults, this.options.series[i], this);
                 }
                 for (var j=0; j<this.postSeriesInitHooks.hooks.length; j++) {
-                    this.postSeriesInitHooks.hooks[j].call(this.series[i], target, data, this.options.seriesDefaults, this.options.series[i], this);
+                    this.postSeriesInitHooks.hooks[j].call(this.series[i], target, this.data, this.options.seriesDefaults, this.options.series[i], this);
                 }
                 this._sumy += this.series[i]._sumy;
                 this._sumx += this.series[i]._sumx;
             }
 
-            var name;
-            for (var i=0; i<12; i++) {
+            var name,
+                axis;
+            for (var i=0, l=_axisNames.length; i<l; i++) {
                 name = _axisNames[i];
-                this.axes[name]._plotDimensions = this._plotDimensions;
-                this.axes[name].init();
+                axis = this.axes[name];
+                axis._plotDimensions = this._plotDimensions;
+                axis.init();
                 if (this.axes[name].borderColor == null) {
-                    if (name.charAt(0) !== 'x' && this.axes[name].useSeriesColor === true && this.axes[name].show) {
-                        this.axes[name].borderColor = this.axes[name]._series[0].color;
+                    if (name.charAt(0) !== 'x' && axis.useSeriesColor === true && axis.show) {
+                        axis.borderColor = axis._series[0].color;
                     }
                     else {
-                        this.axes[name].borderColor = this.grid.borderColor;
+                        axis.borderColor = this.grid.borderColor;
                     }
                 }
             }
@@ -2058,11 +2146,11 @@
             this.legend._series = this.series;
 
             for (var i=0; i<$.jqplot.postInitHooks.length; i++) {
-                $.jqplot.postInitHooks[i].call(this, target, data, options);
+                $.jqplot.postInitHooks[i].call(this, target, this.data, options);
             }
 
             for (var i=0; i<this.postInitHooks.hooks.length; i++) {
-                this.postInitHooks.hooks[i].call(this, target, data, options);
+                this.postInitHooks.hooks[i].call(this, target, this.data, options);
             }
         };  
         
@@ -2078,7 +2166,7 @@
             if (ax === true) {
                 ax = this.axes;
             }
-            if (jQuery.isArray(ax)) {
+            if ($.isArray(ax)) {
                 for (var i = 0; i < ax.length; i++) {
                     this.axes[ax[i]].resetScale(opts[ax[i]]);
                 }
@@ -2092,7 +2180,175 @@
         // method: reInitialize
         // reinitialize plot for replotting.
         // not called directly.
-        this.reInitialize = function () {
+        this.reInitialize = function (data, opts) {
+            // Plot should be visible and have a height and width.
+            // If plot doesn't have height and width for some
+            // reason, set it by other means.  Plot must not have
+            // a display:none attribute, however.
+
+            var options = $.extend(true, {}, this.options, opts);
+
+            var target = this.targetId.substr(1);
+            var tdata = (data == null) ? this.data : data;
+
+            for (var i=0; i<$.jqplot.preInitHooks.length; i++) {
+                $.jqplot.preInitHooks[i].call(this, target, tdata, options);
+            }
+
+            for (var i=0; i<this.preInitHooks.hooks.length; i++) {
+                this.preInitHooks.hooks[i].call(this, target, tdata, options);
+            }
+            
+            this._height = this.target.height();
+            this._width = this.target.width();
+            
+            if (this._height <=0 || this._width <=0 || !this._height || !this._width) {
+                throw "Target dimension not set";
+            }
+            
+            this._plotDimensions.height = this._height;
+            this._plotDimensions.width = this._width;
+            this.grid._plotDimensions = this._plotDimensions;
+            this.title._plotDimensions = this._plotDimensions;
+            this.baseCanvas._plotDimensions = this._plotDimensions;
+            this.eventCanvas._plotDimensions = this._plotDimensions;
+            this.legend._plotDimensions = this._plotDimensions;
+
+            var name,
+                t, 
+                j, 
+                axis;
+
+            for (var i=0, l=_axisNames.length; i<l; i++) {
+                name = _axisNames[i];
+                axis = this.axes[name];
+
+                // Memory Leaks patch : clear ticks elements
+                t = axis._ticks;
+                for (var j = 0, tlen = t.length; j < tlen; j++) {
+                  var el = t[j]._elem;
+                  if (el) {
+                    // if canvas renderer
+                    if ($.jqplot.use_excanvas && window.G_vmlCanvasManager.uninitElement !== undefined) {
+                      window.G_vmlCanvasManager.uninitElement(el.get(0));
+                    }
+                    el.emptyForce();
+                    el = null;
+                    t._elem = null;
+                  }
+                }
+                t = null;
+
+                delete axis.ticks;
+                delete axis._ticks;
+                this.axes[name] = new Axis(name);
+                this.axes[name]._plotWidth = this._width;
+                this.axes[name]._plotHeight = this._height;
+            }
+            
+            if (data) {
+                if (options.dataRenderer && $.isFunction(options.dataRenderer)) {
+                    if (options.dataRendererOptions) {
+                        this.dataRendererOptions = options.dataRendererOptions;
+                    }
+                    this.dataRenderer = options.dataRenderer;
+                    data = this.dataRenderer(data, this, this.dataRendererOptions);
+                }
+                
+                // make a copy of the data
+                this.data = $.extend(true, [], data);
+            }
+
+            if (opts) {
+                this.parseOptions(options);
+            }
+            
+            this.title._plotWidth = this._width;
+            
+            if (this.textColor) {
+                this.target.css('color', this.textColor);
+            }
+            if (this.fontFamily) {
+                this.target.css('font-family', this.fontFamily);
+            }
+            if (this.fontSize) {
+                this.target.css('font-size', this.fontSize);
+            }
+
+            this.title.init();
+            this.legend.init();
+            this._sumy = 0;
+            this._sumx = 0;
+
+            this.seriesStack = [];
+            this.previousSeriesStack = [];
+
+            for (var i=0, l=this.series.length; i<l; i++) {
+                // set default stacking order for series canvases
+                this.seriesStack.push(i);
+                this.previousSeriesStack.push(i);
+                this.series[i].shadowCanvas._plotDimensions = this._plotDimensions;
+                this.series[i].canvas._plotDimensions = this._plotDimensions;
+                for (var j=0; j<$.jqplot.preSeriesInitHooks.length; j++) {
+                    $.jqplot.preSeriesInitHooks[j].call(this.series[i], target, this.data, this.options.seriesDefaults, this.options.series[i], this);
+                }
+                for (var j=0; j<this.preSeriesInitHooks.hooks.length; j++) {
+                    this.preSeriesInitHooks.hooks[j].call(this.series[i], target, this.data, this.options.seriesDefaults, this.options.series[i], this);
+                }
+                this.populatePlotData(this.series[i], i);
+                this.series[i]._plotDimensions = this._plotDimensions;
+                this.series[i].init(i, this.grid.borderWidth, this);
+                for (var j=0; j<$.jqplot.postSeriesInitHooks.length; j++) {
+                    $.jqplot.postSeriesInitHooks[j].call(this.series[i], target, this.data, this.options.seriesDefaults, this.options.series[i], this);
+                }
+                for (var j=0; j<this.postSeriesInitHooks.hooks.length; j++) {
+                    this.postSeriesInitHooks.hooks[j].call(this.series[i], target, this.data, this.options.seriesDefaults, this.options.series[i], this);
+                }
+                this._sumy += this.series[i]._sumy;
+                this._sumx += this.series[i]._sumx;
+            }
+
+            for (var i=0, l=_axisNames.length; i<l; i++) {
+                name = _axisNames[i];
+                axis = this.axes[name];
+
+                axis._plotDimensions = this._plotDimensions;
+                axis.init();
+                if (axis.borderColor == null) {
+                    if (name.charAt(0) !== 'x' && axis.useSeriesColor === true && axis.show) {
+                        axis.borderColor = axis._series[0].color;
+                    }
+                    else {
+                        axis.borderColor = this.grid.borderColor;
+                    }
+                }
+            }
+            
+            if (this.sortData) {
+                sortData(this.series);
+            }
+            this.grid.init();
+            this.grid._axes = this.axes;
+            
+            this.legend._series = this.series;
+
+            for (var i=0, l=$.jqplot.postInitHooks.length; i<l; i++) {
+                $.jqplot.postInitHooks[i].call(this, target, this.data, options);
+            }
+
+            for (var i=0, l=this.postInitHooks.hooks.length; i<l; i++) {
+                this.postInitHooks.hooks[i].call(this, target, this.data, options);
+            }
+        };
+
+
+
+        // method: quickInit
+        // 
+        // Quick reinitialization plot for replotting.
+        // Does not parse options ore recreate axes and series.
+        // not called directly.
+        this.quickInit = function () {
             // Plot should be visible and have a height and width.
             // If plot doesn't have height and width for some
             // reason, set it by other means.  Plot must not have
@@ -2238,7 +2494,10 @@
                         temp[k][0] += cd[k][0];
                         temp[k][1] += cd[k][1];
                         // only need to sum up the stack axis column of data
-                        plotdata[k][sidx] += cd[k][sidx];
+                        // and only sum if it is of same sign.
+                        if (series.data[k][sidx] * cd[k][sidx] >= 0) {
+                            plotdata[k][sidx] += cd[k][sidx];
+                        }
                     }
                 }
                 for (var i=0; i<plotdata.length; i++) {
@@ -2352,7 +2611,7 @@
                 var temp = [];
                 var i;
                 dir = dir || 'vertical';
-                if (!jQuery.isArray(data[0])) {
+                if (!$.isArray(data[0])) {
                     // we have a series of scalars.  One line with just y values.
                     // turn the scalar list of data into a data array of form:
                     // [[1, data[0]], [2, data[1]], ...]
@@ -2373,6 +2632,7 @@
             };
 
             var colorIndex = 0;
+            this.series = [];
             for (var i=0; i<this.data.length; i++) {
                 var temp = new Series();
                 for (var j=0; j<$.jqplot.preParseSeriesOptionsHooks.length; j++) {
@@ -2404,6 +2664,14 @@
                     temp._xaxis.show = true;
                     temp._yaxis.show = true;
                 }
+                else {
+                    if (temp._xaxis.scaleToHiddenSeries) {
+                        temp._xaxis.show = true;
+                    }
+                    if (temp._yaxis.scaleToHiddenSeries) {
+                        temp._yaxis.show = true;
+                    }
+                }
 
                 // // parse the renderer options and apply default colors if not provided
                 // if (!temp.color && temp.show != false) {
@@ -2431,7 +2699,7 @@
             // copy the grid and title options into this object.
             $.extend(true, this.grid, this.options.grid);
             // if axis border properties aren't set, set default.
-            for (var i=0; i<12; i++) {
+            for (var i=0, l=_axisNames.length; i<l; i++) {
                 var n = _axisNames[i];
                 var axis = this.axes[n];
                 if (axis.borderWidth == null) {
@@ -2466,7 +2734,7 @@
             // Couple of posts on Stack Overflow indicate that empty() doesn't
             // always cear up the dom and release memory.  Sometimes setting
             // innerHTML property to null is needed.  Particularly on IE, may 
-            // have to directly set it to null, bypassing jQuery.
+            // have to directly set it to null, bypassing $.
             this.target.empty();
 
             this.target[0].innerHTML = '';
@@ -2486,14 +2754,27 @@
         //             optionally pass in list of axes to reset (e.g. ['xaxis', 'y2axis']) (default: false).
         this.replot = function(options) {
             var opts =  options || {};
+            var data = opts.data || null;
             var clear = (opts.clear === false) ? false : true;
             var resetAxes = opts.resetAxes || false;
+            delete opts.data;
+            delete opts.clear;
+            delete opts.resetAxes;
+
             this.target.trigger('jqplotPreReplot');
             
             if (clear) {
                 this.destroy();
             }
-            this.reInitialize();
+            // if have data or other options, full reinit.
+            // otherwise, quickinit.
+            if (data || !$.isEmptyObject(opts)) {
+                this.reInitialize(data, opts);
+            }
+            else {
+                this.quickInit();
+            }
+
             if (resetAxes) {
                 this.resetAxesScale(resetAxes, opts.axes);
             }
@@ -2562,7 +2843,8 @@
                 this.title.pack({top:0, left:0});
                 
                 // make room  for the legend between the grid and the edge.
-                var legendElem = this.legend.draw();
+                // pass a dummy offsets object and a reference to the plot.
+                var legendElem = this.legend.draw({}, this);
                 
                 var gridPadding = {top:0, left:0, bottom:0, right:0};
                 
@@ -2651,8 +2933,16 @@
                     }
                 }
                 
-                var legendPadding = (this.legend.placement == 'outsideGrid') ? {top:this.title.getHeight(), left: 0, right: 0, bottom: 0} : this._gridPadding;
-            
+                var legendPadding = this._gridPadding;
+                
+                if (this.legend.placement === 'outsideGrid') {
+                    legendPadding = {top:this.title.getHeight(), left: 0, right: 0, bottom: 0};
+                    if (this.legend.location === 's') {
+                        legendPadding.left = this._gridPadding.left;
+                        legendPadding.right = this._gridPadding.right;
+                    }
+                }
+                
                 ax.xaxis.pack({position:'absolute', bottom:this._gridPadding.bottom - ax.xaxis.getHeight(), left:0, width:this._width}, {min:this._gridPadding.left, max:this._width - this._gridPadding.right});
                 ax.yaxis.pack({position:'absolute', top:0, left:this._gridPadding.left - ax.yaxis.getWidth(), height:this._height}, {min:this._height - this._gridPadding.bottom, max: this._gridPadding.top});
                 ax.x2axis.pack({position:'absolute', top:this._gridPadding.top - ax.x2axis.getHeight(), left:0, width:this._width}, {min:this._gridPadding.left, max:this._width - this._gridPadding.right});
@@ -2846,14 +3136,14 @@
         function checkIntersection(gridpos, plot) {
             var series = plot.series;
             var i, j, k, s, r, x, y, theta, sm, sa, minang, maxang;
-            var d0, d, p, pp, points, bw;
+            var d0, d, p, pp, points, bw, hp;
             var threshold, t;
             for (k=plot.seriesStack.length-1; k>=0; k--) {
                 i = plot.seriesStack[k];
                 s = series[i];
+                hp = s._highlightThreshold;
                 switch (s.renderer.constructor) {
                     case $.jqplot.BarRenderer:
-                    case $.jqplot.PyramidRenderer:
                         x = gridpos.x;
                         y = gridpos.y;
                         for (j=0; j<s._barPoints.length; j++) {
@@ -2864,6 +3154,17 @@
                             }
                         }
                         break;
+                    case $.jqplot.PyramidRenderer:
+                        x = gridpos.x;
+                        y = gridpos.y;
+                        for (j=0; j<s._barPoints.length; j++) {
+                            points = s._barPoints[j];
+                            p = s.gridData[j];
+                            if (x > points[0][0] + hp[0][0] && x < points[2][0] + hp[2][0] && y > points[2][1] && y < points[0][1]) {
+                                return {seriesIndex:s.index, pointIndex:j, gridData:p, data:s.data[j], points:s._barPoints[j]};
+                            }
+                        }
+                        break;
                     
                     case $.jqplot.DonutRenderer:
                         sa = s.startAngle/180*Math.PI;
@@ -3139,7 +3440,7 @@
             var positions = getEventPosition(ev);
             var p = ev.data.plot;
             var neighbor = checkIntersection(positions.gridPos, p);
-            var evt = jQuery.Event('jqplotClick');
+            var evt = $.Event('jqplotClick');
             evt.pageX = ev.pageX;
             evt.pageY = ev.pageY;
             $(this).trigger(evt, [positions.gridPos, positions.dataPos, neighbor, p]);
@@ -3151,7 +3452,7 @@
             var positions = getEventPosition(ev);
             var p = ev.data.plot;
             var neighbor = checkIntersection(positions.gridPos, p);
-            var evt = jQuery.Event('jqplotDblClick');
+            var evt = $.Event('jqplotDblClick');
             evt.pageX = ev.pageX;
             evt.pageY = ev.pageY;
             $(this).trigger(evt, [positions.gridPos, positions.dataPos, neighbor, p]);
@@ -3161,7 +3462,7 @@
             var positions = getEventPosition(ev);
             var p = ev.data.plot;
             var neighbor = checkIntersection(positions.gridPos, p);
-            var evt = jQuery.Event('jqplotMouseDown');
+            var evt = $.Event('jqplotMouseDown');
             evt.pageX = ev.pageX;
             evt.pageY = ev.pageY;
             $(this).trigger(evt, [positions.gridPos, positions.dataPos, neighbor, p]);
@@ -3169,7 +3470,7 @@
         
         this.onMouseUp = function(ev) {
             var positions = getEventPosition(ev);
-            var evt = jQuery.Event('jqplotMouseUp');
+            var evt = $.Event('jqplotMouseUp');
             evt.pageX = ev.pageX;
             evt.pageY = ev.pageY;
             $(this).trigger(evt, [positions.gridPos, positions.dataPos, null, ev.data.plot]);
@@ -3181,13 +3482,13 @@
             var neighbor = checkIntersection(positions.gridPos, p);
             if (p.captureRightClick) {
                 if (ev.which == 3) {
-                var evt = jQuery.Event('jqplotRightClick');
+                var evt = $.Event('jqplotRightClick');
                 evt.pageX = ev.pageX;
                 evt.pageY = ev.pageY;
                     $(this).trigger(evt, [positions.gridPos, positions.dataPos, neighbor, p]);
                 }
                 else {
-                var evt = jQuery.Event('jqplotMouseUp');
+                var evt = $.Event('jqplotMouseUp');
                 evt.pageX = ev.pageX;
                 evt.pageY = ev.pageY;
                     $(this).trigger(evt, [positions.gridPos, positions.dataPos, neighbor, p]);
@@ -3199,7 +3500,7 @@
             var positions = getEventPosition(ev);
             var p = ev.data.plot;
             var neighbor = checkIntersection(positions.gridPos, p);
-            var evt = jQuery.Event('jqplotMouseMove');
+            var evt = $.Event('jqplotMouseMove');
             evt.pageX = ev.pageX;
             evt.pageY = ev.pageY;
             $(this).trigger(evt, [positions.gridPos, positions.dataPos, neighbor, p]);
@@ -3208,7 +3509,7 @@
         this.onMouseEnter = function(ev) {
             var positions = getEventPosition(ev);
             var p = ev.data.plot;
-            var evt = jQuery.Event('jqplotMouseEnter');
+            var evt = $.Event('jqplotMouseEnter');
             evt.pageX = ev.pageX;
             evt.pageY = ev.pageY;
             evt.relatedTarget = ev.relatedTarget;
@@ -3218,7 +3519,7 @@
         this.onMouseLeave = function(ev) {
             var positions = getEventPosition(ev);
             var p = ev.data.plot;
-            var evt = jQuery.Event('jqplotMouseLeave');
+            var evt = $.Event('jqplotMouseLeave');
             evt.pageX = ev.pageX;
             evt.pageY = ev.pageY;
             evt.relatedTarget = ev.relatedTarget;
@@ -3379,7 +3680,7 @@
     // conpute a highlight color or array of highlight colors from given colors.
     $.jqplot.computeHighlightColors  = function(colors) {
         var ret;
-        if (jQuery.isArray(colors)) {
+        if ($.isArray(colors)) {
             ret = [];
             for (var i=0; i<colors.length; i++){
                 var rgba = $.jqplot.getColorComponents(colors[i]);
@@ -3801,6 +4102,10 @@
         // String to prepend to the tick label.
         // Prefix is prepended to the formatted tick label.
         this.prefix = '';
+        // prop: suffix
+        // String to append to the tick label.
+        // Suffix is appended to the formatted tick label.
+        this.suffix = '';
         // prop: formatString
         // string passed to the formatter.
         this.formatString = '';
@@ -3840,7 +4145,7 @@
     
     $.jqplot.AxisTickRenderer.prototype.draw = function() {
         if (this.label === null) {
-            this.label = this.prefix + this.formatter(this.formatString, this.value);
+            this.label = this.prefix + this.formatter(this.formatString, this.value) + this.suffix;
         }
         var style = {position: 'absolute'};
         if (Number(this.label)) {
@@ -3895,6 +4200,19 @@
             return String(val);
         }
     };
+        
+    $.jqplot.PercentTickFormatter = function (format, val) {
+        if (typeof val == 'number') {
+            val = 100 * val;
+            if (!format) {
+                format = $.jqplot.config.defaultTickFormatString;
+            }
+            return $.jqplot.sprintf(format, val);
+        }
+        else {
+            return String(val);
+        }
+    };
     
     $.jqplot.AxisTickRenderer.prototype.pack = function() {
     };
@@ -5110,7 +5428,7 @@
         this.renderer._lowBandSmoothedData = [];
         var bands = this.renderer.bands;
         var hasNull = false;
-        for (var i=0, l=this.data.length; i < l; i++) {
+        for (var i=0, l=data.length; i < l; i++) {
             // if not a line series or if no nulls in data, push the converted point onto the array.
             if (data[i][0] != null && data[i][1] != null) {
                 this.gridData.push([xp.call(this._xaxis, data[i][0]), yp.call(this._yaxis, data[i][1])]);
@@ -5583,6 +5901,7 @@
             plot.target.trigger(evt1, ins);
             if (plot.series[ins[0]].highlightMouseOver && !(ins[0] == plot.plugins.lineRenderer.highlightedSeriesIndex)) {
                 var evt = jQuery.Event('jqplotDataHighlight');
+		evt.which = ev.which;
                 evt.pageX = ev.pageX;
                 evt.pageY = ev.pageY;
                 plot.target.trigger(evt, ins);
@@ -5599,6 +5918,7 @@
             var ins = [neighbor.seriesIndex, neighbor.pointIndex, neighbor.data];
             if (plot.series[ins[0]].highlightMouseDown && !(ins[0] == plot.plugins.lineRenderer.highlightedSeriesIndex)) {
                 var evt = jQuery.Event('jqplotDataHighlight');
+		evt.which = ev.which;
                 evt.pageX = ev.pageX;
                 evt.pageY = ev.pageY;
                 plot.target.trigger(evt, ins);
@@ -5621,6 +5941,7 @@
         if (neighbor) {
             var ins = [neighbor.seriesIndex, neighbor.pointIndex, neighbor.data];
             var evt = jQuery.Event('jqplotDataClick');
+	    evt.which = ev.which;
             evt.pageX = ev.pageX;
             evt.pageY = ev.pageY;
             plot.target.trigger(evt, ins);
@@ -5635,6 +5956,7 @@
                 unhighlight(plot);
             }
             var evt = jQuery.Event('jqplotDataRightClick');
+	    evt.which = ev.which;
             evt.pageX = ev.pageX;
             evt.pageY = ev.pageY;
             plot.target.trigger(evt, ins);
@@ -5965,7 +6287,7 @@
             }
 
             // Doing complete autoscaling
-            if (this.min == null && this.max == null && this.tickInterval == null && !this.autoscale) {
+            if (this.min == null || this.max == null && this.tickInterval == null && !this.autoscale) {
                 // Check if user must have tick at 0 or 100 and ensure they are in range.
                 // The autoscaling algorithm will always place ticks at 0 and 100 if they are in range.
                 if (this.forceTickAt0) {
@@ -5986,22 +6308,34 @@
                     }
                 }
 
+                var keepMin = false,
+                    keepMax = false;
+
+                if (this.min != null) {
+                    keepMin = true;
+                }
+
+                else if (this.max != null) {
+                    keepMax = true;
+                }
+
                 // var threshold = 30;
                 // var tdim = Math.max(dim, threshold+1);
                 // this._scalefact =  (tdim-threshold)/300.0;
-                var ret = $.jqplot.LinearTickGenerator(min, max, this._scalefact, _numberTicks); 
+                var ret = $.jqplot.LinearTickGenerator(min, max, this._scalefact, _numberTicks, keepMin, keepMax); 
                 // calculate a padded max and min, points should be less than these
                 // so that they aren't too close to the edges of the plot.
                 // User can adjust how much padding is allowed with pad, padMin and PadMax options. 
-                var tumin = min + range*(this.padMin - 1);
-                var tumax = max - range*(this.padMax - 1);
+                // If min or max is set, don't pad that end of axis.
+                var tumin = (this.min != null) ? min : min + range*(this.padMin - 1);
+                var tumax = (this.max != null) ? max : max - range*(this.padMax - 1);
 
                 // if they're equal, we shouldn't have to do anything, right?
                 // if (min <=tumin || max >= tumax) {
                 if (min <tumin || max > tumax) {
-                    tumin = min - range*(this.padMin - 1);
-                    tumax = max + range*(this.padMax - 1);
-                    ret = $.jqplot.LinearTickGenerator(tumin, tumax, this._scalefact, _numberTicks);
+                    tumin = (this.min != null) ? min : min - range*(this.padMin - 1);
+                    tumax = (this.max != null) ? max : max + range*(this.padMax - 1);
+                    ret = $.jqplot.LinearTickGenerator(tumin, tumax, this._scalefact, _numberTicks, keepMin, keepMax);
                 }
 
                 this.min = ret[0];
@@ -6686,9 +7020,9 @@
         var temp;
         var sd;
         var bestNT;
+        var gsf = $.jqplot.getSignificantFigures;
         var fsd;
         var fs;
-        var gsf = $.jqplot.getSignificantFigures;
         var currentNT;
         var bestPrec;
 
@@ -6860,7 +7194,11 @@
     // for the graphing, a good number for the number of ticks, and a
     // format string so that extraneous digits are not displayed.
     // returned is an array containing [min, max, nTicks, format]
-    $.jqplot.LinearTickGenerator = function(axis_min, axis_max, scalefact, numberTicks) {
+    $.jqplot.LinearTickGenerator = function(axis_min, axis_max, scalefact, numberTicks, keepMin, keepMax) {
+        // Set to preserve EITHER min OR max.
+        // If min is preserved, max must be free.
+        keepMin = (keepMin === null) ? false : keepMin;
+        keepMax = (keepMax === null || keepMin) ? false : keepMax;
         // if endpoints are equal try to include zero otherwise include one
         if (axis_min === axis_max) {
             axis_max = (axis_max) ? 0 : 1;
@@ -6877,6 +7215,8 @@
 
         var r = [];
         var ss = bestLinearInterval(axis_max - axis_min, scalefact);
+
+        var gsf = $.jqplot.getSignificantFigures;
         
         if (numberTicks == null) {
 
@@ -6884,11 +7224,43 @@
             // the min and max will be some multiple of the tick interval,
             // 1*10^n, 2*10^n or 5*10^n.  This gaurantees that, if the
             // axis min is negative, 0 will be a tick.
-            r[0] = Math.floor(axis_min / ss) * ss;  // min
-            r[1] = Math.ceil(axis_max / ss) * ss;   // max
-            r[2] = Math.round((r[1]-r[0])/ss+1.0);  // number of ticks
-            r[3] = bestFormatString(ss);            // format string
-            r[4] = ss;                              // tick Interval
+            if (!keepMin && !keepMax) {
+                r[0] = Math.floor(axis_min / ss) * ss;  // min
+                r[1] = Math.ceil(axis_max / ss) * ss;   // max
+                r[2] = Math.round((r[1]-r[0])/ss+1.0);  // number of ticks
+                r[3] = bestFormatString(ss);            // format string
+                r[4] = ss;                              // tick Interval
+            }
+
+            else if (keepMin) {
+                r[0] = axis_min;                                        // min
+                r[2] = Math.ceil((axis_max - axis_min) / ss + 1.0);     // number of ticks
+                r[1] = axis_min + (r[2] - 1) * ss;                      // max
+                var digitsMin = gsf(axis_min).digitsRight;
+                var digitsSS = gsf(ss).digitsRight;
+                if (digitsMin < digitsSS) {
+                    r[3] = bestFormatString(ss);                        // format string
+                }
+                else {
+                    r[3] = '%.' + digitsMin + 'f';
+                }
+                r[4] = ss;                                              // tick Interval
+            }
+
+            else if (keepMax) {
+                r[1] = axis_max;                                        // max
+                r[2] = Math.ceil((axis_max - axis_min) / ss + 1.0);     // number of ticks
+                r[0] = axis_max - (r[2] - 1) * ss;                      // min
+                var digitsMax = gsf(axis_max).digitsRight;
+                var digitsSS = gsf(ss).digitsRight;
+                if (digitsMax < digitsSS) {
+                    r[3] = bestFormatString(ss);                        // format string
+                }
+                else {
+                    r[3] = '%.' + digitsMax + 'f';
+                }
+                r[4] = ss;                                              // tick Interval
+            }
         }
 
         else {
@@ -6913,10 +7285,10 @@
 
                 var newti = bestInterval(tempr[1] - tempr[0], numberTicks);
 
-                r[0] = tempr[0];
-                r[2] = numberTicks;
-                r[4] = newti;
-                r[3] = bestFormatString(newti);
+                r[0] = tempr[0];                        // min
+                r[2] = numberTicks;                     // number of ticks
+                r[4] = newti;                           // tick interval
+                r[3] = bestFormatString(newti);         // format string
                 r[1] = r[0] + (r[2] - 1) * r[4];        // max
             }
         }
@@ -8559,7 +8931,7 @@
 
     // Returns font style as abbreviation for "font" property.
     $.fn.jqplotGetComputedFontStyle = function() {
-        var css = window.getComputedStyle ?  window.getComputedStyle(this[0]) : this[0].currentStyle;
+        var css = window.getComputedStyle ?  window.getComputedStyle(this[0], "") : this[0].currentStyle;
         var attrs = css['font-style'] ? ['font-style', 'font-weight', 'font-size', 'font-family'] : ['fontStyle', 'fontWeight', 'fontSize', 'fontFamily'];
         var style = [];
 
@@ -8591,7 +8963,7 @@
         }
 
         // excanvas and hence IE < 9 do not support toDataURL and cannot export images.
-        if (!$.jqplot.support_canvas) {
+        if ($.jqplot.use_excanvas) {
             return null;
         }
         
@@ -8613,7 +8985,7 @@
 
         var temptop, templeft, tempbottom, tempright;
 
-        for (var i in clses) {
+        for (var i = 0; i < clses.length; i++) {
             $(this).find('.'+clses[i]).each(function() {
                 temptop = $(this).offset().top - plottop;
                 templeft = $(this).offset().left - plotleft;
@@ -8675,6 +9047,7 @@
                 if (context.measureText(w).width > tagwidth) {
                     breaks.push(i);
                     w = '';
+                    i--;
                 }   
             }
             if (breaks.length === 0) {
@@ -8714,12 +9087,14 @@
         function _jqpToImage(el, x_offset, y_offset) {
             var tagname = el.tagName.toLowerCase();
             var p = $(el).position();
-            var css = window.getComputedStyle ?  window.getComputedStyle(el) : el.currentStyle; // for IE < 9
+            var css = window.getComputedStyle ?  window.getComputedStyle(el, "") : el.currentStyle; // for IE < 9
             var left = x_offset + p.left + parseInt(css.marginLeft, 10) + parseInt(css.borderLeftWidth, 10) + parseInt(css.paddingLeft, 10);
             var top = y_offset + p.top + parseInt(css.marginTop, 10) + parseInt(css.borderTopWidth, 10)+ parseInt(css.paddingTop, 10);
             var w = newCanvas.width;
             // var left = x_offset + p.left + $(el).css('marginLeft') + $(el).css('borderLeftWidth') 
 
+            // somehow in here, for divs within divs, the width of the inner div should be used instead of the canvas.
+
             if ((tagname == 'div' || tagname == 'span') && !$(el).hasClass('jqplot-highlighter-tooltip')) {
                 $(el).children().each(function() {
                     _jqpToImage(this, left, top);
@@ -8773,7 +9148,7 @@
                     var t = top + elem.position().top + parseInt(elem.css('padding-top'), 10);
                     newContext.font = elem.jqplotGetComputedFontStyle();
                     newContext.fillStyle = elem.css('color');
-                    newContext.fillText(elem.text(), l, t);
+                    writeWrappedText(elem, newContext, elem.text(), l, t, w);
                 });
 
                 var elem = null;
@@ -8789,6 +9164,8 @@
         return newCanvas;
     };
 
+    // return the raw image data string.
+    // Should work on canvas supporting browsers.
     $.fn.jqplotToImageStr = function(options) {
         var imgCanvas = $(this).jqplotToImageCanvas(options);
         if (imgCanvas) {
@@ -8799,7 +9176,7 @@
         }
     };
 
-    // create an <img> element and return it.
+    // return a DOM <img> element and return it.
     // Should work on canvas supporting browsers.
     $.fn.jqplotToImageElem = function(options) {
         var elem = document.createElement("img");
@@ -8808,7 +9185,7 @@
         return elem;
     };
 
-    // create an <img> element and return it.
+    // return a string for an <img> element and return it.
     // Should work on canvas supporting browsers.
     $.fn.jqplotToImageElemStr = function(options) {
         var str = '<img src='+$(this).jqplotToImageStr(options)+' />';
@@ -8841,6 +9218,7 @@
     
 
 
+
     /** 
      * @description
      * <p>Object with extended date parsing and formatting capabilities.
@@ -10509,7 +10887,13 @@
                       var number_str = Math.abs(number)[method](precision);
                       number_str = thousandSeparation ? thousand_separate(number_str): number_str;
                       value = prefix + number_str;
-                      return justify(value, prefix, leftJustify, minWidth, zeroPad, htmlSpace)[textTransform]();
+                      var justified = justify(value, prefix, leftJustify, minWidth, zeroPad, htmlSpace)[textTransform]();
+
+                      if ($.jqplot.sprintf.decimalMark !== '.' && $.jqplot.sprintf.decimalMark !== $.jqplot.sprintf.thousandsSeparator) {
+                          return justified.replace(/\./, $.jqplot.sprintf.decimalMark);
+                      } else {
+                          return justified;
+                      }
                   }
             case 'p':
             case 'P':
@@ -10552,6 +10936,11 @@
     };
 
     $.jqplot.sprintf.thousandsSeparator = ',';
+    // Specifies the decimal mark for floating point values. By default a period '.'
+    // is used. If you change this value to for example a comma be sure to also
+    // change the thousands separator or else this won't work since a simple String
+    // replace is used (replacing all periods with the mark specified here).
+    $.jqplot.sprintf.decimalMark = '.';
     
     $.jqplot.sprintf.regex = /%%|%(\d+\$)?([-+#0&\' ]*)(\*\d+\$|\*|\d+)?(\.(\*\d+\$|\*|\d+))?([nAscboxXuidfegpEGP])/g;
 
diff --git a/js/jqplot/plugins/jqplot.canvasAxisLabelRenderer.js b/js/jqplot/plugins/jqplot.canvasAxisLabelRenderer.js
index 462f47ecd5..febf01d327 100644
--- a/js/jqplot/plugins/jqplot.canvasAxisLabelRenderer.js
+++ b/js/jqplot/plugins/jqplot.canvasAxisLabelRenderer.js
@@ -2,7 +2,8 @@
  * jqPlot
  * Pure JavaScript plotting plugin using jQuery
  *
- * Version: 1.0.0b2_r1012
+ * Version: 1.0.2
+ * Revision: 1108
  *
  * Copyright (c) 2009-2011 Chris Leonello
  * jqPlot is currently available for use in all personal or commercial projects 
diff --git a/js/jqplot/plugins/jqplot.canvasTextRenderer.js b/js/jqplot/plugins/jqplot.canvasTextRenderer.js
index 9e90c8c8f5..4f869836d2 100644
--- a/js/jqplot/plugins/jqplot.canvasTextRenderer.js
+++ b/js/jqplot/plugins/jqplot.canvasTextRenderer.js
@@ -2,7 +2,8 @@
  * jqPlot
  * Pure JavaScript plotting plugin using jQuery
  *
- * Version: 1.0.0b2_r1012
+ * Version: 1.0.2
+ * Revision: 1108
  *
  * Copyright (c) 2009-2011 Chris Leonello
  * jqPlot is currently available for use in all personal or commercial projects 
diff --git a/js/jqplot/plugins/jqplot.cursor.js b/js/jqplot/plugins/jqplot.cursor.js
index 8304b7d53a..e86ea7e6b3 100644
--- a/js/jqplot/plugins/jqplot.cursor.js
+++ b/js/jqplot/plugins/jqplot.cursor.js
@@ -2,7 +2,8 @@
  * jqPlot
  * Pure JavaScript plotting plugin using jQuery
  *
- * Version: 1.0.0b2_r1012
+ * Version: 1.0.2
+ * Revision: 1108
  *
  * Copyright (c) 2009-2011 Chris Leonello
  * jqPlot is currently available for use in all personal or commercial projects 
@@ -480,11 +481,14 @@
                     s += '<br />';
                 }
                 if (c.useAxesFormatters) {
-                    var xf = plot.axes[g[0]]._ticks[0].formatter;
-                    var yf = plot.axes[g[1]]._ticks[0].formatter;
-                    var xfstr = plot.axes[g[0]]._ticks[0].formatString;
-                    var yfstr = plot.axes[g[1]]._ticks[0].formatString;
-                    s += xf(xfstr, datapos[g[0]]) + ', '+ yf(yfstr, datapos[g[1]]);
+                    for (var j=0; j<g.length; j++) {
+                        if (j) {
+                            s += ', ';
+                        }
+                        var af = plot.axes[g[j]]._ticks[0].formatter;
+                        var afstr = plot.axes[g[j]]._ticks[0].formatString;
+                        s += af(afstr, datapos[g[j]]);
+                    }
                 }
                 else {
                     s += $.jqplot.sprintf(c.tooltipFormatString, datapos[g[0]], datapos[g[1]]);
@@ -752,6 +756,7 @@
         if (c.show) {
             $(ev.target).css('cursor', c.previousCursor);
             if (c.showTooltip && !(c._zoom.zooming && c.showTooltipOutsideZoom && !c.constrainOutsideZoom)) {
+                c._tooltipElem.empty();
                 c._tooltipElem.hide();
             }
             if (c.zoom) {
@@ -845,6 +850,7 @@
         var c = plot.plugins.cursor;
         // don't do anything if not on grid.
         if (c.show && c.zoom && c._zoom.started && !c.zoomTarget) {
+            ev.preventDefault();
             var ctx = c.zoomCanvas._ctx;
             var positions = getEventPosition(ev);
             var gridpos = positions.gridPos;
@@ -886,7 +892,11 @@
     
     function handleMouseDown(ev, gridpos, datapos, neighbor, plot) {
         var c = plot.plugins.cursor;
-        $(document).one('mouseup.jqplot_cursor', {plot:plot}, handleMouseUp);
+        if(plot.plugins.mobile){
+            $(document).one('vmouseup.jqplot_cursor', {plot:plot}, handleMouseUp);
+        } else {
+            $(document).one('mouseup.jqplot_cursor', {plot:plot}, handleMouseUp);
+        }
         var axes = plot.axes;
         if (document.onselectstart != undefined) {
             c._oldHandlers.onselectstart = document.onselectstart;
@@ -920,7 +930,12 @@
                 // get zoom starting position.
                 c._zoom.axes.start[ax] = datapos[ax];
             }  
-            $(document).bind('mousemove.jqplotCursor', {plot:plot}, handleZoomMove);              
+           if(plot.plugins.mobile){
+                $(document).bind('vmousemove.jqplotCursor', {plot:plot}, handleZoomMove);              
+            } else {
+                $(document).bind('mousemove.jqplotCursor', {plot:plot}, handleZoomMove);              
+            }
+
         }
     }
     
@@ -1090,4 +1105,4 @@
         return this._elem;
     };
     
-})(jQuery);
\ No newline at end of file
+})(jQuery);
diff --git a/js/jqplot/plugins/jqplot.dateAxisRenderer.js b/js/jqplot/plugins/jqplot.dateAxisRenderer.js
index f09fc5443d..bb307b7186 100644
--- a/js/jqplot/plugins/jqplot.dateAxisRenderer.js
+++ b/js/jqplot/plugins/jqplot.dateAxisRenderer.js
@@ -2,7 +2,8 @@
  * jqPlot
  * Pure JavaScript plotting plugin using jQuery
  *
- * Version: 1.0.0b2_r1012
+ * Version: 1.0.2
+ * Revision: 1108
  *
  * Copyright (c) 2009-2011 Chris Leonello
  * jqPlot is currently available for use in all personal or commercial projects 
@@ -400,9 +401,43 @@
         // We don't have any ticks yet, let's make some!
         ////////
 
+        // special case when there is only one point, make three tick marks to center the point
+        else if (this.min == null && this.max == null && db.min == db.max)
+        {
+             var onePointOpts = $.extend(true, {}, this.tickOptions, {name: this.name, value: null});
+             var delta = 300000;
+             this.min = db.min - delta;
+             this.max = db.max + delta;
+             this.numberTicks = 3;
+
+             for(var i=this.min;i<=this.max;i+= delta)
+             {
+                 onePointOpts.value = i;
+
+                 var t = new this.tickRenderer(onePointOpts);
+
+                 if (this._overrideFormatString && this._autoFormatString != '') {
+                    t.formatString = this._autoFormatString;
+                 }
+
+                 t.showLabel = false;
+                 t.showMark = false;
+
+                 this._ticks.push(t);
+             }
+
+             if(this.showTicks) {
+                 this._ticks[1].showLabel = true;
+             }
+             if(this.showTickMarks) {
+                 this._ticks[1].showTickMarks = true;
+             }                   
+        }
         // if user specified min and max are null, we set those to make best ticks.
         else if (this.min == null && this.max == null) {
+
             var opts = $.extend(true, {}, this.tickOptions, {name: this.name, value: null});
+
             // want to find a nice interval 
             var nttarget,
                 titarget;
diff --git a/js/jqplot/plugins/jqplot.highlighter.js b/js/jqplot/plugins/jqplot.highlighter.js
index d0b06e893c..ea6251af23 100644
--- a/js/jqplot/plugins/jqplot.highlighter.js
+++ b/js/jqplot/plugins/jqplot.highlighter.js
@@ -2,7 +2,8 @@
  * jqPlot
  * Pure JavaScript plotting plugin using jQuery
  *
- * Version: 1.0.0b2_r1012
+ * Version: 1.0.2
+ * Revision: 1108
  *
  * Copyright (c) 2009-2011 Chris Leonello
  * jqPlot is currently available for use in all personal or commercial projects 
@@ -400,6 +401,9 @@
         var c = plot.plugins.cursor;
         if (hl.show) {
             if (neighbor == null && hl.isHighlighting) {
+                var evt = jQuery.Event('jqplotHighlighterUnhighlight');
+                plot.target.trigger(evt);
+
                 var ctx = hl.highlightCanvas._ctx;
                 ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
                 if (hl.fadeTooltip) {
@@ -416,6 +420,13 @@
                 ctx = null;
             }
             else if (neighbor != null && plot.series[neighbor.seriesIndex].showHighlight && !hl.isHighlighting) {
+                var evt = jQuery.Event('jqplotHighlighterHighlight');
+                evt.which = ev.which;
+                evt.pageX = ev.pageX;
+                evt.pageY = ev.pageY;
+                var ins = [neighbor.seriesIndex, neighbor.pointIndex, neighbor.data, plot];
+                plot.target.trigger(evt, ins);
+
                 hl.isHighlighting = true;
                 hl.currentNeighbor = neighbor;
                 if (hl.showMarker) {
diff --git a/js/jqplot/plugins/jqplot.pieRenderer.js b/js/jqplot/plugins/jqplot.pieRenderer.js
index e399483d36..f90f322714 100644
--- a/js/jqplot/plugins/jqplot.pieRenderer.js
+++ b/js/jqplot/plugins/jqplot.pieRenderer.js
@@ -2,7 +2,8 @@
  * jqPlot
  * Pure JavaScript plotting plugin using jQuery
  *
- * Version: 1.0.0b2_r1012
+ * Version: 1.0.2
+ * Revision: 1108
  *
  * Copyright (c) 2009-2011 Chris Leonello
  * jqPlot is currently available for use in all personal or commercial projects 
@@ -800,6 +801,7 @@
             plot.target.trigger(evt1, ins);
             if (plot.series[ins[0]].highlightMouseOver && !(ins[0] == plot.plugins.pieRenderer.highlightedSeriesIndex && ins[1] == plot.series[ins[0]]._highlightedPoint)) {
                 var evt = jQuery.Event('jqplotDataHighlight');
+		evt.which = ev.which;
                 evt.pageX = ev.pageX;
                 evt.pageY = ev.pageY;
                 plot.target.trigger(evt, ins);
@@ -816,6 +818,7 @@
             var ins = [neighbor.seriesIndex, neighbor.pointIndex, neighbor.data];
             if (plot.series[ins[0]].highlightMouseDown && !(ins[0] == plot.plugins.pieRenderer.highlightedSeriesIndex && ins[1] == plot.series[ins[0]]._highlightedPoint)) {
                 var evt = jQuery.Event('jqplotDataHighlight');
+		evt.which = ev.which;
                 evt.pageX = ev.pageX;
                 evt.pageY = ev.pageY;
                 plot.target.trigger(evt, ins);
@@ -838,6 +841,7 @@
         if (neighbor) {
             var ins = [neighbor.seriesIndex, neighbor.pointIndex, neighbor.data];
             var evt = jQuery.Event('jqplotDataClick');
+	    evt.which = ev.which;
             evt.pageX = ev.pageX;
             evt.pageY = ev.pageY;
             plot.target.trigger(evt, ins);
@@ -852,6 +856,7 @@
                 unhighlight(plot);
             }
             var evt = jQuery.Event('jqplotDataRightClick');
+	    evt.which = ev.which;
             evt.pageX = ev.pageX;
             evt.pageY = ev.pageY;
             plot.target.trigger(evt, ins);

From 8016ac497762ae47e8e9bbee16f3d5d0a426b797 Mon Sep 17 00:00:00 2001
From: Marc Delisle <marc@infomarc.info>
Date: Sun, 29 Jul 2012 07:08:49 -0400
Subject: [PATCH 03/42] This works (with static data, one month interval)

---
 js/server_status.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/js/server_status.js b/js/server_status.js
index 7619fb6ef5..0b14758941 100644
--- a/js/server_status.js
+++ b/js/server_status.js
@@ -361,7 +361,7 @@ $(function() {
                         label: PMA_messages['strChartIssuedQueries'],
                         labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
                         renderer: $.jqplot.DateAxisRenderer,
-                        tickInterval: 300000,
+                        //tickInterval: 300000,
                         //min: '2008-06-30 08:00:00',
                         //min: '2012-06-07 12:00:00',
                         //min: '1970-01-01 12:00:00',
@@ -375,8 +375,9 @@ $(function() {
                 .hide()
                 .after('<div class="liveChart" id="' + $tab.attr('id') + '_chart_cnt"></div>');
             //currentChart = $.jqplot($tab.attr('id') + '_chart_cnt', [[null]], settings);
-            currentChart = $.jqplot($tab.attr('id') + '_chart_cnt', [[['2008-06-30 08:00:00',4], ['2008-06-30 08:00:05',6.5], ['2008-06-30 08:00:10',5.7], ['2008-06-30 08:00:15',9], ['2008-06-30 08:00:20',8.2]]], settings);
-            recursiveTimer(); 
+            //currentChart = $.jqplot($tab.attr('id') + '_chart_cnt', [[['2008-06-30 08:00:00',4], ['2008-06-30 08:00:05',6.5], ['2008-06-30 08:00:10',5.7], ['2008-06-30 08:00:15',9], ['2008-06-30 08:00:20',8.2]]], settings);
+            currentChart = $.jqplot($tab.attr('id') + '_chart_cnt', [[['2008-06-30 08:00:00',4], ['2008-07-30 08:00:05',6.5], ['2008-08-30 08:00:10',5.7], ['2008-09-30 08:00:15',9], ['2008-10-30 08:00:20',8.2]]], settings);
+            //recursiveTimer(); 
 
         } else {
             $(this).html(PMA_messages['strLiveQueryChart']);

From 759df40f089c0ededad008ede121da4095dc2acf Mon Sep 17 00:00:00 2001
From: Atul Pratap Singh <atulpratapsingh05@gmail.com>
Date: Sun, 29 Jul 2012 19:15:14 +0530
Subject: [PATCH 04/42] Tried fixing jqplot crashing problem using diff
 provided on 
 https://bitbucket.org/cleonello/jqplot/issue/552/jqplot-crashes-when-interval-too-small

---
 js/jqplot/plugins/jqplot.dateAxisRenderer.js | 37 +++++++++++++++++---
 1 file changed, 32 insertions(+), 5 deletions(-)

diff --git a/js/jqplot/plugins/jqplot.dateAxisRenderer.js b/js/jqplot/plugins/jqplot.dateAxisRenderer.js
index bb307b7186..bdf4c22cf4 100644
--- a/js/jqplot/plugins/jqplot.dateAxisRenderer.js
+++ b/js/jqplot/plugins/jqplot.dateAxisRenderer.js
@@ -335,6 +335,28 @@
         var threshold = 30;
         var insetMult = 1;
 
+        var daTickInterval = null;
+
+        // if user specified a tick interval, convert to usable.
+        if (this.tickInterval != null)
+        {
+            // if interval is a number or can be converted to one, use it.
+            // Assume it is in SECONDS!!!
+            if (Number(this.tickInterval)) {
+                daTickInterval = [Number(this.tickInterval), 'seconds'];
+            }
+            // else, parse out something we can build from.
+            else if (typeof this.tickInterval == "string") {
+                var parts = this.tickInterval.split(' ');
+                if (parts.length == 1) {
+                    daTickInterval = [1, parts[0]];
+                }
+                else if (parts.length == 2) {
+                    daTickInterval = [parts[0], parts[1]];
+                }
+            }
+        }
+
         var tickInterval = this.tickInterval;
         
         // if we already have ticks, use them.
@@ -464,7 +486,7 @@
             // tickInterval will be used before numberTicks, that is if
             // both are specified, numberTicks will be ignored.
             else if (this.tickInterval) {
-                titarget = this.tickInterval;
+                titarget = new $.jsDate(0).add(daTickInterval[0], daTickInterval[1]).getTime();
             }
 
             // if numberTicks specified, try to honor it.
@@ -480,9 +502,10 @@
                 var tempti = ret[0];
                 this._autoFormatString = ret[1];
 
-                min = Math.floor(min/tempti) * tempti;
+                //min = Math.floor(min/tempti) * tempti;
                 min = new $.jsDate(min);
-                min = min.getTime() + min.getUtcOffset();
+                //min = min.getTime() + min.getUtcOffset();
+min = Math.floor((min.getTime() - min.getUtcOffset())/tempti) * tempti + min.getUtcOffset();
 
                 nttarget = Math.ceil((max - min) / tempti) + 1;
                 this.min = min;
@@ -640,7 +663,7 @@
                 this.tickInterval = null;
             }
             
-            // if user specified a tick interval, convert to usable.
+     /*       // if user specified a tick interval, convert to usable.
             if (this.tickInterval != null)
             {
                 // if interval is a number or can be converted to one, use it.
@@ -658,8 +681,12 @@
                         this.daTickInterval = [parts[0], parts[1]];
                     }
                 }
-            }
+            }*/
             
+            if (this.tickInterval != null && daTickInterval != null) {
+                this.daTickInterval = daTickInterval;
+             }
+
             // if min and max are same, space them out a bit
             if (min == max) {
                 var adj = 24*60*60*500;  // 1/2 day

From 5f8c2e6fd46f1a5ce8b67fc50a70fb95127fd6a4 Mon Sep 17 00:00:00 2001
From: Atul Pratap Singh <atulpratapsingh05@gmail.com>
Date: Sun, 29 Jul 2012 19:18:31 +0530
Subject: [PATCH 05/42] Testing 759df40f089c0eded with static values (2 seconds
 intervals), it works

---
 js/server_status.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/js/server_status.js b/js/server_status.js
index 0b14758941..d889edc52f 100644
--- a/js/server_status.js
+++ b/js/server_status.js
@@ -375,8 +375,8 @@ $(function() {
                 .hide()
                 .after('<div class="liveChart" id="' + $tab.attr('id') + '_chart_cnt"></div>');
             //currentChart = $.jqplot($tab.attr('id') + '_chart_cnt', [[null]], settings);
-            //currentChart = $.jqplot($tab.attr('id') + '_chart_cnt', [[['2008-06-30 08:00:00',4], ['2008-06-30 08:00:05',6.5], ['2008-06-30 08:00:10',5.7], ['2008-06-30 08:00:15',9], ['2008-06-30 08:00:20',8.2]]], settings);
-            currentChart = $.jqplot($tab.attr('id') + '_chart_cnt', [[['2008-06-30 08:00:00',4], ['2008-07-30 08:00:05',6.5], ['2008-08-30 08:00:10',5.7], ['2008-09-30 08:00:15',9], ['2008-10-30 08:00:20',8.2]]], settings);
+            currentChart = $.jqplot($tab.attr('id') + '_chart_cnt', [[['2008-06-30 08:00:00',4], ['2008-06-30 08:00:02',6.5], ['2008-06-30 08:00:04',5.7], ['2008-06-30 08:00:06',9], ['2008-06-30 08:00:08',8.2], ['2008-06-30 08:00:10',4], ['2008-06-30 08:00:12',6.5], ['2008-06-30 08:00:14',5.7], ['2008-06-30 08:00:16',9], ['2008-06-30 08:00:18',8.2]]], settings);
+            //currentChart = $.jqplot($tab.attr('id') + '_chart_cnt', [[['2008-06-30 08:00:00',4], ['2008-07-30 08:00:05',6.5], ['2008-08-30 08:00:10',5.7], ['2008-09-30 08:00:15',9], ['2008-10-30 08:00:20',8.2]]], settings);
             //recursiveTimer(); 
 
         } else {

From a415819d4d2d6d4eb12626bf1ac2a67cd4a72402 Mon Sep 17 00:00:00 2001
From: Atul Pratap Singh <atulpratapsingh05@gmail.com>
Date: Tue, 31 Jul 2012 00:41:21 +0530
Subject: [PATCH 06/42] Test jqplot for updating live server query stats

---
 js/server_status.js | 53 ++++++++++++++++++++++++++++++++-------------
 1 file changed, 38 insertions(+), 15 deletions(-)

diff --git a/js/server_status.js b/js/server_status.js
index d889edc52f..1eec04c51d 100644
--- a/js/server_status.js
+++ b/js/server_status.js
@@ -326,6 +326,7 @@ $(function() {
         return false;
     });
 
+    var previous = 0;
     // Live query statistics
     $('.buttonlinks a.livequeriesLink').click(function() {
         var $tab = $(this).parents('div.ui-tabs-panel');
@@ -360,7 +361,7 @@ $(function() {
                     xaxis: {
                         label: PMA_messages['strChartIssuedQueries'],
                         labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
-                        renderer: $.jqplot.DateAxisRenderer,
+                        renderer: $.jqplot.DateAxisRenderer,                       
                         //tickInterval: 300000,
                         //min: '2008-06-30 08:00:00',
                         //min: '2012-06-07 12:00:00',
@@ -375,9 +376,10 @@ $(function() {
                 .hide()
                 .after('<div class="liveChart" id="' + $tab.attr('id') + '_chart_cnt"></div>');
             //currentChart = $.jqplot($tab.attr('id') + '_chart_cnt', [[null]], settings);
-            currentChart = $.jqplot($tab.attr('id') + '_chart_cnt', [[['2008-06-30 08:00:00',4], ['2008-06-30 08:00:02',6.5], ['2008-06-30 08:00:04',5.7], ['2008-06-30 08:00:06',9], ['2008-06-30 08:00:08',8.2], ['2008-06-30 08:00:10',4], ['2008-06-30 08:00:12',6.5], ['2008-06-30 08:00:14',5.7], ['2008-06-30 08:00:16',9], ['2008-06-30 08:00:18',8.2]]], settings);
+            //currentChart = $.jqplot($tab.attr('id') + '_chart_cnt', [[['2008-06-30 08:00:00',4], ['2008-06-30 08:00:02',6.5], ['2008-06-30 08:00:04',5.7], ['2008-06-30 08:00:06',9], ['2008-06-30 08:00:08',8.2], ['2008-06-30 08:00:10',4], ['2008-06-30 08:00:12',6.5], ['2008-06-30 08:00:14',5.7], ['2008-06-30 08:00:16',9], ['2008-06-30 08:00:18',8.2]]], settings);
             //currentChart = $.jqplot($tab.attr('id') + '_chart_cnt', [[['2008-06-30 08:00:00',4], ['2008-07-30 08:00:05',6.5], ['2008-08-30 08:00:10',5.7], ['2008-09-30 08:00:15',9], ['2008-10-30 08:00:20',8.2]]], settings);
-            //recursiveTimer(); 
+            var set_previous = getCurrentQueryStats();
+            recursiveTimer();
 
         } else {
             $(this).html(PMA_messages['strLiveQueryChart']);
@@ -389,18 +391,18 @@ $(function() {
     });
 
     var t;
-    var currentChart;
     var series = new Array();
     series[0] = new Array();
 
     function recursiveTimer() {
         ajaxGetStatus();
         t = setTimeout(function() {
-                recursiveTimer() }, 5000);
+                recursiveTimer() }, 2000);
     }
 
-    function ajaxGetStatus() {
+    function getCurrentQueryStats() {
         var ret = null;
+        var retval = null;
         $.ajax({
             async: false,
             url: 'server_status.php',
@@ -416,16 +418,37 @@ $(function() {
             ret = data;
             }
         });
+        retval = [ret.x,ret.y-previous];
+        previous = ret.y;
+        return retval;
+    }
+
+    function ajaxGetStatus() {
         
-        series[0].push([
-            //ret.x,
-            new Date().getTime(),
-            //getDateFromFormat('1970-01-01 12:15:00', 'yyyy-MM-dd HH:mm:ss'),
-            //-344401659000,
-            ret.y
-        ]); 
-        currentChart.series[0].data = series[0];
-        currentChart.replot();
+        var tab1 = document.getElementById('statustabs_queries_chart_cnt');
+        series[0].push(getCurrentQueryStats());
+        var settings = {
+                title: PMA_messages['strChartIssuedQueriesTitle'],
+                axes: {
+                    xaxis: {
+                        label: PMA_messages['strChartIssuedQueries'],
+                        labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
+                        renderer: $.jqplot.DateAxisRenderer,
+                        axes:{xaxis:{autoscale:true}},
+                        //tickInterval: 300000,
+                        //min: '2008-06-30 08:00:00',
+                        //min: '2012-06-07 12:00:00',
+                        //min: '1970-01-01 12:00:00',
+                        tickOptions: {
+                            formatString: '%s'
+                        }
+                    }
+                }
+        };
+       // currentChart.series[0].data = series[0];
+       //jQuery("#statustabs_queries_chart_cnt").html('');
+       $.jqplot('statustabs_queries_chart_cnt', [series[0]], settings).replot();
+       // currentChart.replot();
    };
 
     function setupLiveChart($tab, link, settings) {

From c9108d7fcb7e8b17ed77014ec910a0765b3ebb2c Mon Sep 17 00:00:00 2001
From: Atul Pratap Singh <atulpratapsingh05@gmail.com>
Date: Wed, 1 Aug 2012 07:14:18 +0530
Subject: [PATCH 07/42] Some fixes in live query status plotting

---
 js/server_status.js | 31 +++++--------------------------
 1 file changed, 5 insertions(+), 26 deletions(-)

diff --git a/js/server_status.js b/js/server_status.js
index 1eec04c51d..0d2cefeea7 100644
--- a/js/server_status.js
+++ b/js/server_status.js
@@ -330,7 +330,6 @@ $(function() {
     // Live query statistics
     $('.buttonlinks a.livequeriesLink').click(function() {
         var $tab = $(this).parents('div.ui-tabs-panel');
-        var settings = null;
 
         if (tabStatus[$tab.attr('id')] == 'static') {
         /*
@@ -355,23 +354,6 @@ $(function() {
                          }
             };
         */
-            settings = {
-                title: PMA_messages['strChartIssuedQueriesTitle'],
-                axes: {
-                    xaxis: {
-                        label: PMA_messages['strChartIssuedQueries'],
-                        labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
-                        renderer: $.jqplot.DateAxisRenderer,                       
-                        //tickInterval: 300000,
-                        //min: '2008-06-30 08:00:00',
-                        //min: '2012-06-07 12:00:00',
-                        //min: '1970-01-01 12:00:00',
-                        tickOptions: {
-                            formatString: '%Y-%m-%d %H:%M:%S'
-                        }
-                    }
-                }
-            };
             $tab.find('.tabInnerContent')
                 .hide()
                 .after('<div class="liveChart" id="' + $tab.attr('id') + '_chart_cnt"></div>');
@@ -385,7 +367,7 @@ $(function() {
             $(this).html(PMA_messages['strLiveQueryChart']);
         }
 
-        setupLiveChart($tab, this, settings);
+        //setupLiveChart($tab, this, settings);
         tabStatus[$tab.attr('id')] = 'livequeries';
         return false;
     });
@@ -395,7 +377,7 @@ $(function() {
     series[0] = new Array();
 
     function recursiveTimer() {
-        ajaxGetStatus();
+        replotQueryStatsChart();
         t = setTimeout(function() {
                 recursiveTimer() }, 2000);
     }
@@ -423,9 +405,9 @@ $(function() {
         return retval;
     }
 
-    function ajaxGetStatus() {
+    function replotQueryStatsChart() {
         
-        var tab1 = document.getElementById('statustabs_queries_chart_cnt');
+        var chartId = 'statustabs_queries_chart_cnt';
         series[0].push(getCurrentQueryStats());
         var settings = {
                 title: PMA_messages['strChartIssuedQueriesTitle'],
@@ -445,10 +427,7 @@ $(function() {
                     }
                 }
         };
-       // currentChart.series[0].data = series[0];
-       //jQuery("#statustabs_queries_chart_cnt").html('');
-       $.jqplot('statustabs_queries_chart_cnt', [series[0]], settings).replot();
-       // currentChart.replot();
+       $.jqplot(chartId, [series[0]], settings).replot();
    };
 
     function setupLiveChart($tab, link, settings) {

From 6fffd048019aa3bee28522b8b18261cc34aa24d9 Mon Sep 17 00:00:00 2001
From: Atul Pratap Singh <atulpratapsingh05@gmail.com>
Date: Wed, 1 Aug 2012 08:27:40 +0530
Subject: [PATCH 08/42] Testing array values shifting to produce moving chart
 in jqplot

---
 js/server_status.js | 74 +++++++++++++++++++++++++--------------------
 1 file changed, 41 insertions(+), 33 deletions(-)

diff --git a/js/server_status.js b/js/server_status.js
index 0d2cefeea7..2b66d2be91 100644
--- a/js/server_status.js
+++ b/js/server_status.js
@@ -327,6 +327,9 @@ $(function() {
     });
 
     var previous = 0;
+    var series = new Array();
+    series[0] = new Array();
+
     // Live query statistics
     $('.buttonlinks a.livequeriesLink').click(function() {
         var $tab = $(this).parents('div.ui-tabs-panel');
@@ -357,11 +360,29 @@ $(function() {
             $tab.find('.tabInnerContent')
                 .hide()
                 .after('<div class="liveChart" id="' + $tab.attr('id') + '_chart_cnt"></div>');
-            //currentChart = $.jqplot($tab.attr('id') + '_chart_cnt', [[null]], settings);
-            //currentChart = $.jqplot($tab.attr('id') + '_chart_cnt', [[['2008-06-30 08:00:00',4], ['2008-06-30 08:00:02',6.5], ['2008-06-30 08:00:04',5.7], ['2008-06-30 08:00:06',9], ['2008-06-30 08:00:08',8.2], ['2008-06-30 08:00:10',4], ['2008-06-30 08:00:12',6.5], ['2008-06-30 08:00:14',5.7], ['2008-06-30 08:00:16',9], ['2008-06-30 08:00:18',8.2]]], settings);
-            //currentChart = $.jqplot($tab.attr('id') + '_chart_cnt', [[['2008-06-30 08:00:00',4], ['2008-07-30 08:00:05',6.5], ['2008-08-30 08:00:10',5.7], ['2008-09-30 08:00:15',9], ['2008-10-30 08:00:20',8.2]]], settings);
+            
+            var chartId = 'statustabs_queries_chart_cnt';
+            var settings = {
+                    title: PMA_messages['strChartIssuedQueriesTitle'],
+                    axes: {
+                        xaxis: {
+                            label: PMA_messages['strChartIssuedQueries'],
+                            labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
+                            renderer: $.jqplot.DateAxisRenderer,
+                            axes:{xaxis:{autoscale:true}},
+                            //tickInterval: 300000,
+                            //min: '2008-06-30 08:00:00',
+                            //min: '2012-06-07 12:00:00',
+                            //min: '1970-01-01 12:00:00',
+                            tickOptions: {
+                                formatString: '%s'
+                            }
+                        }
+                    }
+            };
             var set_previous = getCurrentQueryStats();
-            recursiveTimer();
+            initiateChartData(chartId, settings);
+            recursiveTimer(chartId, settings);
 
         } else {
             $(this).html(PMA_messages['strLiveQueryChart']);
@@ -373,13 +394,11 @@ $(function() {
     });
 
     var t;
-    var series = new Array();
-    series[0] = new Array();
 
-    function recursiveTimer() {
-        replotQueryStatsChart();
-        t = setTimeout(function() {
-                recursiveTimer() }, 2000);
+    function recursiveTimer(chartId, settings) {
+            replotQueryStatsChart(chartId, settings);
+            t = setTimeout(function() {
+                recursiveTimer(chartId, settings) }, 2000);
     }
 
     function getCurrentQueryStats() {
@@ -405,30 +424,19 @@ $(function() {
         return retval;
     }
 
-    function replotQueryStatsChart() {
-        
-        var chartId = 'statustabs_queries_chart_cnt';
+    function initiateChartData(chartId, settings) {
+        var current_time = new Date().getTime();
+        for(var i = -20000; i < 0; i += 2000) {
+            series[0].push([(current_time+i),4]);
+        }
+        $.jqplot(chartId, [series[0]], settings);
+    }
+
+    function replotQueryStatsChart(chartId, settings) {
+        series[0].splice(0,1);
         series[0].push(getCurrentQueryStats());
-        var settings = {
-                title: PMA_messages['strChartIssuedQueriesTitle'],
-                axes: {
-                    xaxis: {
-                        label: PMA_messages['strChartIssuedQueries'],
-                        labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
-                        renderer: $.jqplot.DateAxisRenderer,
-                        axes:{xaxis:{autoscale:true}},
-                        //tickInterval: 300000,
-                        //min: '2008-06-30 08:00:00',
-                        //min: '2012-06-07 12:00:00',
-                        //min: '1970-01-01 12:00:00',
-                        tickOptions: {
-                            formatString: '%s'
-                        }
-                    }
-                }
-        };
-       $.jqplot(chartId, [series[0]], settings).replot();
-   };
+        $.jqplot(chartId, [series[0]], settings).replot();
+    }
 
     function setupLiveChart($tab, link, settings) {
         if (settings != null) {

From 0a11c56b14b79a1fc6d4d52e416674fd68a48ed4 Mon Sep 17 00:00:00 2001
From: Atul Pratap Singh <atulpratapsingh05@gmail.com>
Date: Wed, 1 Aug 2012 08:40:26 +0530
Subject: [PATCH 09/42] Tested without initially populating data, now chart
 squeezes initially upto 10 values

---
 js/server_status.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/js/server_status.js b/js/server_status.js
index 2b66d2be91..0633441b3e 100644
--- a/js/server_status.js
+++ b/js/server_status.js
@@ -381,7 +381,7 @@ $(function() {
                     }
             };
             var set_previous = getCurrentQueryStats();
-            initiateChartData(chartId, settings);
+            //initiateChartData(chartId, settings);
             recursiveTimer(chartId, settings);
 
         } else {
@@ -433,7 +433,9 @@ $(function() {
     }
 
     function replotQueryStatsChart(chartId, settings) {
-        series[0].splice(0,1);
+        if(series[0].length >= 10) {
+            series[0].splice(0,1);
+        }
         series[0].push(getCurrentQueryStats());
         $.jqplot(chartId, [series[0]], settings).replot();
     }

From 40e1582fd3020d210cb2dee143b97f80959160b6 Mon Sep 17 00:00:00 2001
From: Atul Pratap Singh <atulpratapsingh05@gmail.com>
Date: Fri, 3 Aug 2012 20:55:14 +0530
Subject: [PATCH 10/42] Make tickOptions format human readable

---
 js/server_status.js | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/js/server_status.js b/js/server_status.js
index 0633441b3e..7d5d7cb750 100644
--- a/js/server_status.js
+++ b/js/server_status.js
@@ -369,13 +369,8 @@ $(function() {
                             label: PMA_messages['strChartIssuedQueries'],
                             labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
                             renderer: $.jqplot.DateAxisRenderer,
-                            axes:{xaxis:{autoscale:true}},
-                            //tickInterval: 300000,
-                            //min: '2008-06-30 08:00:00',
-                            //min: '2012-06-07 12:00:00',
-                            //min: '1970-01-01 12:00:00',
                             tickOptions: {
-                                formatString: '%s'
+                                formatString: '%H:%M'
                             }
                         }
                     }

From 69eebebfc2e596bf2fb08f8f70eee65f6a1abf5f Mon Sep 17 00:00:00 2001
From: Atul Pratap Singh <atulpratapsingh05@gmail.com>
Date: Fri, 3 Aug 2012 21:14:28 +0530
Subject: [PATCH 11/42] Make y-axis at min:0

---
 js/server_status.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/js/server_status.js b/js/server_status.js
index 7d5d7cb750..6e96ad1006 100644
--- a/js/server_status.js
+++ b/js/server_status.js
@@ -372,6 +372,8 @@ $(function() {
                             tickOptions: {
                                 formatString: '%H:%M'
                             }
+                        },
+                        yaxis: { min:0
                         }
                     }
             };

From 5b18fee56773b99dae6c1186fd9d956b73314dc3 Mon Sep 17 00:00:00 2001
From: Atul Pratap Singh <atulpratapsingh05@gmail.com>
Date: Sat, 4 Aug 2012 14:36:49 +0530
Subject: [PATCH 12/42] Re-enable setupLiveChart but there are two charts again

---
 js/server_status.js | 21 +++++++++------------
 1 file changed, 9 insertions(+), 12 deletions(-)

diff --git a/js/server_status.js b/js/server_status.js
index 6e96ad1006..1e0977ff19 100644
--- a/js/server_status.js
+++ b/js/server_status.js
@@ -333,7 +333,6 @@ $(function() {
     // Live query statistics
     $('.buttonlinks a.livequeriesLink').click(function() {
         var $tab = $(this).parents('div.ui-tabs-panel');
-
         if (tabStatus[$tab.attr('id')] == 'static') {
         /*
             settings = {
@@ -361,7 +360,6 @@ $(function() {
                 .hide()
                 .after('<div class="liveChart" id="' + $tab.attr('id') + '_chart_cnt"></div>');
             
-            var chartId = 'statustabs_queries_chart_cnt';
             var settings = {
                     title: PMA_messages['strChartIssuedQueriesTitle'],
                     axes: {
@@ -379,23 +377,22 @@ $(function() {
             };
             var set_previous = getCurrentQueryStats();
             //initiateChartData(chartId, settings);
-            recursiveTimer(chartId, settings);
+            recursiveTimer($tab, settings);
 
         } else {
             $(this).html(PMA_messages['strLiveQueryChart']);
         }
-
-        //setupLiveChart($tab, this, settings);
+        setupLiveChart($tab, this, settings);
         tabStatus[$tab.attr('id')] = 'livequeries';
         return false;
     });
 
     var t;
 
-    function recursiveTimer(chartId, settings) {
-            replotQueryStatsChart(chartId, settings);
+    function recursiveTimer($tab, settings) {
+            replotQueryStatsChart($tab, settings);
             t = setTimeout(function() {
-                recursiveTimer(chartId, settings) }, 2000);
+                recursiveTimer($tab, settings) }, 2000);
     }
 
     function getCurrentQueryStats() {
@@ -421,20 +418,20 @@ $(function() {
         return retval;
     }
 
-    function initiateChartData(chartId, settings) {
+    function initiateChartData($tab, settings) {
         var current_time = new Date().getTime();
         for(var i = -20000; i < 0; i += 2000) {
             series[0].push([(current_time+i),4]);
         }
-        $.jqplot(chartId, [series[0]], settings);
+        $.jqplot($tab.attr('id') + '_chart_cnt', [series[0]], settings).replot();
     }
 
-    function replotQueryStatsChart(chartId, settings) {
+    function replotQueryStatsChart($tab, settings) {
         if(series[0].length >= 10) {
             series[0].splice(0,1);
         }
         series[0].push(getCurrentQueryStats());
-        $.jqplot(chartId, [series[0]], settings).replot();
+        $.jqplot($tab.attr('id') + '_chart_cnt', [series[0]], settings).replot();
     }
 
     function setupLiveChart($tab, link, settings) {

From a113974c5cf692599cac3eb8f347c29911b7f495 Mon Sep 17 00:00:00 2001
From: Atul Pratap Singh <atulpratapsingh05@gmail.com>
Date: Sat, 4 Aug 2012 16:38:20 +0530
Subject: [PATCH 13/42] Make refresh rate select work

---
 js/server_status.js | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/js/server_status.js b/js/server_status.js
index 1e0977ff19..37607a0725 100644
--- a/js/server_status.js
+++ b/js/server_status.js
@@ -113,6 +113,8 @@ $(function() {
     var text = ''; // Holds filter text
     var queryPieChart = null;
     var monitorLoaded = false;
+    var query_stats_jqplot_timer = null;
+    var refresh_rate = 5000;
 
     /* Chart configuration */
     // Defines what the tabs are currently displaying (realtime or data)
@@ -189,6 +191,10 @@ $(function() {
 
     // Handles refresh rate changing
     $('.buttonlinks select').change(function() {
+        if(query_stats_jqplot_timer != null) {
+            refresh_rate = 1000*parseInt(this.value);
+        }
+
         var chart = tabChart[$(this).parents('div.ui-tabs-panel').attr('id')];
 
         // Clear current timeout and set timeout with the new refresh rate
@@ -368,7 +374,7 @@ $(function() {
                             labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
                             renderer: $.jqplot.DateAxisRenderer,
                             tickOptions: {
-                                formatString: '%H:%M'
+                                formatString: '%H:%M:%S'
                             }
                         },
                         yaxis: { min:0
@@ -387,12 +393,10 @@ $(function() {
         return false;
     });
 
-    var t;
-
     function recursiveTimer($tab, settings) {
             replotQueryStatsChart($tab, settings);
-            t = setTimeout(function() {
-                recursiveTimer($tab, settings) }, 2000);
+            query_stats_jqplot_timer = setTimeout(function() {
+                recursiveTimer($tab, settings) }, refresh_rate);
     }
 
     function getCurrentQueryStats() {

From 56c859c8069519ced7a74f55149388d7041d77e5 Mon Sep 17 00:00:00 2001
From: Atul Pratap Singh <atulpratapsingh05@gmail.com>
Date: Sat, 4 Aug 2012 17:04:26 +0530
Subject: [PATCH 14/42] Re-enable tab switching from live to static

---
 js/server_status.js | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/js/server_status.js b/js/server_status.js
index 37607a0725..8d1d11b9c7 100644
--- a/js/server_status.js
+++ b/js/server_status.js
@@ -384,12 +384,13 @@ $(function() {
             var set_previous = getCurrentQueryStats();
             //initiateChartData(chartId, settings);
             recursiveTimer($tab, settings);
+            setupLiveChart($tab, this, settings);
+            tabStatus[$tab.attr('id')] = 'livequeries';
 
         } else {
             $(this).html(PMA_messages['strLiveQueryChart']);
+            setupLiveChart($tab, this, settings);
         }
-        setupLiveChart($tab, this, settings);
-        tabStatus[$tab.attr('id')] = 'livequeries';
         return false;
     });
 
@@ -460,8 +461,13 @@ $(function() {
             $tab.find('.buttonlinks a.tabRefresh').hide();
             $tab.find('.buttonlinks .refreshList').show();
         } else {
-            clearTimeout(chart_activeTimeouts[$tab.attr('id') + "_chart_cnt"]);
-            chart_activeTimeouts[$tab.attr('id') + "_chart_cnt"] = null;
+            if(query_stats_jqplot_timer != null) {
+                clearTimeout(query_stats_jqplot_timer);
+            }
+            else {
+                clearTimeout(chart_activeTimeouts[$tab.attr('id') + "_chart_cnt"]);
+                chart_activeTimeouts[$tab.attr('id') + "_chart_cnt"] = null;
+            }
             $tab.find('.tabInnerContent').show();
             $tab.find('div#' + $tab.attr('id') + '_chart_cnt').remove();
             tabStatus[$tab.attr('id')] = 'static';

From d9148bbc3ac71c01fe8c547786b0e30d7fabed76 Mon Sep 17 00:00:00 2001
From: Atul Pratap Singh <atulpratapsingh05@gmail.com>
Date: Sat, 4 Aug 2012 17:13:55 +0530
Subject: [PATCH 15/42] Now there is only one chart displayed

---
 js/server_status.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/js/server_status.js b/js/server_status.js
index 8d1d11b9c7..e50e7c887a 100644
--- a/js/server_status.js
+++ b/js/server_status.js
@@ -453,9 +453,11 @@ $(function() {
             if (! settings.chart) settings.chart = {};
             settings.chart.renderTo = $tab.attr('id') + "_chart_cnt";
 
-            $tab.find('.tabInnerContent')
-                .hide()
-                .after('<div class="liveChart" id="' + $tab.attr('id') + '_chart_cnt"></div>');
+            if($('#' + $tab.attr('id') + '_chart_cnt').length == 0) {
+                $tab.find('.tabInnerContent')
+                    .hide()
+                    .after('<div class="liveChart" id="' + $tab.attr('id') + '_chart_cnt"></div>');
+            }
             tabChart[$tab.attr('id')] = PMA_createChart(settings);
             $(link).html(PMA_messages['strStaticData']);
             $tab.find('.buttonlinks a.tabRefresh').hide();

From 78049b7f38f8ca586354ea627ca065e285bbd968 Mon Sep 17 00:00:00 2001
From: Atul Pratap Singh <atulpratapsingh05@gmail.com>
Date: Sun, 5 Aug 2012 03:06:59 +0530
Subject: [PATCH 16/42] The chart movement is better now, with very less
 fluctuating x-axis/vertical lines

---
 js/server_status.js | 65 +++++++++++++++++++++------------------------
 1 file changed, 31 insertions(+), 34 deletions(-)

diff --git a/js/server_status.js b/js/server_status.js
index e50e7c887a..e3a5fb23bc 100644
--- a/js/server_status.js
+++ b/js/server_status.js
@@ -365,39 +365,22 @@ $(function() {
             $tab.find('.tabInnerContent')
                 .hide()
                 .after('<div class="liveChart" id="' + $tab.attr('id') + '_chart_cnt"></div>');
-            
-            var settings = {
-                    title: PMA_messages['strChartIssuedQueriesTitle'],
-                    axes: {
-                        xaxis: {
-                            label: PMA_messages['strChartIssuedQueries'],
-                            labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
-                            renderer: $.jqplot.DateAxisRenderer,
-                            tickOptions: {
-                                formatString: '%H:%M:%S'
-                            }
-                        },
-                        yaxis: { min:0
-                        }
-                    }
-            };
             var set_previous = getCurrentQueryStats();
-            //initiateChartData(chartId, settings);
-            recursiveTimer($tab, settings);
-            setupLiveChart($tab, this, settings);
+            recursiveTimer($tab);
+            setupLiveChart($tab, this, getSettings(10));
             tabStatus[$tab.attr('id')] = 'livequeries';
 
         } else {
             $(this).html(PMA_messages['strLiveQueryChart']);
-            setupLiveChart($tab, this, settings);
+            setupLiveChart($tab, this, null);
         }
         return false;
     });
 
-    function recursiveTimer($tab, settings) {
-            replotQueryStatsChart($tab, settings);
+    function recursiveTimer($tab) {
+            replotQueryStatsChart($tab);
             query_stats_jqplot_timer = setTimeout(function() {
-                recursiveTimer($tab, settings) }, refresh_rate);
+                recursiveTimer($tab) }, refresh_rate);
     }
 
     function getCurrentQueryStats() {
@@ -415,7 +398,7 @@ $(function() {
             },
             dataType: 'json',
             success: function(data) {
-            ret = data;
+            ret = data;            
             }
         });
         retval = [ret.x,ret.y-previous];
@@ -423,20 +406,34 @@ $(function() {
         return retval;
     }
 
-    function initiateChartData($tab, settings) {
+    function getSettings(num) {
         var current_time = new Date().getTime();
-        for(var i = -20000; i < 0; i += 2000) {
-            series[0].push([(current_time+i),4]);
-        }
-        $.jqplot($tab.attr('id') + '_chart_cnt', [series[0]], settings).replot();
+        // Min X would be decided based on refresh rate and number of data points
+        var minX = current_time - (refresh_rate * num);
+        var settings = {
+            title: PMA_messages['strChartIssuedQueriesTitle'],
+            axes: {
+                xaxis: {
+                    label: PMA_messages['strChartIssuedQueries'],
+                    labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
+                    renderer: $.jqplot.DateAxisRenderer,
+                    tickOptions: {
+                        formatString: '%H:%M:%S'
+                    },
+                    min: minX,
+                    // Make the right boundary of chart as current time
+                    max: current_time
+                },
+                yaxis: { min:0
+                }
+            }
+        };
+        return settings;
     }
 
-    function replotQueryStatsChart($tab, settings) {
-        if(series[0].length >= 10) {
-            series[0].splice(0,1);
-        }
+    function replotQueryStatsChart($tab) {
         series[0].push(getCurrentQueryStats());
-        $.jqplot($tab.attr('id') + '_chart_cnt', [series[0]], settings).replot();
+        $.jqplot($tab.attr('id') + '_chart_cnt', [series[0]], getSettings(10)).replot();
     }
 
     function setupLiveChart($tab, link, settings) {

From df2a8b1972805c6b845650c119bf9a37ee228586 Mon Sep 17 00:00:00 2001
From: Atul Pratap Singh <atulpratapsingh05@gmail.com>
Date: Sun, 5 Aug 2012 03:10:24 +0530
Subject: [PATCH 17/42] Remove commented code

---
 js/server_status.js | 22 ----------------------
 1 file changed, 22 deletions(-)

diff --git a/js/server_status.js b/js/server_status.js
index e3a5fb23bc..4f355d8322 100644
--- a/js/server_status.js
+++ b/js/server_status.js
@@ -340,28 +340,6 @@ $(function() {
     $('.buttonlinks a.livequeriesLink').click(function() {
         var $tab = $(this).parents('div.ui-tabs-panel');
         if (tabStatus[$tab.attr('id')] == 'static') {
-        /*
-            settings = {
-                series: [ { name: PMA_messages['strChartIssuedQueries'], data: [] } ],
-                title: { text: PMA_messages['strChartIssuedQueriesTitle'] },
-                tooltip: { formatter: function() { return this.point.name; } },
-                realtime: { url: 'server_status.php?' + url_query,
-                          type: 'queries',
-                          callback: function(chartObj, curVal, lastVal, numLoadedPoints) {
-                                if (lastVal == null) { return; }
-                                chartObj.series[0].addPoint({
-                                        x: curVal.x,
-                                        y: curVal.y - lastVal.y,
-                                        name: sortedQueriesPointInfo(curVal, lastVal)
-                                    },
-                                    true,
-                                    numLoadedPoints >= chartObj.options.realtime.numMaxPoints
-                                );
-                            },
-                            error: function() { serverResponseError(); }
-                         }
-            };
-        */
             $tab.find('.tabInnerContent')
                 .hide()
                 .after('<div class="liveChart" id="' + $tab.attr('id') + '_chart_cnt"></div>');

From 309303692540faa8cdb128f972509f9b5ae26121 Mon Sep 17 00:00:00 2001
From: Atul Pratap Singh <atulpratapsingh05@gmail.com>
Date: Mon, 6 Aug 2012 03:03:35 +0530
Subject: [PATCH 18/42] Fix wrongly removed y-axis legend

---
 js/server_status.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/js/server_status.js b/js/server_status.js
index 4f355d8322..b8a7787614 100644
--- a/js/server_status.js
+++ b/js/server_status.js
@@ -402,7 +402,10 @@ $(function() {
                     // Make the right boundary of chart as current time
                     max: current_time
                 },
-                yaxis: { min:0
+                yaxis: {
+                    min:0,
+                    label: PMA_messages['strTotalCount'],
+                    labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
                 }
             }
         };

From 36b16c409c4c1bd9731f3eb9adc3e3dfc7773644 Mon Sep 17 00:00:00 2001
From: Atul Pratap Singh <atulpratapsingh05@gmail.com>
Date: Tue, 7 Aug 2012 23:42:43 +0530
Subject: [PATCH 19/42] Implemented Number of Data Points selector using
 jqplot's tickInterval

---
 js/server_status.js | 18 ++++++++++++++----
 server_status.php   | 21 ++++++++++++++++++++-
 2 files changed, 34 insertions(+), 5 deletions(-)

diff --git a/js/server_status.js b/js/server_status.js
index b8a7787614..018fadf42e 100644
--- a/js/server_status.js
+++ b/js/server_status.js
@@ -115,6 +115,7 @@ $(function() {
     var monitorLoaded = false;
     var query_stats_jqplot_timer = null;
     var refresh_rate = 5000;
+    var data_points = 10;
 
     /* Chart configuration */
     // Defines what the tabs are currently displaying (realtime or data)
@@ -189,8 +190,15 @@ $(function() {
         }, 0.5);
     });
 
+
+    $('.buttonlinks .dataPointsNumber').change(function() {
+        if(query_stats_jqplot_timer != null) {
+            data_points = parseInt(this.value);
+        }
+    });
+
     // Handles refresh rate changing
-    $('.buttonlinks select').change(function() {
+    $('.buttonlinks .refreshRate').change(function() {
         if(query_stats_jqplot_timer != null) {
             refresh_rate = 1000*parseInt(this.value);
         }
@@ -345,7 +353,7 @@ $(function() {
                 .after('<div class="liveChart" id="' + $tab.attr('id') + '_chart_cnt"></div>');
             var set_previous = getCurrentQueryStats();
             recursiveTimer($tab);
-            setupLiveChart($tab, this, getSettings(10));
+            setupLiveChart($tab, this, getSettings(data_points));
             tabStatus[$tab.attr('id')] = 'livequeries';
 
         } else {
@@ -388,6 +396,7 @@ $(function() {
         var current_time = new Date().getTime();
         // Min X would be decided based on refresh rate and number of data points
         var minX = current_time - (refresh_rate * num);
+        var interval = (((current_time - minX)/num) / 1000);
         var settings = {
             title: PMA_messages['strChartIssuedQueriesTitle'],
             axes: {
@@ -400,7 +409,8 @@ $(function() {
                     },
                     min: minX,
                     // Make the right boundary of chart as current time
-                    max: current_time
+                    max: current_time,
+                    tickInterval: interval + " seconds"
                 },
                 yaxis: {
                     min:0,
@@ -414,7 +424,7 @@ $(function() {
 
     function replotQueryStatsChart($tab) {
         series[0].push(getCurrentQueryStats());
-        $.jqplot($tab.attr('id') + '_chart_cnt', [series[0]], getSettings(10)).replot();
+        $.jqplot($tab.attr('id') + '_chart_cnt', [series[0]], getSettings(data_points)).replot();
     }
 
     function setupLiveChart($tab, link, settings) {
diff --git a/server_status.php b/server_status.php
index 67b6dab368..381c6e20f0 100644
--- a/server_status.php
+++ b/server_status.php
@@ -825,6 +825,10 @@ echo __('Runtime Information');
                     <img src="<?php echo $GLOBALS['pmaThemeImage'];?>ajax_clock_small.gif" alt="ajax clock" style="display: none;" />
                     <?php echo __('Refresh'); ?>
                 </a>
+                <span class="refreshList" style="display:none;">
+                    <label for="id_queryChartDataPointsList"><?php echo __('Number of Data Points: '); ?></label>
+                       <?php echo getDataPointsNumberList('queryChartDataPoints'); ?>
+                </span>
                 <span class="refreshList" style="display:none;">
                     <label for="id_queryChartRefresh"><?php echo __('Refresh rate: '); ?></label>
                        <?php refreshList('queryChartRefresh'); ?>
@@ -1777,7 +1781,7 @@ function printMonitor()
 function refreshList($name, $defaultRate=5, $refreshRates=Array(1, 2, 5, 10, 20, 40, 60, 120, 300, 600))
 {
 ?>
-    <select name="<?php echo $name; ?>" id="id_<?php echo $name; ?>">
+    <select name="<?php echo $name; ?>" id="id_<?php echo $name; ?>" class="refreshRate">
         <?php
             foreach ($refreshRates as $rate) {
                 $selected = ($rate == $defaultRate)?' selected="selected"':'';
@@ -1793,6 +1797,21 @@ function refreshList($name, $defaultRate=5, $refreshRates=Array(1, 2, 5, 10, 20,
 <?php
 }
 
+/* Builds a <select> list for number of data points to be displayed */
+function getDataPointsNumberList($name, $defaultValue=10, $values=Array(10, 15, 20, 25, 30, 35, 40))
+{
+    $html_output = '<select name="' . $name . '" id="id_' . $name . '" class="dataPointsNumber">';
+            foreach ($values as $number) {
+                $selected = ($number == $defaultValue)?' selected="selected"':'';
+                $html_output .= '<option value="' . $number . '"' . $selected . '>'
+                    . sprintf(_ngettext('%d second', '%d points', $number), $number)
+                    . '</option>';
+            }
+
+    $html_output .= '</select>';
+    return $html_output;
+}
+
 /**
  * cleanup of some deprecated values
  *

From 3751474ca69eae8fda51f4c3538aa971debc9add Mon Sep 17 00:00:00 2001
From: Atul Pratap Singh <atulpratapsingh05@gmail.com>
Date: Tue, 7 Aug 2012 23:53:26 +0530
Subject: [PATCH 20/42] Do not increase ticks > 20 to prevent overlapping,
 though data points may increase

---
 js/server_status.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/js/server_status.js b/js/server_status.js
index 018fadf42e..d88b833083 100644
--- a/js/server_status.js
+++ b/js/server_status.js
@@ -397,6 +397,7 @@ $(function() {
         // Min X would be decided based on refresh rate and number of data points
         var minX = current_time - (refresh_rate * num);
         var interval = (((current_time - minX)/num) / 1000);
+        interval = (num > 20) ? (((current_time - minX)/20) / 1000) : interval;
         var settings = {
             title: PMA_messages['strChartIssuedQueriesTitle'],
             axes: {

From d6661d5c84ae06de1b080036491f1384ee4d9359 Mon Sep 17 00:00:00 2001
From: Atul Pratap Singh <atulpratapsingh05@gmail.com>
Date: Sat, 11 Aug 2012 16:37:22 +0530
Subject: [PATCH 21/42] Generalize AJAX data updation for
 traffic/queries/processes charts

---
 js/server_status.js | 40 ++++++++++++++++++++++++++++++++--------
 1 file changed, 32 insertions(+), 8 deletions(-)

diff --git a/js/server_status.js b/js/server_status.js
index d88b833083..2be7952a2e 100644
--- a/js/server_status.js
+++ b/js/server_status.js
@@ -340,9 +340,11 @@ $(function() {
         return false;
     });
 
-    var previous = 0;
+    var previous_line1 = 0;
+    var previous_line2 = 0;
     var series = new Array();
     series[0] = new Array();
+    series[1] = new Array();
 
     // Live query statistics
     $('.buttonlinks a.livequeriesLink').click(function() {
@@ -351,7 +353,7 @@ $(function() {
             $tab.find('.tabInnerContent')
                 .hide()
                 .after('<div class="liveChart" id="' + $tab.attr('id') + '_chart_cnt"></div>');
-            var set_previous = getCurrentQueryStats();
+            var set_previous = getCurrentDataSet('queries');
             recursiveTimer($tab);
             setupLiveChart($tab, this, getSettings(data_points));
             tabStatus[$tab.attr('id')] = 'livequeries';
@@ -369,9 +371,12 @@ $(function() {
                 recursiveTimer($tab) }, refresh_rate);
     }
 
-    function getCurrentQueryStats() {
+    function getCurrentDataSet(type) {
         var ret = null;
+        var line1 = null;
+        var line2 = null;
         var retval = null;
+
         $.ajax({
             async: false,
             url: 'server_status.php',
@@ -380,15 +385,32 @@ $(function() {
                 'token' : window.parent.token,
                 'ajax_request' : true,
                 'chart_data' : true,
-                'type' : 'queries'
+                'type' : type
             },
             dataType: 'json',
             success: function(data) {
-            ret = data;            
+            ret = data;
             }
         });
-        retval = [ret.x,ret.y-previous];
-        previous = ret.y;
+        // get data based on chart type
+        if(type == 'proc') {
+            line1 = [ret.x, ret.y_proc - previous_line1];
+            line2 = [ret.x, ret.y_conn - previous_line2];
+            previous_line1 = ret.y_proc;
+            previous_line2 = ret.y_conn;
+        }
+        else if(type == 'queries') {
+            line1 = [ret.x, ret.y-previous_line1];
+            previous_line1 = ret.y;    
+        }
+        else if(type == 'traffic') {
+            line1 = [ret.x, ret.y_sent - previous_line1];
+            line2 = [ret.x, ret.y_recieved - previous_line2];
+            previous_line1 = ret.y_sent;
+            previous_line2 = ret.y_recieved;
+        }
+
+        retval = [line1, line2];
         return retval;
     }
 
@@ -424,7 +446,9 @@ $(function() {
     }
 
     function replotQueryStatsChart($tab) {
-        series[0].push(getCurrentQueryStats());
+        var data_set = getCurrentDataSet('queries');
+        // there is just one line to be plotted
+        series[0].push(data_set[0]);
         $.jqplot($tab.attr('id') + '_chart_cnt', [series[0]], getSettings(data_points)).replot();
     }
 

From 6009af12d8bfb5e882ab75bb57757d05dd63543d Mon Sep 17 00:00:00 2001
From: Atul Pratap Singh <atulpratapsingh05@gmail.com>
Date: Sat, 11 Aug 2012 17:05:35 +0530
Subject: [PATCH 22/42] Same function to plot/replot all live charts

---
 js/server_status.js | 40 +++++++++++++++++++++++++---------------
 1 file changed, 25 insertions(+), 15 deletions(-)

diff --git a/js/server_status.js b/js/server_status.js
index 2be7952a2e..0b397f3a13 100644
--- a/js/server_status.js
+++ b/js/server_status.js
@@ -247,6 +247,12 @@ $(function() {
 
     /** Realtime charting of variables **/
 
+    var previous_line1 = 0;
+    var previous_line2 = 0;
+    var series = new Array();
+    series[0] = new Array();
+    series[1] = new Array();
+
     // Live traffic charting
     $('.buttonlinks a.livetrafficLink').click(function() {
         // ui-tabs-panel class is added by the jquery tabs feature
@@ -340,12 +346,6 @@ $(function() {
         return false;
     });
 
-    var previous_line1 = 0;
-    var previous_line2 = 0;
-    var series = new Array();
-    series[0] = new Array();
-    series[1] = new Array();
-
     // Live query statistics
     $('.buttonlinks a.livequeriesLink').click(function() {
         var $tab = $(this).parents('div.ui-tabs-panel');
@@ -354,7 +354,7 @@ $(function() {
                 .hide()
                 .after('<div class="liveChart" id="' + $tab.attr('id') + '_chart_cnt"></div>');
             var set_previous = getCurrentDataSet('queries');
-            recursiveTimer($tab);
+            recursiveTimer($tab, 'queries');
             setupLiveChart($tab, this, getSettings(data_points));
             tabStatus[$tab.attr('id')] = 'livequeries';
 
@@ -365,10 +365,10 @@ $(function() {
         return false;
     });
 
-    function recursiveTimer($tab) {
-            replotQueryStatsChart($tab);
+    function recursiveTimer($tab, type) {
+            replotLiveChart($tab, type);
             query_stats_jqplot_timer = setTimeout(function() {
-                recursiveTimer($tab) }, refresh_rate);
+                recursiveTimer($tab, type) }, refresh_rate);
     }
 
     function getCurrentDataSet(type) {
@@ -445,11 +445,21 @@ $(function() {
         return settings;
     }
 
-    function replotQueryStatsChart($tab) {
-        var data_set = getCurrentDataSet('queries');
-        // there is just one line to be plotted
-        series[0].push(data_set[0]);
-        $.jqplot($tab.attr('id') + '_chart_cnt', [series[0]], getSettings(data_points)).replot();
+    function replotLiveChart($tab, type) {
+        var data_set = getCurrentDataSet(type);
+        if(type == 'proc') {
+            series[0].push(data_set[0]);
+            series[1].push(data_set[1]);
+        }
+        else if(type == 'queries') {
+            // there is just one line to be plotted
+            series[0].push(data_set[0]);
+        }
+        else if(type == 'traffic') {
+            series[0].push(data_set[0]);
+            series[1].push(data_set[1]);
+        }
+        $.jqplot($tab.attr('id') + '_chart_cnt', [series[0], series[1]], getSettings(data_points)).replot();
     }
 
     function setupLiveChart($tab, link, settings) {

From 056f1fff79bfe7e384c52600677d84ee5a50970f Mon Sep 17 00:00:00 2001
From: Atul Pratap Singh <atulpratapsingh05@gmail.com>
Date: Sat, 11 Aug 2012 17:32:02 +0530
Subject: [PATCH 23/42] Add is_timer_on

---
 js/server_status.js | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/js/server_status.js b/js/server_status.js
index 0b397f3a13..2c8527ad0b 100644
--- a/js/server_status.js
+++ b/js/server_status.js
@@ -113,7 +113,8 @@ $(function() {
     var text = ''; // Holds filter text
     var queryPieChart = null;
     var monitorLoaded = false;
-    var query_stats_jqplot_timer = null;
+    var chart_replot_timer = null;
+    var is_timer_on = 0;
     var refresh_rate = 5000;
     var data_points = 10;
 
@@ -192,14 +193,14 @@ $(function() {
 
 
     $('.buttonlinks .dataPointsNumber').change(function() {
-        if(query_stats_jqplot_timer != null) {
+        if(is_timer_on) {
             data_points = parseInt(this.value);
         }
     });
 
     // Handles refresh rate changing
     $('.buttonlinks .refreshRate').change(function() {
-        if(query_stats_jqplot_timer != null) {
+        if(is_timer_on) {
             refresh_rate = 1000*parseInt(this.value);
         }
 
@@ -367,8 +368,9 @@ $(function() {
 
     function recursiveTimer($tab, type) {
             replotLiveChart($tab, type);
-            query_stats_jqplot_timer = setTimeout(function() {
+            chart_replot_timer = setTimeout(function() {
                 recursiveTimer($tab, type) }, refresh_rate);
+            is_timer_on = 1;
     }
 
     function getCurrentDataSet(type) {
@@ -486,8 +488,9 @@ $(function() {
             $tab.find('.buttonlinks a.tabRefresh').hide();
             $tab.find('.buttonlinks .refreshList').show();
         } else {
-            if(query_stats_jqplot_timer != null) {
-                clearTimeout(query_stats_jqplot_timer);
+            if(is_timer_on) {
+                clearTimeout(chart_replot_timer);
+                is_timer_on = 0;
             }
             else {
                 clearTimeout(chart_activeTimeouts[$tab.attr('id') + "_chart_cnt"]);

From bf2a2c4ab373eab7a2ad6c1bcad94fe84317df7f Mon Sep 17 00:00:00 2001
From: Atul Pratap Singh <atulpratapsingh05@gmail.com>
Date: Sat, 11 Aug 2012 18:13:58 +0530
Subject: [PATCH 24/42] Fix typo

---
 js/server_status.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/js/server_status.js b/js/server_status.js
index 2c8527ad0b..55cf1df300 100644
--- a/js/server_status.js
+++ b/js/server_status.js
@@ -407,9 +407,9 @@ $(function() {
         }
         else if(type == 'traffic') {
             line1 = [ret.x, ret.y_sent - previous_line1];
-            line2 = [ret.x, ret.y_recieved - previous_line2];
+            line2 = [ret.x, ret.y_received - previous_line2];
             previous_line1 = ret.y_sent;
-            previous_line2 = ret.y_recieved;
+            previous_line2 = ret.y_received;
         }
 
         retval = [line1, line2];

From 873cd74263bb49506e4d150dd6a5bb97356b2cc6 Mon Sep 17 00:00:00 2001
From: Atul Pratap Singh <atulpratapsingh05@gmail.com>
Date: Sat, 11 Aug 2012 18:16:19 +0530
Subject: [PATCH 25/42] Traffic is to be displayed in KBs

---
 js/server_status.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/js/server_status.js b/js/server_status.js
index 55cf1df300..d26e4ea0d1 100644
--- a/js/server_status.js
+++ b/js/server_status.js
@@ -406,6 +406,8 @@ $(function() {
             previous_line1 = ret.y;    
         }
         else if(type == 'traffic') {
+            ret.y_sent = ret.y_sent/1024;
+            ret.y_received = ret.y_received/1024;            
             line1 = [ret.x, ret.y_sent - previous_line1];
             line2 = [ret.x, ret.y_received - previous_line2];
             previous_line1 = ret.y_sent;

From 7e1164545c884df79dab7fd0eda8e401712a919c Mon Sep 17 00:00:00 2001
From: Atul Pratap Singh <atulpratapsingh05@gmail.com>
Date: Sat, 11 Aug 2012 18:29:37 +0530
Subject: [PATCH 26/42] Plot traffic charts using jqplot

---
 js/server_status.js | 84 ++++++++++-----------------------------------
 server_status.php   |  4 +++
 2 files changed, 22 insertions(+), 66 deletions(-)

diff --git a/js/server_status.js b/js/server_status.js
index d26e4ea0d1..e279f48833 100644
--- a/js/server_status.js
+++ b/js/server_status.js
@@ -248,11 +248,9 @@ $(function() {
 
     /** Realtime charting of variables **/
 
-    var previous_line1 = 0;
-    var previous_line2 = 0;
-    var series = new Array();
-    series[0] = new Array();
-    series[1] = new Array();
+    var previous_line1;
+    var previous_line2;
+    var series;
 
     // Live traffic charting
     $('.buttonlinks a.livetrafficLink').click(function() {
@@ -261,34 +259,10 @@ $(function() {
         var tabstat = tabStatus[$tab.attr('id')];
 
         if (tabstat == 'static' || tabstat == 'liveconnections') {
-            var settings = {
-                series: [
-                    { name: PMA_messages['strChartKBSent'], data: [] },
-                    { name: PMA_messages['strChartKBReceived'], data: [] }
-                ],
-                title: { text: PMA_messages['strChartServerTraffic'] },
-                realtime: { url: 'server_status.php?' + url_query,
-                           type: 'traffic',
-                           callback: function(chartObj, curVal, lastVal, numLoadedPoints) {
-                               if (lastVal == null) {
-                                   return;
-                                }
-                                chartObj.series[0].addPoint(
-                                    { x: curVal.x, y: (curVal.y_sent - lastVal.y_sent) / 1024 },
-                                    false,
-                                    numLoadedPoints >= chartObj.options.realtime.numMaxPoints
-                                );
-                                chartObj.series[1].addPoint(
-                                    { x: curVal.x, y: (curVal.y_received - lastVal.y_received) / 1024 },
-                                    true,
-                                    numLoadedPoints >= chartObj.options.realtime.numMaxPoints
-                                );
-                            },
-                            error: function() { serverResponseError(); }
-                         }
-            }
-
-            setupLiveChart($tab, this, settings);
+            
+            setupLiveChart($tab, this, getSettings(data_points));
+            var set_previous = getCurrentDataSet('traffic');
+            recursiveTimer($tab, 'traffic');
             if (tabstat == 'liveconnections') {
                 $tab.find('.buttonlinks a.liveconnectionsLink').html(PMA_messages['strLiveConnChart']);
             }
@@ -307,34 +281,10 @@ $(function() {
         var tabstat = tabStatus[$tab.attr('id')];
 
         if (tabstat == 'static' || tabstat == 'livetraffic') {
-            var settings = {
-                series: [
-                    { name: PMA_messages['strChartConnections'], data: [] },
-                    { name: PMA_messages['strChartProcesses'], data: [] }
-                ],
-                title: { text: PMA_messages['strChartConnectionsTitle'] },
-                realtime: { url: 'server_status.php?' + url_query,
-                           type: 'proc',
-                           callback: function(chartObj, curVal, lastVal, numLoadedPoints) {
-                                if (lastVal == null) {
-                                    return;
-                                }
-                                chartObj.series[0].addPoint(
-                                    { x: curVal.x, y: curVal.y_conn - lastVal.y_conn },
-                                    false,
-                                    numLoadedPoints >= chartObj.options.realtime.numMaxPoints
-                                );
-                                chartObj.series[1].addPoint(
-                                    { x: curVal.x, y: curVal.y_proc },
-                                    true,
-                                    numLoadedPoints >= chartObj.options.realtime.numMaxPoints
-                                );
-                            },
-                            error: function() { serverResponseError(); }
-                         }
-            };
 
-            setupLiveChart($tab, this, settings);
+            setupLiveChart($tab, this, getSettings(data_points));
+            var set_previous = getCurrentDataSet('proc');
+            recursiveTimer($tab, 'proc');
             if (tabstat == 'livetraffic') {
                 $tab.find('.buttonlinks a.livetrafficLink').html(PMA_messages['strLiveTrafficChart']);
             }
@@ -395,7 +345,7 @@ $(function() {
             }
         });
         // get data based on chart type
-        if(type == 'proc') {
+        if(type == 'proc') {            
             line1 = [ret.x, ret.y_proc - previous_line1];
             line2 = [ret.x, ret.y_conn - previous_line2];
             previous_line1 = ret.y_proc;
@@ -451,7 +401,7 @@ $(function() {
 
     function replotLiveChart($tab, type) {
         var data_set = getCurrentDataSet(type);
-        if(type == 'proc') {
+        if(type == 'proc' || type == 'traffic') {
             series[0].push(data_set[0]);
             series[1].push(data_set[1]);
         }
@@ -459,10 +409,7 @@ $(function() {
             // there is just one line to be plotted
             series[0].push(data_set[0]);
         }
-        else if(type == 'traffic') {
-            series[0].push(data_set[0]);
-            series[1].push(data_set[1]);
-        }
+
         $.jqplot($tab.attr('id') + '_chart_cnt', [series[0], series[1]], getSettings(data_points)).replot();
     }
 
@@ -506,6 +453,11 @@ $(function() {
             $tab.find('.buttonlinks select').get(0).selectedIndex = 2;
             $tab.find('.buttonlinks .refreshList').hide();
         }
+        previous_line1 = 0;
+        previous_line2 = 0;
+        series = new Array();
+        series[0] = new Array();
+        series[1] = new Array();
     }
 
     /* 3 Filtering functions */
diff --git a/server_status.php b/server_status.php
index 381c6e20f0..3f2b0af0e2 100644
--- a/server_status.php
+++ b/server_status.php
@@ -803,6 +803,10 @@ echo __('Runtime Information');
                     <img src="<?php echo $GLOBALS['pmaThemeImage'];?>ajax_clock_small.gif" alt="ajax clock" style="display: none;" />
                     <?php echo __('Refresh'); ?>
                 </a>
+                <span class="refreshList" style="display:none;">
+                    <label for="id_trafficChartDataPointsList"><?php echo __('Number of Data Points: '); ?></label>
+                       <?php echo getDataPointsNumberList('trafficChartDataPoints'); ?>
+                </span>
                 <span class="refreshList" style="display:none;">
                     <label for="id_trafficChartRefresh"><?php echo __('Refresh rate: '); ?></label>
                     <?php refreshList('trafficChartRefresh'); ?>

From 34f34e1619b491195cba4898a7b0606bec5dc52a Mon Sep 17 00:00:00 2001
From: Atul Pratap Singh <atulpratapsingh05@gmail.com>
Date: Sat, 11 Aug 2012 18:36:11 +0530
Subject: [PATCH 27/42] Fix live queries chart

---
 js/server_status.js | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/js/server_status.js b/js/server_status.js
index e279f48833..27b2153e48 100644
--- a/js/server_status.js
+++ b/js/server_status.js
@@ -301,12 +301,10 @@ $(function() {
     $('.buttonlinks a.livequeriesLink').click(function() {
         var $tab = $(this).parents('div.ui-tabs-panel');
         if (tabStatus[$tab.attr('id')] == 'static') {
-            $tab.find('.tabInnerContent')
-                .hide()
-                .after('<div class="liveChart" id="' + $tab.attr('id') + '_chart_cnt"></div>');
+
+            setupLiveChart($tab, this, getSettings(data_points));
             var set_previous = getCurrentDataSet('queries');
             recursiveTimer($tab, 'queries');
-            setupLiveChart($tab, this, getSettings(data_points));
             tabStatus[$tab.attr('id')] = 'livequeries';
 
         } else {

From 2c6d9d1c183f8ead5abf7b67d76630ad52c8ec54 Mon Sep 17 00:00:00 2001
From: Atul Pratap Singh <atulpratapsingh05@gmail.com>
Date: Sat, 11 Aug 2012 18:41:18 +0530
Subject: [PATCH 28/42] Fix process chart, total processes number needs to be
 plotted not the difference

---
 js/server_status.js | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/js/server_status.js b/js/server_status.js
index 27b2153e48..d16fe6cacf 100644
--- a/js/server_status.js
+++ b/js/server_status.js
@@ -343,11 +343,10 @@ $(function() {
             }
         });
         // get data based on chart type
-        if(type == 'proc') {            
-            line1 = [ret.x, ret.y_proc - previous_line1];
-            line2 = [ret.x, ret.y_conn - previous_line2];
-            previous_line1 = ret.y_proc;
-            previous_line2 = ret.y_conn;
+        if(type == 'proc') {
+            line1 = [ret.x, ret.y_conn - previous_line1];
+            line2 = [ret.x, ret.y_proc];
+            previous_line1 = ret.y_conn;
         }
         else if(type == 'queries') {
             line1 = [ret.x, ret.y-previous_line1];

From 9d3ec34afe2b753dc5db3431d62501803d13c5b0 Mon Sep 17 00:00:00 2001
From: Atul Pratap Singh <atulpratapsingh05@gmail.com>
Date: Sat, 11 Aug 2012 18:58:39 +0530
Subject: [PATCH 29/42] Fix name

---
 js/server_status.js | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/js/server_status.js b/js/server_status.js
index d16fe6cacf..e8e40f77cc 100644
--- a/js/server_status.js
+++ b/js/server_status.js
@@ -248,8 +248,8 @@ $(function() {
 
     /** Realtime charting of variables **/
 
-    var previous_line1;
-    var previous_line2;
+    var previous_y_line1;
+    var previous_y_line2;
     var series;
 
     // Live traffic charting
@@ -344,21 +344,21 @@ $(function() {
         });
         // get data based on chart type
         if(type == 'proc') {
-            line1 = [ret.x, ret.y_conn - previous_line1];
+            line1 = [ret.x, ret.y_conn - previous_y_line1];
             line2 = [ret.x, ret.y_proc];
-            previous_line1 = ret.y_conn;
+            previous_y_line1 = ret.y_conn;
         }
         else if(type == 'queries') {
-            line1 = [ret.x, ret.y-previous_line1];
-            previous_line1 = ret.y;    
+            line1 = [ret.x, ret.y-previous_y_line1];
+            previous_y_line1 = ret.y;    
         }
         else if(type == 'traffic') {
             ret.y_sent = ret.y_sent/1024;
             ret.y_received = ret.y_received/1024;            
-            line1 = [ret.x, ret.y_sent - previous_line1];
-            line2 = [ret.x, ret.y_received - previous_line2];
-            previous_line1 = ret.y_sent;
-            previous_line2 = ret.y_received;
+            line1 = [ret.x, ret.y_sent - previous_y_line1];
+            line2 = [ret.x, ret.y_received - previous_y_line2];
+            previous_y_line1 = ret.y_sent;
+            previous_y_line2 = ret.y_received;
         }
 
         retval = [line1, line2];
@@ -450,8 +450,8 @@ $(function() {
             $tab.find('.buttonlinks select').get(0).selectedIndex = 2;
             $tab.find('.buttonlinks .refreshList').hide();
         }
-        previous_line1 = 0;
-        previous_line2 = 0;
+        previous_y_line1 = 0;
+        previous_y_line2 = 0;
         series = new Array();
         series[0] = new Array();
         series[1] = new Array();

From 109312f870ba02c9bbe99d53bdc0d83fb0863f08 Mon Sep 17 00:00:00 2001
From: Atul Pratap Singh <atulpratapsingh05@gmail.com>
Date: Sat, 11 Aug 2012 19:01:32 +0530
Subject: [PATCH 30/42] Fix cleartimeout problem

---
 js/server_status.js | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/js/server_status.js b/js/server_status.js
index e8e40f77cc..4fc66ca6e1 100644
--- a/js/server_status.js
+++ b/js/server_status.js
@@ -434,14 +434,8 @@ $(function() {
             $tab.find('.buttonlinks a.tabRefresh').hide();
             $tab.find('.buttonlinks .refreshList').show();
         } else {
-            if(is_timer_on) {
-                clearTimeout(chart_replot_timer);
-                is_timer_on = 0;
-            }
-            else {
-                clearTimeout(chart_activeTimeouts[$tab.attr('id') + "_chart_cnt"]);
-                chart_activeTimeouts[$tab.attr('id') + "_chart_cnt"] = null;
-            }
+            clearTimeout(chart_activeTimeouts[$tab.attr('id') + "_chart_cnt"]);
+            chart_activeTimeouts[$tab.attr('id') + "_chart_cnt"] = null;
             $tab.find('.tabInnerContent').show();
             $tab.find('div#' + $tab.attr('id') + '_chart_cnt').remove();
             tabStatus[$tab.attr('id')] = 'static';
@@ -450,6 +444,10 @@ $(function() {
             $tab.find('.buttonlinks select').get(0).selectedIndex = 2;
             $tab.find('.buttonlinks .refreshList').hide();
         }
+        if(is_timer_on) {
+            clearTimeout(chart_replot_timer);
+            is_timer_on = 0;
+        }
         previous_y_line1 = 0;
         previous_y_line2 = 0;
         series = new Array();

From deefd47b33c61ed61d1988df90b644543f4aba49 Mon Sep 17 00:00:00 2001
From: Atul Pratap Singh <atulpratapsingh05@gmail.com>
Date: Sat, 11 Aug 2012 19:11:50 +0530
Subject: [PATCH 31/42] Fix chart titles

---
 js/server_status.js | 24 ++++++++++++++++++------
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/js/server_status.js b/js/server_status.js
index 4fc66ca6e1..9b39c9dca6 100644
--- a/js/server_status.js
+++ b/js/server_status.js
@@ -260,7 +260,7 @@ $(function() {
 
         if (tabstat == 'static' || tabstat == 'liveconnections') {
             
-            setupLiveChart($tab, this, getSettings(data_points));
+            setupLiveChart($tab, this, getSettings(data_points, 'traffic'));
             var set_previous = getCurrentDataSet('traffic');
             recursiveTimer($tab, 'traffic');
             if (tabstat == 'liveconnections') {
@@ -282,7 +282,7 @@ $(function() {
 
         if (tabstat == 'static' || tabstat == 'livetraffic') {
 
-            setupLiveChart($tab, this, getSettings(data_points));
+            setupLiveChart($tab, this, getSettings(data_points, 'proc'));
             var set_previous = getCurrentDataSet('proc');
             recursiveTimer($tab, 'proc');
             if (tabstat == 'livetraffic') {
@@ -302,7 +302,7 @@ $(function() {
         var $tab = $(this).parents('div.ui-tabs-panel');
         if (tabStatus[$tab.attr('id')] == 'static') {
 
-            setupLiveChart($tab, this, getSettings(data_points));
+            setupLiveChart($tab, this, getSettings(data_points, 'queries'));
             var set_previous = getCurrentDataSet('queries');
             recursiveTimer($tab, 'queries');
             tabStatus[$tab.attr('id')] = 'livequeries';
@@ -365,14 +365,26 @@ $(function() {
         return retval;
     }
 
-    function getSettings(num) {
+    function getSettings(num, type) {
         var current_time = new Date().getTime();
         // Min X would be decided based on refresh rate and number of data points
         var minX = current_time - (refresh_rate * num);
         var interval = (((current_time - minX)/num) / 1000);
         interval = (num > 20) ? (((current_time - minX)/20) / 1000) : interval;
+
+        var title_message;
+        if(type == 'proc') {
+            title_message = PMA_messages['strChartConnectionsTitle'];
+        }
+        else if(type == 'queries') {
+            title_message = PMA_messages['strChartIssuedQueriesTitle'];
+        }
+        else if(type == 'traffic') {
+            title_message = PMA_messages['strChartServerTraffic'];
+        }
+        
         var settings = {
-            title: PMA_messages['strChartIssuedQueriesTitle'],
+            title: title_message,
             axes: {
                 xaxis: {
                     label: PMA_messages['strChartIssuedQueries'],
@@ -407,7 +419,7 @@ $(function() {
             series[0].push(data_set[0]);
         }
 
-        $.jqplot($tab.attr('id') + '_chart_cnt', [series[0], series[1]], getSettings(data_points)).replot();
+        $.jqplot($tab.attr('id') + '_chart_cnt', [series[0], series[1]], getSettings(data_points, type)).replot();
     }
 
     function setupLiveChart($tab, link, settings) {

From cdbadbe76191f33eba89b3c6b939d08e15ecef42 Mon Sep 17 00:00:00 2001
From: Atul Pratap Singh <atulpratapsingh05@gmail.com>
Date: Sun, 12 Aug 2012 17:56:45 +0530
Subject: [PATCH 32/42] Fix chart legends

---
 js/server_status.js | 46 +++++++++++++++++++++++++++++----------------
 1 file changed, 30 insertions(+), 16 deletions(-)

diff --git a/js/server_status.js b/js/server_status.js
index 9b39c9dca6..55ec40cae7 100644
--- a/js/server_status.js
+++ b/js/server_status.js
@@ -372,23 +372,9 @@ $(function() {
         var interval = (((current_time - minX)/num) / 1000);
         interval = (num > 20) ? (((current_time - minX)/20) / 1000) : interval;
 
-        var title_message;
-        if(type == 'proc') {
-            title_message = PMA_messages['strChartConnectionsTitle'];
-        }
-        else if(type == 'queries') {
-            title_message = PMA_messages['strChartIssuedQueriesTitle'];
-        }
-        else if(type == 'traffic') {
-            title_message = PMA_messages['strChartServerTraffic'];
-        }
-        
         var settings = {
-            title: title_message,
             axes: {
                 xaxis: {
-                    label: PMA_messages['strChartIssuedQueries'],
-                    labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
                     renderer: $.jqplot.DateAxisRenderer,
                     tickOptions: {
                         formatString: '%H:%M:%S'
@@ -403,8 +389,36 @@ $(function() {
                     label: PMA_messages['strTotalCount'],
                     labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
                 }
+            },
+            legend: {
+                show: true,
+                location: 's',     // compass direction, nw, n, ne, e, se, s, sw, w.
+                xoffset: 12,        // pixel offset of the legend box from the x (or x2) axis.
+                yoffset: 12,        // pixel offset of the legend box from the y (or y2) axis.
             }
         };
+
+        var title_message;
+        var x_legend = new Array();
+        if(type == 'proc') {
+            title_message = PMA_messages['strChartConnectionsTitle'];
+            x_legend[0] = PMA_messages['strChartConnections'];
+            x_legend[1] = PMA_messages['strChartProcesses'];
+            settings.series = [ {label: x_legend[0]}, {label: x_legend[1]} ];
+        }
+        else if(type == 'queries') {
+            title_message = PMA_messages['strChartIssuedQueriesTitle'];
+            x_legend[0] = PMA_messages['strChartIssuedQueries'];
+            settings.series = [ {label: x_legend[0]} ];
+        }
+        else if(type == 'traffic') {
+            title_message = PMA_messages['strChartServerTraffic'];
+            x_legend[0] = PMA_messages['strChartKBSent'];
+            x_legend[1] = PMA_messages['strChartKBReceived'];
+            settings.series = [ {label: x_legend[0]}, {label: x_legend[1]} ];
+        }
+        settings.title = title_message;
+
         return settings;
     }
 
@@ -413,13 +427,13 @@ $(function() {
         if(type == 'proc' || type == 'traffic') {
             series[0].push(data_set[0]);
             series[1].push(data_set[1]);
+            $.jqplot($tab.attr('id') + '_chart_cnt', [series[0], series[1]], getSettings(data_points, type)).replot();
         }
         else if(type == 'queries') {
             // there is just one line to be plotted
             series[0].push(data_set[0]);
+            $.jqplot($tab.attr('id') + '_chart_cnt', [series[0]], getSettings(data_points, type)).replot();
         }
-
-        $.jqplot($tab.attr('id') + '_chart_cnt', [series[0], series[1]], getSettings(data_points, type)).replot();
     }
 
     function setupLiveChart($tab, link, settings) {

From 94d03f61302b6146656b3bd20836f9308b9ecdb7 Mon Sep 17 00:00:00 2001
From: Atul Pratap Singh <atulpratapsingh05@gmail.com>
Date: Sun, 12 Aug 2012 19:49:27 +0530
Subject: [PATCH 33/42] Make default data points as 12, i.e. 2nd on the index
 list

---
 js/server_status.js | 2 +-
 server_status.php   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/js/server_status.js b/js/server_status.js
index 55ec40cae7..a2564c6f5f 100644
--- a/js/server_status.js
+++ b/js/server_status.js
@@ -116,7 +116,7 @@ $(function() {
     var chart_replot_timer = null;
     var is_timer_on = 0;
     var refresh_rate = 5000;
-    var data_points = 10;
+    var data_points = 12;
 
     /* Chart configuration */
     // Defines what the tabs are currently displaying (realtime or data)
diff --git a/server_status.php b/server_status.php
index 3f2b0af0e2..fd6e6803b0 100644
--- a/server_status.php
+++ b/server_status.php
@@ -1802,7 +1802,7 @@ function refreshList($name, $defaultRate=5, $refreshRates=Array(1, 2, 5, 10, 20,
 }
 
 /* Builds a <select> list for number of data points to be displayed */
-function getDataPointsNumberList($name, $defaultValue=10, $values=Array(10, 15, 20, 25, 30, 35, 40))
+function getDataPointsNumberList($name, $defaultValue=12, $values=Array(8, 10, 12, 15, 20, 25, 30, 40))
 {
     $html_output = '<select name="' . $name . '" id="id_' . $name . '" class="dataPointsNumber">';
             foreach ($values as $number) {

From 3f082551a09208f97fa0fe93ff379aecde05fe32 Mon Sep 17 00:00:00 2001
From: Atul Pratap Singh <atulpratapsingh05@gmail.com>
Date: Mon, 13 Aug 2012 22:59:30 +0530
Subject: [PATCH 34/42] Separate timeout variables for separate charts

---
 js/server_status.js | 20 ++++++--------------
 1 file changed, 6 insertions(+), 14 deletions(-)

diff --git a/js/server_status.js b/js/server_status.js
index a2564c6f5f..d30418201c 100644
--- a/js/server_status.js
+++ b/js/server_status.js
@@ -113,8 +113,6 @@ $(function() {
     var text = ''; // Holds filter text
     var queryPieChart = null;
     var monitorLoaded = false;
-    var chart_replot_timer = null;
-    var is_timer_on = 0;
     var refresh_rate = 5000;
     var data_points = 12;
 
@@ -123,6 +121,8 @@ $(function() {
     var tabStatus = new Object();
     // Holds the current chart instances for each tab
     var tabChart = new Object();
+    // Holds current live charts' timeouts
+    var chart_replot_timers = new Object();
 
     /*** Table sort tooltip ***/
     PMA_createqTip($('table.sortable thead th'), PMA_messages['strSortHint']);
@@ -193,16 +193,12 @@ $(function() {
 
 
     $('.buttonlinks .dataPointsNumber').change(function() {
-        if(is_timer_on) {
-            data_points = parseInt(this.value);
-        }
+        data_points = parseInt(this.value);
     });
 
     // Handles refresh rate changing
     $('.buttonlinks .refreshRate').change(function() {
-        if(is_timer_on) {
-            refresh_rate = 1000*parseInt(this.value);
-        }
+        refresh_rate = 1000*parseInt(this.value);
 
         var chart = tabChart[$(this).parents('div.ui-tabs-panel').attr('id')];
 
@@ -316,9 +312,8 @@ $(function() {
 
     function recursiveTimer($tab, type) {
             replotLiveChart($tab, type);
-            chart_replot_timer = setTimeout(function() {
+            chart_replot_timers[$tab.attr('id')] = setTimeout(function() {
                 recursiveTimer($tab, type) }, refresh_rate);
-            is_timer_on = 1;
     }
 
     function getCurrentDataSet(type) {
@@ -470,10 +465,7 @@ $(function() {
             $tab.find('.buttonlinks select').get(0).selectedIndex = 2;
             $tab.find('.buttonlinks .refreshList').hide();
         }
-        if(is_timer_on) {
-            clearTimeout(chart_replot_timer);
-            is_timer_on = 0;
-        }
+        clearTimeout(chart_replot_timers[$tab.attr('id')]);
         previous_y_line1 = 0;
         previous_y_line2 = 0;
         series = new Array();

From bfd22db4a2e1ee39c10c6d7101f9b6441cfe04a7 Mon Sep 17 00:00:00 2001
From: Atul Pratap Singh <atulpratapsingh05@gmail.com>
Date: Tue, 14 Aug 2012 00:13:29 +0530
Subject: [PATCH 35/42] Separate data series for each chart

---
 js/server_status.js | 53 +++++++++++++++++++++++----------------------
 1 file changed, 27 insertions(+), 26 deletions(-)

diff --git a/js/server_status.js b/js/server_status.js
index d30418201c..729d146ad8 100644
--- a/js/server_status.js
+++ b/js/server_status.js
@@ -244,9 +244,10 @@ $(function() {
 
     /** Realtime charting of variables **/
 
-    var previous_y_line1;
-    var previous_y_line2;
-    var series;
+    // variables to hold previous y data value to calculate difference
+    var previous_y_line1 = new Object();
+    var previous_y_line2 = new Object();
+    var series = new Object();
 
     // Live traffic charting
     $('.buttonlinks a.livetrafficLink').click(function() {
@@ -257,7 +258,7 @@ $(function() {
         if (tabstat == 'static' || tabstat == 'liveconnections') {
             
             setupLiveChart($tab, this, getSettings(data_points, 'traffic'));
-            var set_previous = getCurrentDataSet('traffic');
+            var set_previous = getCurrentDataSet($tab, 'traffic');
             recursiveTimer($tab, 'traffic');
             if (tabstat == 'liveconnections') {
                 $tab.find('.buttonlinks a.liveconnectionsLink').html(PMA_messages['strLiveConnChart']);
@@ -279,7 +280,7 @@ $(function() {
         if (tabstat == 'static' || tabstat == 'livetraffic') {
 
             setupLiveChart($tab, this, getSettings(data_points, 'proc'));
-            var set_previous = getCurrentDataSet('proc');
+            var set_previous = getCurrentDataSet($tab, 'proc');
             recursiveTimer($tab, 'proc');
             if (tabstat == 'livetraffic') {
                 $tab.find('.buttonlinks a.livetrafficLink').html(PMA_messages['strLiveTrafficChart']);
@@ -299,7 +300,7 @@ $(function() {
         if (tabStatus[$tab.attr('id')] == 'static') {
 
             setupLiveChart($tab, this, getSettings(data_points, 'queries'));
-            var set_previous = getCurrentDataSet('queries');
+            var set_previous = getCurrentDataSet($tab, 'queries');
             recursiveTimer($tab, 'queries');
             tabStatus[$tab.attr('id')] = 'livequeries';
 
@@ -316,7 +317,7 @@ $(function() {
                 recursiveTimer($tab, type) }, refresh_rate);
     }
 
-    function getCurrentDataSet(type) {
+    function getCurrentDataSet($tab, type) {
         var ret = null;
         var line1 = null;
         var line2 = null;
@@ -339,21 +340,21 @@ $(function() {
         });
         // get data based on chart type
         if(type == 'proc') {
-            line1 = [ret.x, ret.y_conn - previous_y_line1];
+            line1 = [ret.x, ret.y_conn - previous_y_line1[$tab.attr('id')]];
             line2 = [ret.x, ret.y_proc];
-            previous_y_line1 = ret.y_conn;
+            previous_y_line1[$tab.attr('id')] = ret.y_conn;
         }
         else if(type == 'queries') {
-            line1 = [ret.x, ret.y-previous_y_line1];
-            previous_y_line1 = ret.y;    
+            line1 = [ret.x, ret.y-previous_y_line1[$tab.attr('id')]];
+            previous_y_line1[$tab.attr('id')] = ret.y;
         }
         else if(type == 'traffic') {
             ret.y_sent = ret.y_sent/1024;
             ret.y_received = ret.y_received/1024;            
-            line1 = [ret.x, ret.y_sent - previous_y_line1];
-            line2 = [ret.x, ret.y_received - previous_y_line2];
-            previous_y_line1 = ret.y_sent;
-            previous_y_line2 = ret.y_received;
+            line1 = [ret.x, ret.y_sent - previous_y_line1[$tab.attr('id')]];
+            line2 = [ret.x, ret.y_received - previous_y_line2[$tab.attr('id')]];
+            previous_y_line1[$tab.attr('id')] = ret.y_sent;
+            previous_y_line2[$tab.attr('id')] = ret.y_received;
         }
 
         retval = [line1, line2];
@@ -418,16 +419,16 @@ $(function() {
     }
 
     function replotLiveChart($tab, type) {
-        var data_set = getCurrentDataSet(type);
+        var data_set = getCurrentDataSet($tab, type);
         if(type == 'proc' || type == 'traffic') {
-            series[0].push(data_set[0]);
-            series[1].push(data_set[1]);
-            $.jqplot($tab.attr('id') + '_chart_cnt', [series[0], series[1]], getSettings(data_points, type)).replot();
+            series[$tab.attr('id')][0].push(data_set[0]);
+            series[$tab.attr('id')][1].push(data_set[1]);
+            $.jqplot($tab.attr('id') + '_chart_cnt', [series[$tab.attr('id')][0], series[$tab.attr('id')][1]], getSettings(data_points, type)).replot();
         }
         else if(type == 'queries') {
             // there is just one line to be plotted
-            series[0].push(data_set[0]);
-            $.jqplot($tab.attr('id') + '_chart_cnt', [series[0]], getSettings(data_points, type)).replot();
+            series[$tab.attr('id')][0].push(data_set[0]);
+            $.jqplot($tab.attr('id') + '_chart_cnt', [series[$tab.attr('id')][0]], getSettings(data_points, type)).replot();
         }
     }
 
@@ -466,11 +467,11 @@ $(function() {
             $tab.find('.buttonlinks .refreshList').hide();
         }
         clearTimeout(chart_replot_timers[$tab.attr('id')]);
-        previous_y_line1 = 0;
-        previous_y_line2 = 0;
-        series = new Array();
-        series[0] = new Array();
-        series[1] = new Array();
+        previous_y_line1[$tab.attr('id')] = 0;
+        previous_y_line2[$tab.attr('id')] = 0;
+        series[$tab.attr('id')] = new Array();
+        series[$tab.attr('id')][0] = new Array();
+        series[$tab.attr('id')][1] = new Array();
     }
 
     /* 3 Filtering functions */

From 619d4c1e1a9fb43b2080d4f51fe374400b193b28 Mon Sep 17 00:00:00 2001
From: Atul Pratap Singh <atulpratapsingh05@gmail.com>
Date: Tue, 14 Aug 2012 01:32:39 +0530
Subject: [PATCH 36/42] Use replot with chart object

---
 js/server_status.js | 38 ++++++++++++++++++++++++--------------
 1 file changed, 24 insertions(+), 14 deletions(-)

diff --git a/js/server_status.js b/js/server_status.js
index 729d146ad8..256a9fbca7 100644
--- a/js/server_status.js
+++ b/js/server_status.js
@@ -121,6 +121,7 @@ $(function() {
     var tabStatus = new Object();
     // Holds the current chart instances for each tab
     var tabChart = new Object();
+    var currentCharts = new Object();
     // Holds current live charts' timeouts
     var chart_replot_timers = new Object();
 
@@ -259,6 +260,7 @@ $(function() {
             
             setupLiveChart($tab, this, getSettings(data_points, 'traffic'));
             var set_previous = getCurrentDataSet($tab, 'traffic');
+            currentCharts[$tab.attr('id')] = $.jqplot($tab.attr('id') + '_chart_cnt', [[[0,0]],[[0,0]]], getSettings('traffic'));
             recursiveTimer($tab, 'traffic');
             if (tabstat == 'liveconnections') {
                 $tab.find('.buttonlinks a.liveconnectionsLink').html(PMA_messages['strLiveConnChart']);
@@ -281,6 +283,7 @@ $(function() {
 
             setupLiveChart($tab, this, getSettings(data_points, 'proc'));
             var set_previous = getCurrentDataSet($tab, 'proc');
+            currentCharts[$tab.attr('id')] = $.jqplot($tab.attr('id') + '_chart_cnt', [[[0,0]],[[0,0]]], getSettings('proc'));
             recursiveTimer($tab, 'proc');
             if (tabstat == 'livetraffic') {
                 $tab.find('.buttonlinks a.livetrafficLink').html(PMA_messages['strLiveTrafficChart']);
@@ -301,6 +304,7 @@ $(function() {
 
             setupLiveChart($tab, this, getSettings(data_points, 'queries'));
             var set_previous = getCurrentDataSet($tab, 'queries');
+            currentCharts[$tab.attr('id')] = $.jqplot($tab.attr('id') + '_chart_cnt', [[0,0]], getSettings('queries'));
             recursiveTimer($tab, 'queries');
             tabStatus[$tab.attr('id')] = 'livequeries';
 
@@ -361,12 +365,7 @@ $(function() {
         return retval;
     }
 
-    function getSettings(num, type) {
-        var current_time = new Date().getTime();
-        // Min X would be decided based on refresh rate and number of data points
-        var minX = current_time - (refresh_rate * num);
-        var interval = (((current_time - minX)/num) / 1000);
-        interval = (num > 20) ? (((current_time - minX)/20) / 1000) : interval;
+    function getSettings(type) {
 
         var settings = {
             axes: {
@@ -374,14 +373,10 @@ $(function() {
                     renderer: $.jqplot.DateAxisRenderer,
                     tickOptions: {
                         formatString: '%H:%M:%S'
-                    },
-                    min: minX,
-                    // Make the right boundary of chart as current time
-                    max: current_time,
-                    tickInterval: interval + " seconds"
+                    }
                 },
                 yaxis: {
-                    min:0,
+                    autoscale:true,
                     label: PMA_messages['strTotalCount'],
                     labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
                 }
@@ -423,13 +418,28 @@ $(function() {
         if(type == 'proc' || type == 'traffic') {
             series[$tab.attr('id')][0].push(data_set[0]);
             series[$tab.attr('id')][1].push(data_set[1]);
-            $.jqplot($tab.attr('id') + '_chart_cnt', [series[$tab.attr('id')][0], series[$tab.attr('id')][1]], getSettings(data_points, type)).replot();
+            // update data set
+            currentCharts[$tab.attr('id')].series[0].data = series[$tab.attr('id')][0];
+            currentCharts[$tab.attr('id')].series[1].data = series[$tab.attr('id')][1];
         }
         else if(type == 'queries') {
             // there is just one line to be plotted
             series[$tab.attr('id')][0].push(data_set[0]);
-            $.jqplot($tab.attr('id') + '_chart_cnt', [series[$tab.attr('id')][0]], getSettings(data_points, type)).replot();
+            // update data set
+            currentCharts[$tab.attr('id')].series[0].data = series[$tab.attr('id')][0];
         }
+        currentCharts[$tab.attr('id')].resetAxesScale();
+        var current_time = new Date().getTime();
+        // Min X would be decided based on refresh rate and number of data points
+        var minX = current_time - (refresh_rate * data_points);
+        var interval = (((current_time - minX)/data_points) / 1000);
+        interval = (data_points > 20) ? (((current_time - minX)/20) / 1000) : interval;
+        // update chart options
+        currentCharts[$tab.attr('id')]['axes']['xaxis']['max'] = current_time;
+        currentCharts[$tab.attr('id')]['axes']['xaxis']['min'] = minX;
+        currentCharts[$tab.attr('id')]['axes']['xaxis']['tickInterval'] = interval + " seconds";
+        // replot
+        currentCharts[$tab.attr('id')].replot();
     }
 
     function setupLiveChart($tab, link, settings) {

From b4a3f95d5877d53daa60d6cb0cda4bd77ba6602d Mon Sep 17 00:00:00 2001
From: Atul Pratap Singh <atulpratapsingh05@gmail.com>
Date: Wed, 15 Aug 2012 16:00:51 +0530
Subject: [PATCH 37/42] Use selector values directly

---
 js/server_status.js | 18 ++++++------------
 1 file changed, 6 insertions(+), 12 deletions(-)

diff --git a/js/server_status.js b/js/server_status.js
index 256a9fbca7..29c8e4f395 100644
--- a/js/server_status.js
+++ b/js/server_status.js
@@ -113,8 +113,6 @@ $(function() {
     var text = ''; // Holds filter text
     var queryPieChart = null;
     var monitorLoaded = false;
-    var refresh_rate = 5000;
-    var data_points = 12;
 
     /* Chart configuration */
     // Defines what the tabs are currently displaying (realtime or data)
@@ -192,14 +190,8 @@ $(function() {
         }, 0.5);
     });
 
-
-    $('.buttonlinks .dataPointsNumber').change(function() {
-        data_points = parseInt(this.value);
-    });
-
     // Handles refresh rate changing
     $('.buttonlinks .refreshRate').change(function() {
-        refresh_rate = 1000*parseInt(this.value);
 
         var chart = tabChart[$(this).parents('div.ui-tabs-panel').attr('id')];
 
@@ -258,7 +250,7 @@ $(function() {
 
         if (tabstat == 'static' || tabstat == 'liveconnections') {
             
-            setupLiveChart($tab, this, getSettings(data_points, 'traffic'));
+            setupLiveChart($tab, this, getSettings('traffic'));
             var set_previous = getCurrentDataSet($tab, 'traffic');
             currentCharts[$tab.attr('id')] = $.jqplot($tab.attr('id') + '_chart_cnt', [[[0,0]],[[0,0]]], getSettings('traffic'));
             recursiveTimer($tab, 'traffic');
@@ -281,7 +273,7 @@ $(function() {
 
         if (tabstat == 'static' || tabstat == 'livetraffic') {
 
-            setupLiveChart($tab, this, getSettings(data_points, 'proc'));
+            setupLiveChart($tab, this, getSettings('proc'));
             var set_previous = getCurrentDataSet($tab, 'proc');
             currentCharts[$tab.attr('id')] = $.jqplot($tab.attr('id') + '_chart_cnt', [[[0,0]],[[0,0]]], getSettings('proc'));
             recursiveTimer($tab, 'proc');
@@ -302,7 +294,7 @@ $(function() {
         var $tab = $(this).parents('div.ui-tabs-panel');
         if (tabStatus[$tab.attr('id')] == 'static') {
 
-            setupLiveChart($tab, this, getSettings(data_points, 'queries'));
+            setupLiveChart($tab, this, getSettings('queries'));
             var set_previous = getCurrentDataSet($tab, 'queries');
             currentCharts[$tab.attr('id')] = $.jqplot($tab.attr('id') + '_chart_cnt', [[0,0]], getSettings('queries'));
             recursiveTimer($tab, 'queries');
@@ -318,7 +310,7 @@ $(function() {
     function recursiveTimer($tab, type) {
             replotLiveChart($tab, type);
             chart_replot_timers[$tab.attr('id')] = setTimeout(function() {
-                recursiveTimer($tab, type) }, refresh_rate);
+                recursiveTimer($tab, type) }, ($('.refreshRate :selected', $tab).val() * 1000));
     }
 
     function getCurrentDataSet($tab, type) {
@@ -430,6 +422,8 @@ $(function() {
         }
         currentCharts[$tab.attr('id')].resetAxesScale();
         var current_time = new Date().getTime();
+        var data_points = $('.dataPointsNumber :selected', $tab).val();
+        var refresh_rate = $('.refreshRate :selected', $tab).val() * 1000;
         // Min X would be decided based on refresh rate and number of data points
         var minX = current_time - (refresh_rate * data_points);
         var interval = (((current_time - minX)/data_points) / 1000);

From 571aa5784992d8f9de93492755b0ae5b4b83c693 Mon Sep 17 00:00:00 2001
From: Atul Pratap Singh <atulpratapsingh05@gmail.com>
Date: Thu, 16 Aug 2012 20:15:07 +0530
Subject: [PATCH 38/42] Make charting smooth

---
 js/server_status.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/js/server_status.js b/js/server_status.js
index 29c8e4f395..3c1f9761a3 100644
--- a/js/server_status.js
+++ b/js/server_status.js
@@ -373,6 +373,11 @@ $(function() {
                     labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
                 }
             },
+            seriesDefaults: {
+                rendererOptions: {
+                    smooth: true
+                }
+            },
             legend: {
                 show: true,
                 location: 's',     // compass direction, nw, n, ne, e, se, s, sw, w.

From 853cbb8438bcc6fc00e2f2911819e1e59cbbce60 Mon Sep 17 00:00:00 2001
From: Atul Pratap Singh <atulpratapsingh05@gmail.com>
Date: Sat, 18 Aug 2012 17:41:50 +0530
Subject: [PATCH 39/42] Remove highcharts destroy() and use tabChart object

---
 js/server_status.js | 27 +++++++++++++--------------
 1 file changed, 13 insertions(+), 14 deletions(-)

diff --git a/js/server_status.js b/js/server_status.js
index 3c1f9761a3..39e9bab95f 100644
--- a/js/server_status.js
+++ b/js/server_status.js
@@ -119,7 +119,6 @@ $(function() {
     var tabStatus = new Object();
     // Holds the current chart instances for each tab
     var tabChart = new Object();
-    var currentCharts = new Object();
     // Holds current live charts' timeouts
     var chart_replot_timers = new Object();
 
@@ -252,7 +251,7 @@ $(function() {
             
             setupLiveChart($tab, this, getSettings('traffic'));
             var set_previous = getCurrentDataSet($tab, 'traffic');
-            currentCharts[$tab.attr('id')] = $.jqplot($tab.attr('id') + '_chart_cnt', [[[0,0]],[[0,0]]], getSettings('traffic'));
+            tabChart[$tab.attr('id')] = $.jqplot($tab.attr('id') + '_chart_cnt', [[[0,0]],[[0,0]]], getSettings('traffic'));
             recursiveTimer($tab, 'traffic');
             if (tabstat == 'liveconnections') {
                 $tab.find('.buttonlinks a.liveconnectionsLink').html(PMA_messages['strLiveConnChart']);
@@ -275,7 +274,7 @@ $(function() {
 
             setupLiveChart($tab, this, getSettings('proc'));
             var set_previous = getCurrentDataSet($tab, 'proc');
-            currentCharts[$tab.attr('id')] = $.jqplot($tab.attr('id') + '_chart_cnt', [[[0,0]],[[0,0]]], getSettings('proc'));
+            tabChart[$tab.attr('id')] = $.jqplot($tab.attr('id') + '_chart_cnt', [[[0,0]],[[0,0]]], getSettings('proc'));
             recursiveTimer($tab, 'proc');
             if (tabstat == 'livetraffic') {
                 $tab.find('.buttonlinks a.livetrafficLink').html(PMA_messages['strLiveTrafficChart']);
@@ -296,7 +295,7 @@ $(function() {
 
             setupLiveChart($tab, this, getSettings('queries'));
             var set_previous = getCurrentDataSet($tab, 'queries');
-            currentCharts[$tab.attr('id')] = $.jqplot($tab.attr('id') + '_chart_cnt', [[0,0]], getSettings('queries'));
+            tabChart[$tab.attr('id')] = $.jqplot($tab.attr('id') + '_chart_cnt', [[0,0]], getSettings('queries'));
             recursiveTimer($tab, 'queries');
             tabStatus[$tab.attr('id')] = 'livequeries';
 
@@ -416,16 +415,16 @@ $(function() {
             series[$tab.attr('id')][0].push(data_set[0]);
             series[$tab.attr('id')][1].push(data_set[1]);
             // update data set
-            currentCharts[$tab.attr('id')].series[0].data = series[$tab.attr('id')][0];
-            currentCharts[$tab.attr('id')].series[1].data = series[$tab.attr('id')][1];
+            tabChart[$tab.attr('id')].series[0].data = series[$tab.attr('id')][0];
+            tabChart[$tab.attr('id')].series[1].data = series[$tab.attr('id')][1];
         }
         else if(type == 'queries') {
             // there is just one line to be plotted
             series[$tab.attr('id')][0].push(data_set[0]);
             // update data set
-            currentCharts[$tab.attr('id')].series[0].data = series[$tab.attr('id')][0];
+            tabChart[$tab.attr('id')].series[0].data = series[$tab.attr('id')][0];
         }
-        currentCharts[$tab.attr('id')].resetAxesScale();
+        tabChart[$tab.attr('id')].resetAxesScale();
         var current_time = new Date().getTime();
         var data_points = $('.dataPointsNumber :selected', $tab).val();
         var refresh_rate = $('.refreshRate :selected', $tab).val() * 1000;
@@ -434,11 +433,11 @@ $(function() {
         var interval = (((current_time - minX)/data_points) / 1000);
         interval = (data_points > 20) ? (((current_time - minX)/20) / 1000) : interval;
         // update chart options
-        currentCharts[$tab.attr('id')]['axes']['xaxis']['max'] = current_time;
-        currentCharts[$tab.attr('id')]['axes']['xaxis']['min'] = minX;
-        currentCharts[$tab.attr('id')]['axes']['xaxis']['tickInterval'] = interval + " seconds";
+        tabChart[$tab.attr('id')]['axes']['xaxis']['max'] = current_time;
+        tabChart[$tab.attr('id')]['axes']['xaxis']['min'] = minX;
+        tabChart[$tab.attr('id')]['axes']['xaxis']['tickInterval'] = interval + " seconds";
         // replot
-        currentCharts[$tab.attr('id')].replot();
+        tabChart[$tab.attr('id')].replot();
     }
 
     function setupLiveChart($tab, link, settings) {
@@ -447,7 +446,7 @@ $(function() {
             if (tabStatus[$tab.attr('id')] != 'static') {
                 clearTimeout(chart_activeTimeouts[$tab.attr('id') + "_chart_cnt"]);
                 chart_activeTimeouts[$tab.attr('id') + "_chart_cnt"] = null;
-                tabChart[$tab.attr('id')].destroy();
+                delete tabChart[$tab.attr('id')];
                 // Also reset the select list
                 $tab.find('.buttonlinks select').get(0).selectedIndex = 2;
             }
@@ -470,7 +469,7 @@ $(function() {
             $tab.find('.tabInnerContent').show();
             $tab.find('div#' + $tab.attr('id') + '_chart_cnt').remove();
             tabStatus[$tab.attr('id')] = 'static';
-            tabChart[$tab.attr('id')].destroy();
+            delete tabChart[$tab.attr('id')];
             $tab.find('.buttonlinks a.tabRefresh').show();
             $tab.find('.buttonlinks select').get(0).selectedIndex = 2;
             $tab.find('.buttonlinks .refreshList').hide();

From aef3a13b4d25bee5b145d3d4568fac7942838f57 Mon Sep 17 00:00:00 2001
From: Atul Pratap Singh <atulpratapsingh05@gmail.com>
Date: Sat, 18 Aug 2012 17:44:16 +0530
Subject: [PATCH 40/42] Replot charts on switching tabs

---
 js/server_status.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/js/server_status.js b/js/server_status.js
index 39e9bab95f..2b2154ae52 100644
--- a/js/server_status.js
+++ b/js/server_status.js
@@ -148,7 +148,13 @@ $(function() {
             if (!$(ui.tab.hash).data('init-done')) {
                 initTab($(ui.tab.hash), null);
             }
-
+            // Replot on tab switching
+            if (ui.tab.hash == '#statustabs_traffic' && tabChart['statustabs_traffic'] != null) {
+                recursiveTimer($('#statustabs_traffic'), "traffic");
+            }
+            else if (ui.tab.hash == '#statustabs_queries' && tabChart['statustabs_queries'] != null) {
+                recursiveTimer($('#statustabs_queries'), "queries");
+            }
             // Load Server status monitor
             if (ui.tab.hash == '#statustabs_charting' && ! monitorLoaded) {
                 $('div#statustabs_charting').append( //PMA_messages['strLoadingMonitor'] + ' ' +

From 29bd03f21a193d290a8732a64038ff88bb5de8ab Mon Sep 17 00:00:00 2001
From: Atul Pratap Singh <atulpratapsingh05@gmail.com>
Date: Sat, 18 Aug 2012 18:58:34 +0530
Subject: [PATCH 41/42] Fix delay on refresh rate change

---
 js/server_status.js | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/js/server_status.js b/js/server_status.js
index 2b2154ae52..aa9a962721 100644
--- a/js/server_status.js
+++ b/js/server_status.js
@@ -198,8 +198,19 @@ $(function() {
     // Handles refresh rate changing
     $('.buttonlinks .refreshRate').change(function() {
 
-        var chart = tabChart[$(this).parents('div.ui-tabs-panel').attr('id')];
+        var $tab = $(this).parents('div.ui-tabs-panel');
+        clearTimeout(chart_replot_timers[$tab.attr('id')]);
+        var tabstat = tabStatus[$tab.attr('id')];
 
+        if(tabstat == 'livequeries') {
+            recursiveTimer($tab, 'queries');
+        } else if(tabstat == 'livetraffic') {
+            recursiveTimer($tab, 'traffic');
+        } else if(tabstat == 'liveconnections') {
+            recursiveTimer($tab, 'proc');
+        }
+
+        var chart = tabChart[$(this).parents('div.ui-tabs-panel').attr('id')];
         // Clear current timeout and set timeout with the new refresh rate
         clearTimeout(chart_activeTimeouts[chart.options.chart.renderTo]);
         if (chart.options.realtime.postRequest) {

From 935e8fd3669428756e31dc2a8c3aaf8d27f0d06b Mon Sep 17 00:00:00 2001
From: Atul Pratap Singh <atulpratapsingh05@gmail.com>
Date: Mon, 20 Aug 2012 08:12:01 +0530
Subject: [PATCH 42/42] Initiate porting monitor tab to jqplot

---
 js/server_status_monitor.js | 39 +++++++++++++++++++++++++++++++------
 1 file changed, 33 insertions(+), 6 deletions(-)

diff --git a/js/server_status_monitor.js b/js/server_status_monitor.js
index 64c83dcc30..e5c160d87f 100644
--- a/js/server_status_monitor.js
+++ b/js/server_status_monitor.js
@@ -1074,6 +1074,27 @@ $(function() {
             $.extend(true, settings, chartObj.settings);
         }
 
+        var settings1 = {
+            axes: {
+                xaxis: {
+                    renderer: $.jqplot.DateAxisRenderer,
+                    tickOptions: {
+                        formatString: '%H:%M:%S'
+                    }
+                },
+                yaxis: {
+                    autoscale:true,
+                    label: PMA_messages['strTotalCount'],
+                    labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
+                }
+            },
+            seriesDefaults: {
+                rendererOptions: {
+                    smooth: true
+                }
+            }
+        };
+
         if ($('#' + settings.chart.renderTo).length == 0) {
             var numCharts = $('table#chartGrid .monitorChart').length;
 
@@ -1084,7 +1105,8 @@ $(function() {
             $('table#chartGrid tr:last').append('<td><div class="ui-state-default monitorChart" id="' + settings.chart.renderTo + '"></div></td>');
         }
 
-        chartObj.chart = PMA_createChart(settings);
+        //chartObj.chart = PMA_createChart(settings);
+        chartObj.chart = $.jqplot(settings.chart.renderTo, [[0,0]], settings1);
         chartObj.numPoints = 0;
         
         if (initialize != true) {
@@ -1217,8 +1239,7 @@ $(function() {
                         runtime.xmax += diff;
                     }
 
-                    elem.chart.xAxis[0].setExtremes(runtime.xmin, runtime.xmax, false);
-
+                    //elem.chart.xAxis[0].setExtremes(runtime.xmin, runtime.xmax, false);
                     /* Calculate y value */
                     
                     // If transform function given, use it
@@ -1249,19 +1270,25 @@ $(function() {
                     
                     // Set y value, if defined
                     if (value != undefined) {
-                        elem.chart.series[j].addPoint(
+                        /*elem.chart.series[j].addPoint(
                             { x: chartData.x, y: value },
                             false,
                             elem.numPoints >= runtime.gridMaxPoints
-                        );
+                        );*/
+                        elem.chart.series[0].data.push([chartData.x, value]);
                     }
                 }
 
+                // update chart options
+                var interval = (((runtime.xmax - runtime.xmin)/runtime.gridMaxPoints) / 1000);
+                elem.chart['axes']['xaxis']['max'] = runtime.xmax;
+                elem.chart['axes']['xaxis']['min'] = runtime.xmin;
+                elem.chart['axes']['xaxis']['tickInterval'] = interval + " seconds";
                 i++;
-
                 runtime.charts[orderKey].numPoints++;
                 if (runtime.redrawCharts) {
                     elem.chart.redraw();
+                    elem.chart.replot();
                 }
             });