Restructured code. This allows more chart types and removes some code duplication. Added line charts.

libraries/chart.lib.php

@@ -3,8 +3,10 @@
 require_once './libraries/chart/pma_ofc_pie.php';
 
 require_once './libraries/chart/pma_pchart_pie.php';
-require_once './libraries/chart/pma_pchart_bar.php';
+require_once './libraries/chart/pma_pchart_single_bar.php';
-require_once './libraries/chart/pma_pchart_stacked.php';
+require_once './libraries/chart/pma_pchart_stacked_bar.php';
+require_once './libraries/chart/pma_pchart_single_line.php';
+require_once './libraries/chart/pma_pchart_multi_line.php';
 
 /**
  * Chart functions used to generate various types
@@ -59,6 +61,8 @@ function PMA_chart_results($data, &$chartSettings)
 {
     $chartData = array();
     $chart = null;
+
+    // set default title if not already set
     if (!empty($chartSettings['title'])) {
         $chartTitle = $chartSettings['title'];
     }
@@ -66,6 +70,11 @@ function PMA_chart_results($data, &$chartSettings)
         $chartTitle = __('Query results');
     }
 
+    // set default type if not already set
+    if (empty($chartSettings['type'])) {
+        $chartSettings['type'] = 'bar';
+    }
+
     if (!isset($data[0])) {
         // empty data
         return __('No data found for the chart.');
@@ -83,7 +92,16 @@ function PMA_chart_results($data, &$chartSettings)
             }
         }
 
-        $chart = new PMA_pChart_bar($chartTitle, $chartData, $chartSettings);
+        switch ($chartSettings['type'])
+        {
+            case 'bar':
+            default:
+                $chart = new PMA_pChart_single_bar($chartTitle, $chartData, $chartSettings);
+                break;
+            case 'line':            
+                $chart = new PMA_pChart_single_line($chartTitle, $chartData, $chartSettings);
+                break;
+        }
     }
     else if (count($data[0]) == 3) {
         // Three columns (x axis, y axis, series) in every row.
@@ -122,7 +140,16 @@ function PMA_chart_results($data, &$chartSettings)
             }
         }
 
-        $chart = new PMA_pChart_stacked($chartTitle, $chartData, $chartSettings);
+        switch ($chartSettings['type'])
+        {
+            case 'bar':
+            default:
+                $chart = new PMA_pChart_stacked_bar($chartTitle, $chartData, $chartSettings);
+                break;
+            case 'line':
+                $chart = new PMA_pChart_multi_line($chartTitle, $chartData, $chartSettings);
+                break;
+        }
     }
     else {
         // unknown data

libraries/chart/pma_pchart_bar.php

@@ -1,88 +0,0 @@
-<?php
-
-require_once 'pma_pchart_chart.php';
-
-define('TOP', 0);
-define('RIGHT', 1);
-define('BOTTOM', 2);
-define('LEFT', 3);
-
-class PMA_pChart_bar extends PMA_pChart_Chart
-{
-    public function __construct($titleText, $data, $options = null)
-    {
-        parent::__construct($titleText, $data, $options);
-
-        $this->settings['labelHeight'] = 20;
-
-        // as in CSS (top, right, bottom, left)
-        $this->settings['areaMargins'] = array(20, 20, 40, 60);
-    }
-
-    protected function prepareDataSet()
-    {
-        $values = array_values($this->data);
-        $keys = array_keys($this->data);
-
-        // Dataset definition
-        $this->dataSet = new pData;
-        $this->dataSet->AddPoint($values[1], "Values");
-        $this->dataSet->AddPoint($values[0], "Keys");
-        $this->dataSet->AddAllSeries();
-        //$DataSet->RemoveSerie("Serie3");
-        $this->dataSet->SetAbsciseLabelSerie("Keys");
-
-        $xLabel = $this->getXLabel();
-        if (empty($xLabel)) {
-            $xLabel = $keys[0];
-        }
-        $this->dataSet->SetXAxisName($xLabel);
-
-        $yLabel = $this->getYLabel();
-        if (empty($yLabel)) {
-            $yLabel = $keys[1];
-        }
-        $this->dataSet->SetYAxisName($yLabel);
-        //$DataSet->SetYAxisUnit("°C");
-        //$DataSet->SetXAxisUnit("h");
-    }
-
-    protected function prepareChart()
-    {
-        // Initialise the graph
-        $this->chart = new pChart($this->getWidth(), $this->getHeight());
-        $this->chart->drawGraphAreaGradient(132,173,131,50,TARGET_BACKGROUND);
-
-        $this->chart->setFontProperties($this->getFontPath().'tahoma.ttf', 8);
-        $this->chart->setGraphArea(
-                $this->getAreaMargin(LEFT),
-                $this->getLabelHeight() + $this->getAreaMargin(TOP),
-                $this->getWidth() - $this->getAreaMargin(RIGHT),
-                $this->getHeight() - $this->getAreaMargin(BOTTOM)
-        );
-        $this->chart->drawGraphArea(213,217,221,FALSE);
-        $this->chart->drawScale($this->dataSet->GetData(),$this->dataSet->GetDataDescription(),SCALE_ADDALL,213,217,221,TRUE,0,2,TRUE);
-        $this->chart->drawGraphAreaGradient(163,203,167,50);
-        $this->chart->drawGrid(4,TRUE,230,230,230,20);
-
-        // Draw the bar chart
-        $this->chart->drawStackedBarGraph($this->dataSet->GetData(),$this->dataSet->GetDataDescription(),70);
-
-        // Draw the title
-        $this->chart->drawTextBox(0,0,$this->getWidth(),$this->getLabelHeight(),$this->titleText,0,255,255,255,ALIGN_CENTER,TRUE,0,0,0,30);
-
-        $this->chart->addBorder(2);
-    }
-
-    protected function getLabelHeight()
-    {
-        return $this->settings['labelHeight'];
-    }
-
-    protected function getAreaMargin($side)
-    {
-        return $this->settings['areaMargins'][$side];
-    }
-}
-
-?>

libraries/chart/pma_pchart_chart.php

@@ -1,5 +1,10 @@
 <?php
 
+define('TOP', 0);
+define('RIGHT', 1);
+define('BOTTOM', 2);
+define('LEFT', 3);
+
 require_once 'pma_chart.php';
 
 include "pChart/pData.class";
@@ -26,10 +31,79 @@ abstract class PMA_pChart_Chart extends PMA_Chart
         $this->data = $data;
 
         $this->settings['fontPath'] = './libraries/chart/pChart/fonts/';
+
+        $this->settings['scale'] = SCALE_ADDALLSTART0;
+
+        $this->settings['labelHeight'] = 20;
+
+        // as in CSS (top, right, bottom, left)
+        $this->settings['areaMargins'] = array(20, 20, 40, 60);
+
+        // create pChart object
+        $this->chart = new pChart($this->getWidth(), $this->getHeight());
+
+        // create pData object
+        $this->dataSet = new pData;
+
+        // initialize colors
+        foreach ($this->getColors() as $key => $color) {
+            $this->chart->setColorPalette(
+                    $key,
+                    hexdec(substr($color, 1, 2)),
+                    hexdec(substr($color, 3, 2)),
+                    hexdec(substr($color, 5, 2))
+            );
+        }
     }
 
     abstract protected function prepareDataSet();
-    abstract protected function prepareChart();
+
+    protected function prepareChart()
+    {
+        $this->drawBackground();
+        $this->drawChart();
+    }
+
+    protected function drawBackground()
+    {
+        $this->drawCommon();
+        $this->drawTitle();
+        $this->setGraphAreaDimensions();
+        $this->drawGraphArea();
+    }
+
+    protected function drawCommon()
+    {
+        $this->chart->setFontProperties($this->getFontPath().'tahoma.ttf', 8);
+        $this->chart->drawGraphAreaGradient(132,173,131,50,TARGET_BACKGROUND);
+        $this->chart->addBorder(2);
+    }
+
+    protected function drawTitle()
+    {
+        // Draw the title
+        $this->chart->drawTextBox(0,0,$this->getWidth(),$this->getLabelHeight(),$this->titleText,0,255,255,255,ALIGN_CENTER,TRUE,0,0,0,30);
+    }
+
+    protected function setGraphAreaDimensions()
+    {
+        $this->chart->setGraphArea(
+                $this->getAreaMargin(LEFT),
+                $this->getLabelHeight() + $this->getAreaMargin(TOP),
+                $this->getWidth() - $this->getAreaMargin(RIGHT),
+                $this->getHeight() - $this->getAreaMargin(BOTTOM)
+        );
+    }
+
+    protected function drawGraphArea()
+    {
+        $this->chart->drawGraphArea(213,217,221,FALSE);
+        $this->chart->drawScale($this->dataSet->GetData(),$this->dataSet->GetDataDescription(),$this->getScale(),213,217,221,TRUE,0,2,TRUE);
+        $this->chart->drawGraphAreaGradient(163,203,167,50);
+        $this->chart->drawGrid(4,TRUE,230,230,230,20);
+    }
+
+    protected abstract function drawChart();
 
     protected function render()
     {
@@ -55,10 +129,25 @@ abstract class PMA_pChart_Chart extends PMA_Chart
         }
     }
 
+    protected function getLabelHeight()
+    {
+        return $this->settings['labelHeight'];
+    }
+
+    protected function getAreaMargin($side)
+    {
+        return $this->settings['areaMargins'][$side];
+    }
+
     protected function getFontPath()
     {
         return $this->settings['fontPath'];
     }
+
+    protected function getScale()
+    {
+        return $this->settings['scale'];
+    }
 }
 
 ?>

libraries/chart/pma_pchart_multi.php

@@ -0,0 +1,80 @@
+<?php
+
+require_once 'pma_pchart_chart.php';
+
+/*
+ * Base class for every chart that uses multiple series.
+ * All of these charts will require legend box.
+ */
+abstract class PMA_pChart_multi extends PMA_pChart_chart
+{
+    public function __construct($titleText, $data, $options = null)
+    {
+        parent::__construct($titleText, $data, $options);
+
+        // as in CSS (top, right, bottom, left)
+        $this->settings['legendMargins'] = array(20, 10, 0, 0);
+    }
+
+    protected function prepareDataSet()
+    {
+        $values = array_values($this->data);
+        $keys = array_keys($this->data);
+
+        // Dataset definition
+        $this->dataSet->AddPoint($values[0], "Keys");
+
+        $i = 0;
+        foreach ($values[1] as $seriesName => $seriesData) {
+            $this->dataSet->AddPoint($seriesData, "Values".$i);
+            $this->dataSet->SetSerieName($seriesName, "Values".$i);
+            $i++;
+        }
+        $this->dataSet->AddAllSeries();
+
+        $this->dataSet->RemoveSerie("Keys");
+        $this->dataSet->SetAbsciseLabelSerie("Keys");
+
+        $this->dataSet->SetXAxisName($keys[0]);
+        $this->dataSet->SetYAxisName($keys[1]);
+    }
+
+    protected function setGraphAreaDimensions()
+    {
+        $this->chart->setGraphArea(
+                $this->getAreaMargin(LEFT),
+                $this->getLabelHeight() + $this->getAreaMargin(TOP),
+                $this->getWidth() - $this->getAreaMargin(RIGHT) - $this->getLegendBoxWidth() - $this->getLegendMargin(LEFT) - $this->getLegendMargin(RIGHT),
+                $this->getHeight() - $this->getAreaMargin(BOTTOM)
+        );
+    }
+
+    protected function drawChart()
+    {
+        $this->drawLegend();
+    }
+
+    protected function drawLegend()
+    {
+        // Draw the legend
+        $this->chart->drawLegend(
+                $this->getWidth() - $this->getLegendMargin(RIGHT) - $this->getLegendBoxWidth(),
+                $this->getLabelHeight() + $this->getLegendMargin(TOP),
+                $this->dataSet->GetDataDescription(),
+                250,250,250,50,50,50
+        );
+    }
+
+    protected function getLegendMargin($side)
+    {
+        return $this->settings['legendMargins'][$side];
+    }
+
+    protected function getLegendBoxWidth()
+    {
+        $legendSize = $this->chart->getLegendBoxSize($this->dataSet->GetDataDescription());
+        return $legendSize[0];
+    }
+}
+
+?>

