Server status queries chart, with jqplot

Fix needed: legend wrongly displayed over the right border

3 files changed, 8 insertions, 38 deletions

diff --git a/js/functions.js b/js/functions.js
index b942bcd6f9..59043c5369 100644
--- a/js/functions.js
+++ b/js/functions.js
@@ -1686,7 +1686,7 @@ function PMA_createChart(passedSettings)
 
 
 /*
- * Creates a Profiling Chart. Used in server_status.js
+ * Creates a Profiling Chart. Used in server_status_monitor.js
  */
 function PMA_createProfilingChart(data, options)
 {
@@ -1725,9 +1725,9 @@ function PMA_createProfilingChart(data, options)
 /*
  * Creates a Profiling Chart with jqplot. Used in sql.js
  */
-function PMA_createProfilingChartJqplot(data, options)
+function PMA_createProfilingChartJqplot(target, data)
 {
-    return $.jqplot('profilingchart', [data],
+    return $.jqplot(target, [data],
         {
             seriesDefaults: {
                 renderer: $.jqplot.PieRenderer,
diff --git a/js/server_status.js b/js/server_status.js
index 5869093bcc..438ed416c5 100644
--- a/js/server_status.js
+++ b/js/server_status.js
@@ -452,40 +452,10 @@ $(function() {
                     cdata.push([key, parseInt(value)]);
                 });
 
-                queryPieChart = PMA_createChart({
-                    chart: {
-                        renderTo: 'serverstatusquerieschart'
-                    },
-                    title: {
-                        text: '',
-                        margin: 0
-                    },
-                    series: [{
-                        type: 'pie',
-                        name: PMA_messages['strChartQueryPie'],
-                        data: cdata
-                    }],
-                    plotOptions: {
-                        pie: {
-                            allowPointSelect: true,
-                            cursor: 'pointer',
-                            dataLabels: {
-                                enabled: true,
-                                formatter: function() {
-                                    return '<b>' + this.point.name +'</b><br/> ' + 
-                                            Highcharts.numberFormat(this.percentage, 2) + ' %';
-                               }
-                            }
-                        }
-                    },
-                    tooltip: {
-                        formatter: function() {
-                            return '<b>' + this.point.name + '</b><br/>' + 
-                                    Highcharts.numberFormat(this.y, 2) + '<br/>(' + 
-                                    Highcharts.numberFormat(this.percentage, 2) + ' %)';
-                        }
-                    }
-                });
+                queryPieChart = PMA_createProfilingChartJqplot(
+                    'serverstatusquerieschart', 
+                    cdata
+                );
                 initTableSorter(tab.attr('id'));
                 break;
 
diff --git a/js/sql.js b/js/sql.js
index 57c28e5926..630b47f7fa 100644
--- a/js/sql.js
+++ b/js/sql.js
@@ -610,7 +610,7 @@ function makeProfilingChart()
     // Prevent the user from seeing the JSON code
     $('div#profilingchart').html('').show();
 
-    PMA_createProfilingChartJqplot(data);
+    PMA_createProfilingChartJqplot('profilingchart', data);
 }