dhis2-devs team mailing list archive
-
dhis2-devs team
-
Mailing list archive
-
Message #17304
[Branch ~dhis2-devs-core/dhis2/trunk] Rev 6834: Portal backup
------------------------------------------------------------
revno: 6834
committer: Lars Helge Overland <larshelge@xxxxxxxxx>
branch nick: dhis2
timestamp: Wed 2012-05-02 18:35:24 +0200
message:
Portal backup
added:
resources/util/plugin.html
modified:
resources/util/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 'resources/util/index.html'
--- resources/util/index.html 2012-03-21 14:04:59 +0000
+++ resources/util/index.html 2012-05-02 16:35:24 +0000
@@ -1,3 +1,4 @@
+<!DOCTYPE html>
<html>
<head>
@@ -30,10 +31,10 @@
function setLinks() {
jQuery("#map1").attr("src", base + "api/maps/mVHksDN1dIP/data");
jQuery("#map2").attr("src", base + "api/maps/Y8dSQ3fH0Xe/data");
- jQuery("#map3").attr("src", base + "api/maps/JlXSUIcLsmd/data");
jQuery("#chart1").attr("src", base + "api/charts/j1gNXBgwKVm/data");
- jQuery("#chart2").attr("src", base + "api/charts/R0DVGvXDUNP/data");
- jQuery("#chart3").attr("src", base + "api/charts/EbRN2VIbPdV/data");
+ jQuery("#chart2").attr("src", base + "api/charts/EbRN2VIbPdV/data");
+ jQuery("#table1").load( base + "api/reportTables/zfFRJUAZ8II/data");
+ jQuery("#table2").load( base + "api/reportTables/NBt7kGTOQTb/data");
}
jQuery(document).ready(function() {
@@ -51,7 +52,7 @@
<h1>Web Portal</h1>
-<p><a href="http://dhis2.org";>Home</a></p>
+<p><a href="http://dhis2.org";>Home</a> | <a href="index.html">Portal</a> | <a href="plugin.html">Plugin</a></p>
<p>This page illustrates how the DHIS Web API can be used as back-end for a Web portal. All content on this
page is loaded dynamically from the Web API running with the demo DHIS instance. Right-click on the page and
@@ -76,12 +77,14 @@
<h3>Maps</h3>
<img style="padding: 15px; margin: 15px; border: 1px solid #c0c0c0;" id="map1" />
<img style="padding: 15px; margin: 15px; border: 1px solid #c0c0c0;" id="map2" />
-<img style="padding: 15px; margin: 15px; border: 1px solid #c0c0c0;" id="map3" />
<h3>Charts</h3>
<img style="padding: 15px; margin: 15px; border: 1px solid #c0c0c0;" id="chart1" />
<img style="padding: 15px; margin: 15px; border: 1px solid #c0c0c0;" id="chart2" />
-<img style="padding: 15px; margin: 15px; border: 1px solid #c0c0c0;" id="chart3" />
+
+<h3>Embedded tables</h3>
+<div id="table1"></div>
+<div id="table2"></div>
</body>
</html>
=== added file 'resources/util/plugin.html'
--- resources/util/plugin.html 1970-01-01 00:00:00 +0000
+++ resources/util/plugin.html 2012-05-02 16:35:24 +0000
@@ -0,0 +1,139 @@
+<!DOCTYPE html>
+<html>
+<head>
+
+<title>DHIS Web Portal</title>
+
+<!-- Import ext js, ext css and visualizer plugin js -->
+
+<link rel="stylesheet" type="text/css" href="http://extjs-public.googlecode.com/svn/tags/extjs-4.0.7/release/resources/css/ext-all-gray.css"; />
+<script type="text/javascript" src="http://extjs-public.googlecode.com/svn/tags/extjs-4.0.7/release/ext-all.js";></script>
+<script type="text/javascript" src="http://apps.dhis2.org/demo/dhis-web-visualizer/app/plugin/plugin.js";></script>
+
+<!-- Custom css -->
+
+<style type="text/css">
+
+h1, h3 {
+ font-family: Georgia, sans-serif;
+ color: black;
+ font-size: 32px;
+ margin: 8px;
+ margin-bottom: 21px;
+ font-weight: lighter;
+ line-height: 1.5;
+}
+
+h3 {
+ margin-top: 21px;
+ font-size: 18px;
+ color: #3B3B3B;
+}
+
+p {
+ font-family: Georgia, sans-serif;
+ color: #3B3B3B;
+ line-height: 1.5;
+ font-size: 16px;
+ margin: 8px;
+}
+
+.chart {
+ width: 900px;
+ height: 500px;
+ border: 1px solid #ddd;
+ margin: 30px;
+}
+
+</style>
+
+<!-- Login and initialize charts -->
+
+<script type="text/javascript">
+var base = 'http://apps.dhis2.org/demo/';
+
+Ext.onReady( function() {
+ Ext.Ajax.request({
+ url: base + "dhis-web-commons-security/login.action",
+ method: 'POST',
+ params: { j_username: "admin", j_password: "district" },
+ success: setLinks
+ });
+});
+
+function setLinks() {
+ DHIS.getChart({ uid: 'R0DVGvXDUNP', el: 'chartA1', url: base });
+
+ DHIS.getChart({ uid: 'X0CPnV6uLjR', el: 'chartA2', url: base });
+
+ DHIS.getChart({ uid: 'j1gNXBgwKVm', el: 'chartA3', url: base });
+
+ DHIS.getChart({ uid: 'X7PqaXfevnL', el: 'chartA4', url: base });
+
+ DHIS.getChart({ el: 'chartB1', url: base,
+ type: 'bar',
+ indicators: ['FnYCr2EAzWS','eTDtyyaSA7f','tUIlpyeeX9N'],
+ periods: 'last12Months',
+ organisationunits: ['ImspTQPwCqd']
+ });
+
+ DHIS.getChart({ el: 'chartB2', url: base,
+ type: 'column',
+ indicators: ['Uvn6LCg7dVU','sB79w2hiLp8'],
+ periods: 'thisYear',
+ organisationunits: ['O6uvpzGd5pu','fdc6uOvgoji','lc3eMKXaEfw','jmIPBj66vD6'],
+ series: 'data',
+ category: 'organisationunit',
+ filter: 'period'
+ });
+
+ DHIS.getChart({ el: 'chartB3', url: base,
+ type: 'line',
+ indicators: ['Uvn6LCg7dVU','sB79w2hiLp8'],
+ periods: 'last12Months',
+ organisationunits: ['ImspTQPwCqd'],
+ series: 'data',
+ category: 'period',
+ filter: 'organisationunit'
+ });
+
+ DHIS.getChart({ el: 'chartB4', url: base,
+ type: 'pie',
+ dataelements: ['sre820mphBu','nckBHiObFAn','Z2GiSR6S3DO','rEgPZfxBScE','T2H6EDoHxxy'],
+ periods: 'thisYear',
+ organisationunits: ['ImspTQPwCqd'],
+ series: 'period',
+ category: 'data',
+ filter: 'organisationunit'
+ });
+};
+</script>
+
+</head>
+
+<body>
+
+<h1>Visualizer Plugin</h1>
+
+<p><a href="http://dhis2.org";>Home</a> | <a href="index.html">Portal</a> | <a href="plugin.html">Plugin</a></p>
+
+<p>This page illustrates the use of the Data Visualizer plugin which can be used to embed Ext dynamic charts into a Web page. You can embed charts
+pointing to pre-defined charts in DHIS, or select custom indicators, periods and org units to create dynamic charts. View the source of this page to
+see how it is done.</p>
+
+<h3>Pre-defined charts</h3>
+
+<div id="chartA1" class="chart"></div>
+<div id="chartA2" class="chart"></div>
+<div id="chartA3" class="chart"></div>
+<div id="chartA4" class="chart"></div>
+
+<h3>Dynamic charts</h3>
+
+<div id="chartB1" class="chart"></div>
+<div id="chartB2" class="chart"></div>
+<div id="chartB3" class="chart"></div>
+<div id="chartB4" class="chart"></div>
+
+</body>
+</html>