libraries/chart/pma_pchart_multi_line.php

@@ -0,0 +1,24 @@
+<?php
+
+require_once 'pma_pchart_multi.php';
+
+class PMA_pChart_multi_line extends PMA_pChart_multi
+{
+    public function __construct($titleText, $data, $options = null)
+    {
+        parent::__construct($titleText, $data, $options);
+
+        $this->settings['scale'] = SCALE_NORMAL;
+    }
+
+    protected function drawChart()
+    {
+        parent::drawChart();
+
+        // Draw the bar chart
+        $this->chart->drawLineGraph($this->dataSet->GetData(),$this->dataSet->GetDataDescription());
+        $this->chart->drawPlotGraph($this->dataSet->GetData(),$this->dataSet->GetDataDescription(),4,2,-1,-1,-1,TRUE);
+    }
+}
+
+?>

libraries/chart/pma_pchart_pie.php

@@ -1,77 +1,55 @@
 <?php
 
-require_once 'pma_pchart_chart.php';
+require_once 'pma_pchart_multi.php';
 
-class PMA_pChart_Pie extends PMA_pChart_Chart
+class PMA_pChart_Pie extends PMA_pChart_multi
 {
     public function __construct($titleText, $data, $options = null)
     {
         parent::__construct($titleText, $data, $options);
 
-        $this->settings['border1Width'] = 7;
+        $this->settings['areaMargins'] = array(20, 20, 20, 10);
-        $this->settings['border2Width'] = 8;
     }
 
     protected function prepareDataSet()
     {
         // Dataset definition 
-        $this->dataSet = new pData;
         $this->dataSet->AddPoint(array_values($this->data),"Values");
         $this->dataSet->AddPoint(array_keys($this->data),"Keys");
         $this->dataSet->AddAllSeries();
         $this->dataSet->SetAbsciseLabelSerie("Keys");
     }
 
-    protected function prepareChart()
+    protected function drawGraphArea()
     {
-        // Initialise the graph
+        $this->chart->drawGraphArea(213,217,221,FALSE);
-        $this->chart = new pChart($this->getWidth(), $this->getHeight());
+        $this->chart->drawGraphAreaGradient(163,203,167,50);
-        foreach ($this->getColors() as $key => $color) {
-            $this->chart->setColorPalette(
-                    $key,
-                    hexdec(substr($color, 1, 2)),
-                    hexdec(substr($color, 3, 2)),
-                    hexdec(substr($color, 5, 2))
-            );
-        }
-        $this->chart->setFontProperties($this->getFontPath().'tahoma.ttf', 8);
-        $this->chart->drawFilledRoundedRectangle(
-                $this->getBorder1Width(),
-                $this->getBorder1Width(),
-                $this->getWidth() - $this->getBorder1Width(),
-                $this->getHeight() - $this->getBorder1Width(),
-                5,
-                $this->getBgColorComp(0),
-                $this->getBgColorComp(1),
-                $this->getBgColorComp(2)
-                );
-        $this->chart->drawRoundedRectangle(
-                $this->getBorder2Width(),
-                $this->getBorder2Width(),
-                $this->getWidth() - $this->getBorder2Width(),
-                $this->getHeight() - $this->getBorder2Width(),
-                5,0,0,0);
-        
-        // Draw the pie chart
-        $this->chart->AntialiasQuality = 0;
-        $this->chart->setShadowProperties(2,2,200,200,200);
-        //$Test->drawFlatPieGraphWithShadow($DataSet->GetData(),$DataSet->GetDataDescription(),180,160,120,PIE_PERCENTAGE,8);
-        //$Test->drawBasicPieGraph($DataSet->GetData(),$DataSet->GetDataDescription(),180,160,120,PIE_PERCENTAGE,255,255,218,2);
-        $this->chart->drawPieGraph($this->dataSet->GetData(),$this->dataSet->GetDataDescription(),180,160,120,PIE_PERCENTAGE,FALSE,60,30,10,1);
-        $this->chart->clearShadow();
-
-        $this->chart->drawTitle(20,20,$this->titleText,0,0,0);
-        $this->chart->drawPieLegend(350,15,$this->dataSet->GetData(),$this->dataSet->GetDataDescription(),250,250,250);
     }
 
-    protected function getBorder1Width()
+    protected function drawChart()
     {
-        return $this->settings['border1Width'];
+        parent::drawChart();
+
+        $this->chart->drawPieGraph(
+                $this->dataSet->GetData(),
+                $this->dataSet->GetDataDescription(),
+                180,160,120,PIE_PERCENTAGE,FALSE,60,30,10,1);
     }
 
-    protected function getBorder2Width()
+    protected function drawLegend()
     {
-        return $this->settings['border2Width'];
+        $this->chart->drawPieLegend(
+                $this->getWidth() - $this->getLegendMargin(RIGHT) - $this->getLegendBoxWidth(),
+                $this->getLabelHeight() + $this->getLegendMargin(TOP),
+                $this->dataSet->GetData(),
+                $this->dataSet->GetDataDescription(),
+                250,250,250);
+    }
+
+    protected function getLegendBoxWidth()
+    {
+        $legendSize = $this->chart->getPieLegendBoxSize($this->dataSet->GetData());
+        return $legendSize[0];
     }
 }
 

