← Back to team overview

dhis2-devs team mailing list archive

[Branch ~dhis2-devs-core/dhis2/trunk] Rev 4826: (DV) Bar chart implemented. To switch between column and bar chart just click the chart icon and ...

 

Merge authors:
  Jan Henrik Øverland (janhenrik-overland)
------------------------------------------------------------
revno: 4826 [merge]
committer: Jan Henrik Overland <janhenrik.overland@xxxxxxxxx>
branch nick: dhis2
timestamp: Tue 2011-10-04 17:52:10 +0200
message:
  (DV) Bar chart implemented. To switch between column and bar chart just click the chart icon and update.
added:
  dhis-2/dhis-web/dhis-web-visualizer/src/main/webapp/dhis-web-visualizer/app/images/bar.png
modified:
  dhis-2/dhis-web/dhis-web-visualizer/src/main/webapp/dhis-web-visualizer/app/app.js


--
lp:dhis2
https://code.launchpad.net/~dhis2-devs-core/dhis2/trunk

Your team DHIS 2 developers is subscribed to branch lp:dhis2.
To unsubscribe from this branch go to https://code.launchpad.net/~dhis2-devs-core/dhis2/trunk/+edit-subscription
=== modified file 'dhis-2/dhis-web/dhis-web-visualizer/src/main/webapp/dhis-web-visualizer/app/app.js'
--- dhis-2/dhis-web/dhis-web-visualizer/src/main/webapp/dhis-web-visualizer/app/app.js	2011-10-04 14:44:09 +0000
+++ dhis-2/dhis-web/dhis-web-visualizer/src/main/webapp/dhis-web-visualizer/app/app.js	2011-10-04 15:49:35 +0000
@@ -139,6 +139,14 @@
             }
         },
         button: {
+            cmp: [],
+            getValue: function() {
+                for (var i = 0; i < this.cmp.length; i++) {
+                    if (this.cmp[i].pressed) {
+                        return this.cmp[i].name;
+                    }
+                }
+            },
             toggleHandler: function(b) {
                 if (!b.pressed) {
                     b.toggle();
@@ -321,6 +329,9 @@
         },        
         chart: null,        
         getChartStore: function(exe) {
+            this[DV.state.type](exe);
+        },
+        column: function(exe) {
             var properties = Ext.Object.getKeys(DV.data.data[0]);
             this.chart = Ext.create('Ext.data.Store', {
                 fields: properties,
@@ -334,7 +345,23 @@
             }
             else {
                 return DV.store.chart;
+            }            
+        },
+        bar: function(exe) {
+            var properties = Ext.Object.getKeys(DV.data.data[0]);
+            this.chart = Ext.create('Ext.data.Store', {
+                fields: properties,
+                data: DV.data.data
+            });            
+            this.chart.left = properties.slice(0, 1);
+            this.chart.bottom = properties.slice(1, properties.length);
+            
+            if (exe) {
+                DV.chart.getChart(true);
             }
+            else {
+                return DV.store.chart;
+            }            
         }
     };
     
@@ -361,6 +388,8 @@
         getState: function(exe) {
             this.resetState();
             
+            this.type = DV.util.button.getValue();
+            
             this.series.dimension = this.series.cmp.getValue();
             this.category.dimension = this.category.cmp.getValue();
             this.filter.dimension = this.filter.cmp.getValue();
@@ -533,7 +562,45 @@
                     }
                 ]
             });
-        },        
+        },
+        bar: function() {
+            this.chart = Ext.create('Ext.chart.Chart', {
+                width: DV.util.viewport.getSize().x,
+                height: DV.util.viewport.getSize().y,
+                animate: true,
+                store: DV.store.chart,
+                legend: {
+                    position: 'top'
+                },
+                axes: [
+                    {
+                        title: DV.conf.finals.dimension[DV.state.category.dimension].rawvalue,
+                        type: 'Category',
+                        position: 'left',
+                        fields: DV.store.chart.left
+                    },
+                    {
+                        title: 'Value',
+                        type: 'Numeric',
+                        position: 'bottom',
+                        minimum: 0,
+                        grid: true,
+                        fields: DV.store.chart.bottom,
+                        label: {
+                            renderer: Ext.util.Format.numberRenderer('0,0')
+                        }
+                    }
+                ],
+                series: [
+                    {
+                        type: 'bar',
+                        axis: 'bottom',
+                        xField: DV.store.chart.left,
+                        yField: DV.store.chart.bottom
+                    }
+                ]
+            });
+        },
         reload: function() {
             var c = DV.util.getCmp('panel[region="center"]');
             c.removeAll(true);
@@ -559,10 +626,18 @@
                         height: 44,
                         style: 'padding-top:2px; border-style:none',
                         defaults: {
+                            xtype: 'button',
                             width: 40,
                             height: 40,
                             toggleGroup: 'chartsettings',
-                            handler: DV.util.button.toggleHandler
+                            handler: DV.util.button.toggleHandler,
+                            listeners: {
+                                afterrender: function(b) {
+                                    if (b.xtype === 'button') {
+                                        DV.util.button.cmp.push(b);
+                                    }
+                                }
+                            }
                         },
                         items: [
                             {
@@ -572,29 +647,14 @@
                             },
                             {
                                 icon: 'images/column.png',
+                                name: DV.conf.finals.chart.column,
                                 tooltip: 'Column chart',
-                                pressed: true,
-                                listeners: {
-                                    click: function() {
-                                        DV.state.type = DV.conf.finals.chart.column;
-                                    }
-                                }
-                            },
-                            {
-                                icon: 'images/column.png',
-                                disabled: true
-                            },
-                            {
-                                icon: 'images/column.png',
-                                disabled: true
-                            },
-                            {
-                                icon: 'images/column.png',
-                                disabled: true
-                            },
-                            {
-                                icon: 'images/column.png',
-                                disabled: true
+                                pressed: true
+                            },
+                            {
+                                icon: 'images/bar.png',
+                                name: DV.conf.finals.chart.bar,
+                                tooltip: 'Bar chart'
                             }
                         ]
                     },                    

=== added file 'dhis-2/dhis-web/dhis-web-visualizer/src/main/webapp/dhis-web-visualizer/app/images/bar.png'
Binary files dhis-2/dhis-web/dhis-web-visualizer/src/main/webapp/dhis-web-visualizer/app/images/bar.png	1970-01-01 00:00:00 +0000 and dhis-2/dhis-web/dhis-web-visualizer/src/main/webapp/dhis-web-visualizer/app/images/bar.png	2011-10-04 15:49:35 +0000 differ