dhis2-devs team mailing list archive
-
dhis2-devs team
-
Mailing list archive
-
Message #14400
[Branch ~dhis2-devs-core/dhis2/trunk] Rev 4885: (DV) Line chart and area chart implemented.
Merge authors:
Jan Henrik Øverland (janhenrik-overland)
------------------------------------------------------------
revno: 4885 [merge]
committer: Jan Henrik Overland <janhenrik.overland@xxxxxxxxx>
branch nick: dhis2
timestamp: Mon 2011-10-10 11:48:09 +0200
message:
(DV) Line chart and area chart implemented.
added:
dhis-2/dhis-web/dhis-web-visualizer/src/main/webapp/dhis-web-visualizer/app/images/area.png
dhis-2/dhis-web/dhis-web-visualizer/src/main/webapp/dhis-web-visualizer/app/images/line.png
modified:
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/index.html
--
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-07 13:02:10 +0000
+++ dhis-2/dhis-web/dhis-web-visualizer/src/main/webapp/dhis-web-visualizer/app/app.js 2011-10-10 09:47:19 +0000
@@ -33,9 +33,23 @@
column: 'column',
bar: 'bar',
line: 'line',
+ area: 'area',
pie: 'pie'
}
},
+ chart: {
+ legend: {
+ position: 'top',
+ boxStroke: '#ffffff',
+ boxStrokeWidth: 0
+ },
+ grid: {
+ opacity: 1,
+ fill: '#f1f1f1',
+ stroke: '#aaa',
+ 'stroke-width': 0.2
+ }
+ },
style: {
label: {
period: 'font:bold 11px arial; color:#444; line-height:20px',
@@ -193,7 +207,7 @@
getNames: function() {
var a = [];
DV.util.getCmp('multiselect[name="selectedIndicators"]').store.each( function(r) {
- a.push(r.data.shortName.replace(/\./g,''));
+ a.push(DV.util.chart.encodeSeriesName(r.data.shortName));
});
return a;
}
@@ -209,7 +223,7 @@
getNames: function() {
var a = [];
DV.util.getCmp('multiselect[name="selectedDataElements"]').store.each( function(r) {
- a.push(r.data.shortName.replace(/\./g,''));
+ a.push(DV.util.chart.encodeSeriesName(r.data.shortName));
});
return a;
}
@@ -231,7 +245,7 @@
Ext.Array.each(cmp, function(item) {
if (item.getValue()) {
Ext.Array.each(DV.init.system.periods[item.paramName], function(item) {
- a.push(item.name);
+ a.push(DV.util.chart.encodeSeriesName(item.name));
});
}
});
@@ -271,12 +285,31 @@
treepanel.selectRoot();
}
Ext.Array.each(selection, function(r) {
- a.push(r.data.text);
+ a.push(DV.util.chart.encodeSeriesName(r.data.text));
});
return a;
}
}
- }
+ },
+ chart: {
+ encodeSeriesName: function(text) {
+ return text.replace(/\./g,'');
+ },
+ line: {
+ getSeriesArray: function() {
+ var a = [];
+ for (var i = 0; i < DV.store.chart.left.length; i++) {
+ a.push({
+ type: 'line',
+ axis: 'left',
+ xField: DV.store.chart.bottom,
+ yField: DV.store.chart.left[i]
+ });
+ }
+ return a;
+ }
+ }
+ }
};
DV.store = {
@@ -376,6 +409,38 @@
else {
return DV.store.chart;
}
+ },
+ line: 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.bottom = properties.slice(0, 1);
+ this.chart.left = properties.slice(1, properties.length);
+
+ if (exe) {
+ DV.chart.getChart(true);
+ }
+ else {
+ return DV.store.chart;
+ }
+ },
+ area: 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.bottom = properties.slice(0, 1);
+ this.chart.left = properties.slice(1, properties.length);
+
+ if (exe) {
+ DV.chart.getChart(true);
+ }
+ else {
+ return DV.store.chart;
+ }
}
};
@@ -512,13 +577,13 @@
for (var i = 0; i < DV.state.series.data.length; i++) {
for (var j = 0; j < DV.data.values.length; j++) {
if (DV.data.values[j][DV.state.category.dimension] === item.x && DV.data.values[j][DV.state.series.dimension] === DV.state.series.data[i]) {
- item[DV.data.values[j][DV.state.series.dimension]] = DV.data.values[j].v;
+ item[DV.data.values[j][DV.state.series.dimension]] = parseFloat(DV.data.values[j].v);
break;
}
}
}
});
-
+
if (exe) {
DV.store.getChartStore(true);
}
@@ -529,7 +594,7 @@
};
DV.chart = {
- chart: null,
+ chart: null,
getChart: function(exe) {
this[DV.state.type]();
if (exe) {
@@ -545,11 +610,7 @@
height: DV.util.viewport.getSize().y,
animate: true,
store: DV.store.chart,
- legend: {
- position: 'top',
- boxStroke: '#ffffff',
- boxStrokeWidth: 0
- },
+ legend: DV.conf.chart.legend,
axes: [
{
title: 'Value',
@@ -560,6 +621,9 @@
fields: DV.store.chart.left,
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
+ },
+ grid: {
+ even: DV.conf.chart.grid
}
},
{
@@ -574,7 +638,10 @@
type: 'column',
axis: 'left',
xField: DV.store.chart.bottom,
- yField: DV.store.chart.left
+ yField: DV.store.chart.left,
+ style: {
+ opacity: 0.8
+ }
}
]
});
@@ -585,9 +652,7 @@
height: DV.util.viewport.getSize().y,
animate: true,
store: DV.store.chart,
- legend: {
- position: 'top'
- },
+ legend: DV.conf.chart.legend,
axes: [
{
title: DV.conf.finals.dimension[DV.state.category.dimension].rawvalue,
@@ -604,6 +669,9 @@
fields: DV.store.chart.bottom,
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
+ },
+ grid: {
+ even: DV.conf.chart.grid
}
}
],
@@ -612,11 +680,86 @@
type: 'bar',
axis: 'bottom',
xField: DV.store.chart.left,
- yField: DV.store.chart.bottom
+ yField: DV.store.chart.bottom,
+ style: {
+ opacity: 0.8
+ }
}
]
});
},
+ line: 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: DV.conf.chart.legend,
+ axes: [
+ {
+ title: 'Value',
+ type: 'Numeric',
+ position: 'left',
+ minimum: 0,
+ grid: true,
+ fields: DV.store.chart.left,
+ label: {
+ renderer: Ext.util.Format.numberRenderer('0,0')
+ },
+ grid: {
+ even: DV.conf.chart.grid
+ }
+ },
+ {
+ title: DV.conf.finals.dimension[DV.state.category.dimension].rawvalue,
+ type: 'Category',
+ position: 'bottom',
+ fields: DV.store.chart.bottom
+ }
+ ],
+ series: DV.util.chart.line.getSeriesArray()
+ });
+ },
+ area: 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: DV.conf.chart.legend,
+ axes: [
+ {
+ title: 'Value',
+ type: 'Numeric',
+ position: 'left',
+ minimum: 0,
+ grid: true,
+ fields: DV.store.chart.left,
+ label: {
+ renderer: Ext.util.Format.numberRenderer('0,0')
+ },
+ grid: {
+ even: DV.conf.chart.grid
+ }
+ },
+ {
+ title: DV.conf.finals.dimension[DV.state.category.dimension].rawvalue,
+ type: 'Category',
+ position: 'bottom',
+ fields: DV.store.chart.bottom
+ }
+ ],
+ series: [{
+ type: 'area',
+ axis: 'left',
+ xField: DV.store.chart.bottom[0],
+ yField: DV.store.chart.left,
+ style: {
+ opacity: 0.6
+ }
+ }]
+ });
+ },
reload: function() {
var c = DV.util.getCmp('panel[region="center"]');
c.removeAll(true);
@@ -671,6 +814,16 @@
icon: 'images/bar.png',
name: DV.conf.finals.chart.bar,
tooltip: 'Bar chart'
+ },
+ {
+ icon: 'images/line.png',
+ name: DV.conf.finals.chart.line,
+ tooltip: 'Line chart'
+ },
+ {
+ icon: 'images/area.png',
+ name: DV.conf.finals.chart.area,
+ tooltip: 'Area chart'
}
]
},
@@ -1416,7 +1569,14 @@
cls: 'x-btn-text-icon',
icon: 'images/exit.png',
handler: function() {
- window.location.href = DV.conf.finals.ajax.url_portal + 'redirect.action';
+ //var d = generateData(8);
+ //console.log(DV.store.chart.left);
+ //console.log(DV.store.chart.bottom);
+ console.log(DV.data.data);
+
+
+
+ //window.location.href = DV.conf.finals.ajax.url_portal + 'redirect.action';
}
}
]
=== added file 'dhis-2/dhis-web/dhis-web-visualizer/src/main/webapp/dhis-web-visualizer/app/images/area.png'
Binary files dhis-2/dhis-web/dhis-web-visualizer/src/main/webapp/dhis-web-visualizer/app/images/area.png 1970-01-01 00:00:00 +0000 and dhis-2/dhis-web/dhis-web-visualizer/src/main/webapp/dhis-web-visualizer/app/images/area.png 2011-10-10 09:47:19 +0000 differ
=== added file 'dhis-2/dhis-web/dhis-web-visualizer/src/main/webapp/dhis-web-visualizer/app/images/line.png'
Binary files dhis-2/dhis-web/dhis-web-visualizer/src/main/webapp/dhis-web-visualizer/app/images/line.png 1970-01-01 00:00:00 +0000 and dhis-2/dhis-web/dhis-web-visualizer/src/main/webapp/dhis-web-visualizer/app/images/line.png 2011-10-10 09:47:19 +0000 differ
=== modified file 'dhis-2/dhis-web/dhis-web-visualizer/src/main/webapp/dhis-web-visualizer/app/index.html'
--- dhis-2/dhis-web/dhis-web-visualizer/src/main/webapp/dhis-web-visualizer/app/index.html 2011-09-30 15:07:44 +0000
+++ dhis-2/dhis-web/dhis-web-visualizer/src/main/webapp/dhis-web-visualizer/app/index.html 2011-10-10 09:47:19 +0000
@@ -7,6 +7,8 @@
<script type="text/javascript" src="lib/ext/ext-all.js"></script>
<script type="text/javascript" src="app.js"></script>
+ <script type="text/javascript" src="http://dev.sencha.com/deploy/ext-4.0.2a/examples/example-data.js";></script>
+
</head>
<body>