libraries/chart/pma_pchart_single.php

@@ -0,0 +1,43 @@
+<?php
+
+require_once 'pma_pchart_chart.php';
+
+/*
+ * Base class for every chart that uses only one series.
+ */
+abstract class PMA_pChart_single extends PMA_pChart_chart
+{
+    public function __construct($titleText, $data, $options = null)
+    {
+        parent::__construct($titleText, $data, $options);
+    }
+
+    protected function prepareDataSet()
+    {
+        $values = array_values($this->data);
+        $keys = array_keys($this->data);
+
+        // Dataset definition
+        $this->dataSet->AddPoint($values[1], "Values");
+        $this->dataSet->AddPoint($values[0], "Keys");
+        $this->dataSet->AddAllSeries();
+        //$DataSet->RemoveSerie("Serie3");
+        $this->dataSet->SetAbsciseLabelSerie("Keys");
+
+        $xLabel = $this->getXLabel();
+        if (empty($xLabel)) {
+            $xLabel = $keys[0];
+        }
+        $this->dataSet->SetXAxisName($xLabel);
+
+        $yLabel = $this->getYLabel();
+        if (empty($yLabel)) {
+            $yLabel = $keys[1];
+        }
+        $this->dataSet->SetYAxisName($yLabel);
+        //$DataSet->SetYAxisUnit("°C");
+        //$DataSet->SetXAxisUnit("h");
+    }
+}
+
+?>

