=== modified file 'dhis-2/dhis-web/dhis-web-visualizer/src/main/webapp/dhis-web-visualizer/app/css/plugin.css'
--- dhis-2/dhis-web/dhis-web-visualizer/src/main/webapp/dhis-web-visualizer/app/css/plugin.css	2011-11-12 14:36:30 +0000
+++ dhis-2/dhis-web/dhis-web-visualizer/src/main/webapp/dhis-web-visualizer/app/css/plugin.css	2011-11-15 10:30:52 +0000
@@ -8,22 +8,23 @@
 }
 
 #chart1 {
-	height: 250px;
 	width: 1400px;
+	height: 400px;
 	border: 2px solid #ccc;
     margin-bottom: 100px;
 }
 
 #chart2 {
-	height: 250px;
 	width: 1400px;
+	height: 400px;
 	border: 2px solid #ccc;
     margin-bottom: 100px;
 }
 
 #chart3 {
-	height: 250px;
 	width: 1400px;
+	height: 700px;
+    padding: 50px;
 	border: 2px solid #ccc;
     margin-bottom: 100px;
 }

=== modified file 'dhis-2/dhis-web/dhis-web-visualizer/src/main/webapp/dhis-web-visualizer/app/plugin/plugin.html'
--- dhis-2/dhis-web/dhis-web-visualizer/src/main/webapp/dhis-web-visualizer/app/plugin/plugin.html	2011-11-12 14:36:30 +0000
+++ dhis-2/dhis-web/dhis-web-visualizer/src/main/webapp/dhis-web-visualizer/app/plugin/plugin.html	2011-11-15 10:30:52 +0000
@@ -21,40 +21,50 @@
 	<script>
 		Ext.onReady( function() {
 			var url = 'http://localhost:8180/dhis/dhis-web-visualizer/app';
+            
+/*
+CONFIG              TYPE            DEFAULT             DESCRIPTION
+    
+type                string          'column'            (Optional) Chart types: 'column', 'bar', 'line', 'area', 'pie'
+stacked             boolean         false               (Optional) Works for 'column' and 'bar'. Otherwise ignored.
+indicators          [integer]                           (Required*) Indicator ids. Required if no data elements are provided.
+dataelements        [integer]                           (Required*) Data element ids. Required if no indicators are provided.
+periods             [string]        'monthsThisYear'    (Optional) Relative period names.
+organisationunits   [integer]                           (Required) Organisation unit ids.
+series              string          'indicator'         (Optional) Series: 'indicator', 'dataelement', 'period' or 'organisationunit'
+category            string          'period'            (Optional) Category: 'indicator', 'dataelement', 'period' or 'organisationunit'
+filter              string          'organisationunit'  (Optional) Filter: 'indicator', 'dataelement', 'period' or 'organisationunit'
+el                  string                              (Required) The element to render the chart.
+width               integer         <el width>          (Optional) Chart width. Default is the element width.
+height              integer         <el height>         (Optional) Chart height. Default is the element height.
+legendPosition      string          'top'               (Optional) Positions: 'top', 'right', 'bottom' or 'left'
+url                 string                              (Required) The web service url.
+*/
 			
 			DHIS.getChart({
-				type: 'column',
+                stacked: true,
 				indicators: [52486, 52487, 52488],
-				periods: ['monthsThisYear'],
 				organisationunits: [525],
-				series: 'indicator',
-				category: 'period',
-				filter: 'organisationunit',
-				div: 'chart1',
+				el: 'chart1',
 				url: url
 			});
             
             DHIS.getChart({
 				type: 'line',
-				indicators: [52486, 52487, 52488],
-				periods: ['monthsThisYear'],
+				indicators: [52486, 52487],
 				organisationunits: [525],
-				series: 'indicator',
-				category: 'period',
-				filter: 'organisationunit',
-				div: 'chart2',
+				el: 'chart2',
 				url: url
 			});
             
             DHIS.getChart({
 				type: 'area',
-				indicators: [52486, 52487, 52488],
-				periods: ['monthsThisYear'],
+				indicators: [52486, 52487, 52488, 52491, 52496, 52497],
 				organisationunits: [525],
-				series: 'indicator',
-				category: 'period',
-				filter: 'organisationunit',
-				div: 'chart3',
+				el: 'chart3',
+                width: 1300,
+                height: 600,
+                legendPosition: 'right',
 				url: url
 			});
 			

=== modified file 'dhis-2/dhis-web/dhis-web-visualizer/src/main/webapp/dhis-web-visualizer/app/plugin/plugin.js'
--- dhis-2/dhis-web/dhis-web-visualizer/src/main/webapp/dhis-web-visualizer/app/plugin/plugin.js	2011-11-12 14:36:30 +0000
+++ dhis-2/dhis-web/dhis-web-visualizer/src/main/webapp/dhis-web-visualizer/app/plugin/plugin.js	2011-11-15 10:30:52 +0000
@@ -240,7 +240,7 @@
                 series: 'indicator',
                 category: 'period',
                 filter: 'organisationunit',
-                div: '',
+                el: '',
                 legendPosition: false,
                 url: ''
             };
@@ -333,15 +333,15 @@
         },
         el: null,
         getChart: function(project) {
-            this.el = Ext.get(project.state.conf.div);
+            this.el = Ext.get(project.state.conf.el);
             this[project.state.type](project);
             DHIS.exe.execute();
         },
         column: function(project) {
             project.chart = Ext.create('Ext.chart.Chart', {
-				renderTo: project.state.conf.div,
-                width: this.el.getWidth(),
-                height: this.el.getHeight(),
+				renderTo: project.state.conf.el,
+                width: project.state.conf.width || this.el.getWidth(),
+                height: project.state.conf.height || this.el.getHeight(),
                 animate: true,
                 store: project.store,
                 legend: DHIS.util.chart.getLegend(),
@@ -384,9 +384,9 @@
         },
         bar: function(project) {
             project.chart = Ext.create('Ext.chart.Chart', {
-				renderTo: project.state.conf.div,
-                width: this.el.getWidth(),
-                height: this.el.getHeight(),
+				renderTo: project.state.conf.el,
+                width: project.state.conf.width || this.el.getWidth(),
+                height: project.state.conf.height || this.el.getHeight(),
                 animate: true,
                 store: project.store,
                 legend: DHIS.util.chart.getLegend(),
@@ -429,9 +429,9 @@
         },
         line: function(project) {
             project.chart = Ext.create('Ext.chart.Chart', {
-				renderTo: project.state.conf.div,
-                width: this.el.getWidth(),
-                height: this.el.getHeight(),
+				renderTo: project.state.conf.el,
+                width: project.state.conf.width || this.el.getWidth(),
+                height: project.state.conf.height || this.el.getHeight(),
                 animate: true,
                 store: project.store,
                 legend: DHIS.util.chart.getLegend(),
@@ -463,9 +463,9 @@
         },
         area: function(project) {
             project.chart = Ext.create('Ext.chart.Chart', {
-				renderTo: project.state.conf.div,
-                width: this.el.getWidth(),
-                height: this.el.getHeight(),
+				renderTo: project.state.conf.el,
+                width: project.state.conf.width || this.el.getWidth(),
+                height: project.state.conf.height || this.el.getHeight(),
                 animate: true,
                 store: project.store,
                 legend: DHIS.util.chart.getLegend(),
@@ -505,9 +505,9 @@
         },
         pie: function(project) {
             project.chart = Ext.create('Ext.chart.Chart', {
-				renderTo: project.state.conf.div,
-                width: this.el.getWidth(),
-                height: this.el.getHeight(),
+				renderTo: project.state.conf.el,
+                width: project.state.conf.width || this.el.getWidth(),
+                height: project.state.conf.height || this.el.getHeight(),
                 animate: true,
                 shadow: true,
                 store: project.store,