- Dynamic chart with for the server status chart

- Table chart replaced with a Highcharts generated chart that also behaves somewhat more intellegently

1 files changed, 53 insertions, 100 deletions

diff --git a/tbl_chart.php b/tbl_chart.php
index f4b8bd3adb..c47b0f788d 100644
--- a/tbl_chart.php
+++ b/tbl_chart.php
@@ -19,7 +19,16 @@ if (! defined('PMA_NO_VARIABLES_IMPORT')) {
  */
 require_once './libraries/common.inc.php';
 
-$GLOBALS['js_include'][] = 'pMap.js';
+$GLOBALS['js_include'][] = 'tbl_chart.js';
+
+$GLOBALS['js_include'][] = 'highcharts/highcharts.js';
+/* Files required for chart exporting */
+$GLOBALS['js_include'][] = 'highcharts/exporting.js';
+$GLOBALS['js_include'][] = 'canvg/canvg.js';
+$GLOBALS['js_include'][] = 'canvg/rgbcolor.js';
+
+
+
 
 /**
  * Runs common work
@@ -72,113 +81,57 @@ $url_params['reload'] = 1;
 /**
  * Displays the page
  */
+// pma_token/url_query needed for chart export
 ?>
+<script type="text/javascript">
+pma_token = '<?php echo $_SESSION[' PMA_token ']; ?>';
+url_query = '<?php echo $url_query;?>';
+</script>
 <!-- Display Chart options -->
 <div id="div_view_options">
 <form method="post" action="tbl_chart.php">
 <?php echo PMA_generate_common_hidden_inputs($url_params); ?>
 <fieldset>
     <legend><?php echo __('Display chart'); ?></legend>
-
-    <div style="float: right">
-        <?php echo $chart; ?>
+    <div style="float:left;">
+        <input type="radio" name="chartType" value="bar"><?php echo __('Bar'); ?>
+        <input type="radio" name="chartType" value="column"><?php echo __('Column'); ?>
+        <input type="radio" name="chartType" value="line" checked><?php echo __('Line'); ?>
+        <input type="radio" name="chartType" value="spline"><?php echo __('Spline'); ?>
+        <input type="radio" name="chartType" value="pie"><?php echo __('Pie'); ?>
+        <span class="barStacked" style="display:none;">
+        <input type="checkbox" name="barStacked" value="1"><?php echo __('Stacked'); ?>
+        </span>
+        <br>
+        <input type="text" name="chartTitle" value="<?php echo __('Chart title'); ?>">
+        <?php echo __('X-Axis:'); ?> <select name="chartXAxis">
+            <?php
+            $yaxis=-1;
+            $keys = array_keys($data[0]);
+            foreach($keys as $idx=>$key) {
+                if($yaxis==-1 && ($idx==count($data[0])-1 || preg_match("/(date|time)/i",$key))) {
+                    echo '<option value="'.$idx.'" selected>'.$key.'</option>';
+                    $yaxis=$idx;
+                } else {
+                    echo '<option value="'.$idx.'">'.$key.'</option>';
+                }
+            }
+            
+            ?>
+        </select>
+    </div>
+    <div style="float:left; padding-left:40px;">
+        <?php echo __('X-Axis label:'); ?> <input style="margin-top:0;" type="text" name="xaxis_label" value="<?php echo $keys[$yaxis]; ?>"><br>
+        <?php echo __('Y-Axis label:'); ?> <input type="text" name="yaxis_label" value="<?php echo __('Y Values'); ?>">
+    </div>
+    <p style="clear:both;">&nbsp;</p>
+    <div id="resizer" style="width:600px; height:400px;">
+        <div id="inner-resizer">
+            <div id="querychart">
+                <?php echo json_encode($data); ?>
+            </div>
+        </div>
     </div>
-
-    <input type="hidden" name="sql_query" id="sql_query" value="<?php echo htmlspecialchars($sql_query); ?>" />
-
-    <table>
-    <tr><td><label for="width"><?php echo __("Width"); ?></label></td>
-        <td><input type="text" name="chartSettings[width]" id="width" value="<?php echo (isset($chartSettings['width']) ? htmlspecialchars($chartSettings['width']) : ''); ?>" /></td>
-    </tr>
-
-    <tr><td><label for="height"><?php echo __("Height"); ?></label></td>
-        <td><input type="text" name="chartSettings[height]" id="height" value="<?php echo (isset($chartSettings['height']) ? htmlspecialchars($chartSettings['height']) : ''); ?>" /></td>
-    </tr>
-
-    <tr><td><label for="titleText"><?php echo __("Title"); ?></label></td>
-        <td><input type="text" name="chartSettings[titleText]" id="titleText" value="<?php echo (isset($chartSettings['titleText']) ? htmlspecialchars($chartSettings['titleText']) : ''); ?>" /></td>
-    </tr>
-
-    <?php if ($chartSettings['type'] != 'pie' && $chartSettings['type'] != 'radar') { ?>
-    <tr><td><label for="xLabel"><?php echo __("X Axis label"); ?></label></td>
-        <td><input type="text" name="chartSettings[xLabel]" id="xLabel" value="<?php echo (isset($chartSettings['xLabel']) ? htmlspecialchars($chartSettings['xLabel']) : ''); ?>" /></td>
-    </tr>
-
-    <tr><td><label for="yLabel"><?php echo __("Y Axis label"); ?></label></td>
-        <td><input type="text" name="chartSettings[yLabel]" id="yLabel" value="<?php echo (isset($chartSettings['yLabel']) ? htmlspecialchars($chartSettings['yLabel']) : ''); ?>" /></td>
-    </tr>
-    <?php } ?>
-
-    <tr><td><label for="areaMargins"><?php echo __("Area margins"); ?></label></td>
-        <td>
-            <input type="text" name="chartSettings[areaMargins][]" size="2" value="<?php echo (isset($chartSettings['areaMargins'][0]) ? htmlspecialchars($chartSettings['areaMargins'][0]) : ''); ?>" />
-            <input type="text" name="chartSettings[areaMargins][]" size="2" value="<?php echo (isset($chartSettings['areaMargins'][1]) ? htmlspecialchars($chartSettings['areaMargins'][1]) : ''); ?>" />
-            <input type="text" name="chartSettings[areaMargins][]" size="2" value="<?php echo (isset($chartSettings['areaMargins'][2]) ? htmlspecialchars($chartSettings['areaMargins'][2]) : ''); ?>" />
-            <input type="text" name="chartSettings[areaMargins][]" size="2" value="<?php echo (isset($chartSettings['areaMargins'][3]) ? htmlspecialchars($chartSettings['areaMargins'][3]) : ''); ?>" />
-        </td>
-    </tr>
-
-    <?php if ($chartSettings['legend'] == true) { ?>
-    <tr><td><label for="legendMargins"><?php echo __("Legend margins"); ?></label></td>
-        <td>
-            <input type="text" name="chartSettings[legendMargins][]" size="2" value="<?php echo htmlspecialchars($chartSettings['legendMargins'][0]); ?>" />
-            <input type="text" name="chartSettings[legendMargins][]" size="2" value="<?php echo htmlspecialchars($chartSettings['legendMargins'][1]); ?>" />
-            <input type="text" name="chartSettings[legendMargins][]" size="2" value="<?php echo htmlspecialchars($chartSettings['legendMargins'][2]); ?>" />
-            <input type="text" name="chartSettings[legendMargins][]" size="2" value="<?php echo htmlspecialchars($chartSettings['legendMargins'][3]); ?>" />
-        </td>
-    </tr>
-    <?php } ?>
-
-    <tr><td><label for="type"><?php echo __("Type"); ?></label></td>
-        <td>
-            <input type="radio" name="chartSettings[type]" value="bar" <?php echo ($chartSettings['type'] == 'bar' ? 'checked' : ''); ?>><?php echo __('Bar'); ?>
-            <input type="radio" name="chartSettings[type]" value="line" <?php echo ($chartSettings['type'] == 'line' ? 'checked' : ''); ?>><?php echo __('Line'); ?>
-            <input type="radio" name="chartSettings[type]" value="radar" <?php echo ($chartSettings['type'] == 'radar' ? 'checked' : ''); ?>><?php echo __('Radar'); ?>
-            <?php if ($chartSettings['multi'] == false) { ?>
-            <input type="radio" name="chartSettings[type]" value="pie" <?php echo ($chartSettings['type'] == 'pie' ? 'checked' : ''); ?>><?php echo __('Pie'); ?>
-            <?php } ?>
-        </td>
-    </tr>
-
-    <?php if ($chartSettings['type'] == 'bar' && isset($chartSettings['multi']) && $chartSettings['multi'] == true) { ?>
-    <tr><td><label for="barType"><?php echo __("Bar type"); ?></label></td>
-        <td>
-            <input type="radio" name="chartSettings[barType]" value="stacked" <?php echo ($chartSettings['barType'] == 'stacked' ? 'checked' : ''); ?>><?php echo __('Stacked'); ?>
-            <input type="radio" name="chartSettings[barType]" value="multi" <?php echo ($chartSettings['barType'] == 'multi' ? 'checked' : ''); ?>><?php echo __('Multi'); ?>
-        </td>
-    </tr>
-    <?php } ?>
-
-    <tr><td><label for="continuous"><?php echo __("Continuous image"); ?></label></td>
-        <td>
-            <input type="checkbox" name="chartSettings[continuous]" id="continuous" <?php echo ($chartSettings['continuous'] == 'on' ? 'checked="checked"' : ''); ?>>
-        <?php echo PMA_showHint(PMA_sanitize(__('For compatibility reasons the chart image is segmented by default, select this to draw the whole chart in one image.'))) ?>
-        </td>
-    </tr>
-
-    <tr><td><label for="fontSize"><?php echo __("Font size"); ?></label></td>
-        <td><input type="text" name="chartSettings[fontSize]" id="fontSize" value="<?php echo (isset($chartSettings['fontSize']) ? htmlspecialchars($chartSettings['fontSize']) : ''); ?>" /></td>
-    </tr>
-
-    <?php if ($chartSettings['type'] == 'radar') { ?>
-    <tr><td colspan="2">
-        <p>
-            <?php echo __('When drawing a radar chart all values are normalized to a range [0..10].'); ?>
-        </p>
-    </td></tr>
-    <?php } ?>
-
-    <tr><td colspan="2">
-        <p>
-            <?php echo __('Note that not every result table can be put to the chart. See <a href="./Documentation.html#faq6_29" target="Documentation">FAQ 6.29</a>'); ?>
-        </p>
-    </td></tr>
-
-    </table>
-
-</fieldset>
-<fieldset class="tblFooters">
-    <input type="submit" name="displayChart" value="<?php echo __('Redraw'); ?>" />
 </fieldset>
 </form>
 </div>