libraries/chart/pma_pchart_single_bar.php

@@ -0,0 +1,21 @@
+<?php
+
+require_once 'pma_pchart_single.php';
+
+class PMA_pChart_single_bar extends PMA_pChart_single
+{
+    public function __construct($titleText, $data, $options = null)
+    {
+        parent::__construct($titleText, $data, $options);
+    }
+
+    protected function drawChart()
+    {
+        // Draw the bar chart
+        $this->chart->drawStackedBarGraph($this->dataSet->GetData(),$this->dataSet->GetDataDescription(),70);
+        //$this->chart->drawLineGraph($this->dataSet->GetData(),$this->dataSet->GetDataDescription());
+        //$this->chart->drawPlotGraph($this->dataSet->GetData(),$this->dataSet->GetDataDescription(),4,2,-1,-1,-1,TRUE);
+    }
+}
+
+?>

libraries/chart/pma_pchart_single_line.php

@@ -0,0 +1,20 @@
+<?php
+
+require_once 'pma_pchart_single.php';
+
+class PMA_pChart_single_line extends PMA_pChart_single
+{
+    public function __construct($titleText, $data, $options = null)
+    {
+        parent::__construct($titleText, $data, $options);
+    }
+
+    protected function drawChart()
+    {
+        // Draw the line chart
+        $this->chart->drawLineGraph($this->dataSet->GetData(),$this->dataSet->GetDataDescription());
+        $this->chart->drawPlotGraph($this->dataSet->GetData(),$this->dataSet->GetDataDescription(),4,2,-1,-1,-1,TRUE);
+    }
+}
+
+?>

libraries/chart/pma_pchart_stacked.php

@@ -1,82 +0,0 @@
-<?php
-
-require_once 'pma_pchart_bar.php';
-
-class PMA_pChart_stacked extends PMA_pChart_bar
-{
-    public function __construct($titleText, $data, $options = null)
-    {
-        parent::__construct($titleText, $data, $options);
-
-        $this->settings['legendLeftMargin'] = 10;
-    }
-
-    protected function prepareDataSet()
-    {
-        $values = array_values($this->data);
-        $keys = array_keys($this->data);
-
-        // Dataset definition
-        $this->dataSet = new pData;
-        $this->dataSet->AddPoint($values[0], "Keys");
-
-        $i = 0;
-        foreach ($values[1] as $seriesName => $seriesData) {            
-            $this->dataSet->AddPoint($seriesData, "Values".$i);
-            $this->dataSet->SetSerieName($seriesName, "Values".$i);
-            $i++;
-        }        
-        $this->dataSet->AddAllSeries();
-
-        $this->dataSet->RemoveSerie("Keys");
-        $this->dataSet->SetAbsciseLabelSerie("Keys");
-
-        $this->dataSet->SetXAxisName($keys[0]);
-        $this->dataSet->SetYAxisName($keys[1]);        
-    }
-
-    protected function prepareChart()
-    {
-        // Initialise the graph
-        $this->chart = new pChart($this->getWidth(), $this->getHeight());
-        $this->chart->drawGraphAreaGradient(132,173,131,50,TARGET_BACKGROUND);
-
-        $this->chart->setFontProperties($this->getFontPath().'tahoma.ttf', 8);
-
-        $legendSize = $this->chart->getLegendBoxSize($this->dataSet->GetDataDescription());
-
-        $this->chart->setGraphArea(
-                $this->getAreaMargin(LEFT),
-                $this->getLabelHeight() + $this->getAreaMargin(TOP),
-                $this->getWidth() - $this->getAreaMargin(RIGHT) - $legendSize[0],
-                $this->getHeight() - $this->getAreaMargin(BOTTOM)
-        );
-        $this->chart->drawGraphArea(213,217,221,FALSE);
-        $this->chart->drawScale($this->dataSet->GetData(),$this->dataSet->GetDataDescription(),SCALE_ADDALLSTART0,213,217,221,TRUE,0,2,TRUE);
-        $this->chart->drawGraphAreaGradient(163,203,167,50);
-        $this->chart->drawGrid(4,TRUE,230,230,230,20);
-        
-        // Draw the bar chart
-        $this->chart->drawStackedBarGraph($this->dataSet->GetData(),$this->dataSet->GetDataDescription(),70);
-
-        // Draw the title
-        $this->chart->drawTextBox(0,0,$this->getWidth(),$this->getLabelHeight(),$this->titleText,0,255,255,255,ALIGN_CENTER,TRUE,0,0,0,30);
-
-        // Draw the legend
-        $this->chart->drawLegend(
-                $this->getWidth() - $this->getAreaMargin(RIGHT) - $legendSize[0] + $this->getLegendMargin(LEFT),
-                $this->getLabelHeight() + $this->getAreaMargin(TOP),
-                $this->dataSet->GetDataDescription(),
-                250,250,250,50,50,50
-        );
-
-        $this->chart->addBorder(2);
-    }
-
-    protected function getLegendMargin($side)
-    {
-        return $this->settings['legendLeftMargin'];
-    }
-}
-
-?>

libraries/chart/pma_pchart_stacked_bar.php

@@ -0,0 +1,21 @@
+<?php
+
+require_once 'pma_pchart_multi.php';
+
+class PMA_pChart_stacked_bar extends PMA_pChart_multi
+{
+    public function __construct($titleText, $data, $options = null)
+    {
+        parent::__construct($titleText, $data, $options);
+    }
+
+    protected function drawChart()
+    {
+        parent::drawChart();
+        
+        // Draw the bar chart
+        $this->chart->drawStackedBarGraph($this->dataSet->GetData(),$this->dataSet->GetDataDescription(),70);
+    }
+}
+
+?>

tbl_chart.php

@@ -88,15 +88,21 @@ $url_params['reload'] = 1;
     </tr>
 
     <tr><td><label for="title"><?php echo __("Title"); ?></label></td>
-        <td><input type="text" name="chartSettings[title]" id="height" value="<?php echo $chartSettings['title']; ?>" /></td>
+        <td><input type="text" name="chartSettings[title]" id="title" value="<?php echo $chartSettings['title']; ?>" /></td>
     </tr>
 
     <tr><td><label for="xLabel"><?php echo __("X Axis label"); ?></label></td>
-        <td><input type="text" name="chartSettings[xLabel]" id="height" value="<?php echo $chartSettings['xLabel']; ?>" /></td>
+        <td><input type="text" name="chartSettings[xLabel]" id="xLabel" value="<?php echo $chartSettings['xLabel']; ?>" /></td>
     </tr>
 
     <tr><td><label for="yLabel"><?php echo __("Y Axis label"); ?></label></td>
-        <td><input type="text" name="chartSettings[yLabel]" id="height" value="<?php echo $chartSettings['yLabel']; ?>" /></td>
+        <td><input type="text" name="chartSettings[yLabel]" id="yLabel" value="<?php echo $chartSettings['yLabel']; ?>" /></td>
+    </tr>
+    <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' : ''); ?>>Bar
+            <input type="radio" name="chartSettings[type]" value="line" <?php echo ($chartSettings['type'] == 'line' ? 'checked' : ''); ?>>Line
+        </td>
     </tr>
     </table>