dhis2-devs team mailing list archive
-
dhis2-devs team
-
Mailing list archive
-
Message #27249
[Branch ~dhis2-documenters/dhis2/dhis2-docbook-docs] Rev 932: PT/DV/GIS plugins docs updated
------------------------------------------------------------
revno: 932
committer: Jan Henrik Overland <janhenrik.overland@xxxxxxxxx>
branch nick: dhis2-docbook-docs
timestamp: Thu 2014-01-02 11:52:56 +0100
message:
PT/DV/GIS plugins docs updated
modified:
src/docbkx/en/dhis2_user_man_web_api.xml
--
lp:~dhis2-documenters/dhis2/dhis2-docbook-docs
https://code.launchpad.net/~dhis2-documenters/dhis2/dhis2-docbook-docs
Your team DHIS 2 developers is subscribed to branch lp:~dhis2-documenters/dhis2/dhis2-docbook-docs.
To unsubscribe from this branch go to https://code.launchpad.net/~dhis2-documenters/dhis2/dhis2-docbook-docs/+edit-subscription
=== modified file 'src/docbkx/en/dhis2_user_man_web_api.xml'
--- src/docbkx/en/dhis2_user_man_web_api.xml 2013-12-31 09:31:56 +0000
+++ src/docbkx/en/dhis2_user_man_web_api.xml 2014-01-02 10:52:56 +0000
@@ -1441,14 +1441,79 @@
<para>DHIS 2 comes with plugins which enables you to embed live data directly in your web portal or web site. Currently, plugins exist for charts, maps and pivot tables.</para>
<section>
<title>Embedding pivot tables with the Pivot table plug-in</title>
+
<para>In this example we will see how we can embed good-looking, light-weight html pivot tables with data served from a DHIS back-end into a Web page. To accomplish this we will use the Pivot table plug-in. The plug-in is written in Javascript and depends on the Ext JS library only. A complete working example can be found at <ulink url="http://apps.dhis2.org/portal/table.html"/>. Open the page in a web browser and view the source to see how it is set up.</para>
- <para>We start by including three files in the header section of the HTML document. The first
+
+ <para>We start by having a look at what the complete html file could look like. This setup puts two tables in our web page. The first one is referring to an existing table. The second is configured inline.
+ <screen><!DOCTYPE html>
+<html>
+<head>
+ <link rel="stylesheet" type="text/css" href="http://dhis2-cdn.org/v214/ext/resources/css/ext-plugin-gray.css" />
+ <script src="http://dhis2-cdn.org/v214/ext/ext-all.js"></script>
+ <script src="http://dhis2-cdn.org/v214/plugin/table.js"></script>
+
+ <script>
+ var base = "http://apps.dhis2.org/demo";
+
+ // Login - if OK, call the setLinks function
+
+ Ext.onReady( function() {
+ Ext.Ajax.request({
+ url: base + "dhis-web-commons-security/login.action",
+ method: "POST",
+ params: { j_username: "portal", j_password: "Portal123" },
+ success: setLinks
+ });
+ });
+
+ function setLinks() {
+
+ // Referring to an existing table through the id parameter, render to "tableA1" div
+
+ DHIS.getTable({ url: base, el: "tableA1", id: "R0DVGvXDUNP" });
+
+ // Full table configuration, render to "tableB1" div
+
+ DHIS.getTable({
+ url: base,
+ el: "tableB1",
+ columns: [
+ {dimension: "de", items: [{id: "YtbsuPPo010"}, {id: "l6byfWFUGaP"}]}
+ ],
+ rows: [
+ {dimension: "pe", items: [{id: "LAST_12_MONTHS"}]}
+ ],
+ filters: [
+ {dimension: "ou", items: [{id: "USER_ORGUNIT"}]}
+ ],
+ // All following options are optional
+ showTotals: false,
+ showSubTotals: false,
+ hideEmptyRows: true,
+ showHierarchy: true,
+ displayDensity: "comfortable",
+ fontSize: "large",
+ digitGroupSeparator: "comma",
+ legendSet: {id: "BtxOoQuLyg1"}
+ });
+ }
+ </script>
+</head>
+
+<body>
+ <div id="tableA1"></div>
+ <div id="tableB1"></div>
+</body>
+</html></screen>
+ </para>
+
+ <para>Three files are included in the header section of the HTML document. The first
two files are the Ext JS javascript library (we use the DHIS 2 content delivery network in
this case) and its css stylesheet. The third file is the Pivot table plug-in. Make sure the
path is pointing to your DHIS server installation.</para>
- <screen><link rel="stylesheet" type="text/css" href="http://dhis2-cdn.org/v213/ext/resources/css/ext-plugin-gray.css" />
-<script src="http://dhis2-cdn.org/v213/ext/ext-all.js"></script>
-<script src="http://dhis2-cdn.org/v213/plugin/table.js"></script></screen>
+ <screen><link rel="stylesheet" type="text/css" href="http://dhis2-cdn.org/v214/ext/resources/css/ext-plugin-gray.css" />
+<script src="http://dhis2-cdn.org/v214/ext/ext-all.js"></script>
+<script src="http://dhis2-cdn.org/v214/plugin/table.js"></script></screen>
<para>To authenticate with the DHIS server we use the same approach as in the previous section. In the header of the HTML document we include the following Javascript inside a script element. The <emphasis role="italic">setLinks</emphasis> method will be implemented later. Make sure the <emphasis role="italic">base</emphasis> variable is pointing to your DHIS installation.</para>
<screen>var base = "http://apps.dhis2.org/demo/";
@@ -1600,32 +1665,32 @@
</tgroup>
</table>
<para>We continue by adding one pre-defined and one dynamic pivot table to our HTML document. You can browse the list of available pivot tables using the Web API here: <ulink url="http://apps.dhis2.org/demo/api/reportTables"/>.</para>
- <screen>function setLinks() {
- PT.plugin.getTable({ url: base, el: 'tableA1', id: 'R0DVGvXDUNP' });
+ <screen>function setLinks() {
+ DHIS.getTable({ url: base, el: "tableA1", id: "R0DVGvXDUNP" });
- PT.plugin.getTable({
- url: base,
- el: 'tableB1',
- type: 'stackedBar',
- columns: [
- {dimension: 'de', items: [{id: 'YtbsuPPo010'}, {id: 'l6byfWFUGaP'}]}
- ],
- rows: [
- {dimension: 'pe', items: [{id: 'LAST_12_MONTHS'}]}
- ],
- filters: [
- {dimension: 'ou', items: [{id: 'USER_ORGUNIT'}]}
- ],
- showTotals: false, // All following options are optional
- showSubTotals: false,
- hideEmptyRows: true,
- showHierarchy: true,
- displayDensity: "comfortable",
- fontSize: "large",
- digitGroupSeparator: "comma",
- legendSet: {id: "BtxOoQuLyg1"}
+ DHIS.getTable({
+ url: base,
+ el: "tableB1",
+ columns: [
+ {dimension: "de", items: [{id: "YtbsuPPo010"}, {id: "l6byfWFUGaP"}]}
+ ],
+ rows: [
+ {dimension: "pe", items: [{id: "LAST_12_MONTHS"}]}
+ ],
+ filters: [
+ {dimension: "ou", items: [{id: "USER_ORGUNIT"}]}
+ ],
+ // All following options are optional
+ showTotals: false,
+ showSubTotals: false,
+ hideEmptyRows: true,
+ showHierarchy: true,
+ displayDensity: "comfortable",
+ fontSize: "large",
+ digitGroupSeparator: "comma",
+ legendSet: {id: "BtxOoQuLyg1"}
});
-};</screen>
+}</screen>
<para>Finally we include some <emphasis role="italic">div</emphasis> elements in the body section of the HTML document with the identifiers referred to in the plug-in Javascript.</para>
<screen><div id="tableA1"></div>
<div id="tableB1"></div></screen>
@@ -1634,13 +1699,78 @@
<section>
<title>Embedding charts with the Visualizer chart plug-in</title>
<para>In this example we will see how we can embed good-looking Ext JS charts (<ulink url="http://www.sencha.com/products/extjs"/>) with data served from a DHIS back-end into a Web page. To accomplish this we will use the DHIS Visualizer plug-in. The plug-in is written in Javascript and depends on the Ext JS library only. A complete working example can be found at <ulink url="http://apps.dhis2.org/portal/chart.html"/>. Open the page in a web browser and view the source to see how it is set up.</para>
- <para>We start by including three files in the header section of the HTML document. The first
+
+ <para>We start by having a look at what the complete html file could look like. This setup puts two charts in our web page. The first one is referring to an existing chart. The second is configured inline.
+ <screen><!DOCTYPE html>
+<html>
+<head>
+ <link rel="stylesheet" type="text/css" href="http://dhis2-cdn.org/v214/ext/resources/css/ext-plugin-gray.css" />
+ <script src="http://dhis2-cdn.org/v214/ext/ext-all.js"></script>
+ <script src="http://dhis2-cdn.org/v214/plugin/chart.js"></script>
+
+ <script>
+ var base = "http://apps.dhis2.org/demo";
+
+ // Login - if OK, call the setLinks function
+
+ Ext.onReady( function() {
+ Ext.Ajax.request({
+ url: base + "dhis-web-commons-security/login.action",
+ method: "POST",
+ params: { j_username: "portal", j_password: "Portal123" },
+ success: setLinks
+ });
+ });
+
+ function setLinks() {
+
+ // Referring to an existing chart through the id parameter, render to "chartA1" div
+
+ DHIS.getChart({ url: base, el: "chartA1", id: "R0DVGvXDUNP" });
+
+ // Full chart configuration, render to "chartB1" div
+
+ DHIS.getChart({
+ url: base,
+ el: "chartB1",
+ type: "stackedBar",
+ columns: [ // Chart series
+ {dimension: "de", items: [{id: "YtbsuPPo010"}, {id: "l6byfWFUGaP"}]}
+ ],
+ rows: [ // Chart categories
+ {dimension: "pe", items: [{id: "LAST_12_MONTHS"}]}
+ ],
+ filters: [
+ {dimension: "ou", items: [{id: "USER_ORGUNIT"}]}
+ ],
+ // All following options are optional
+ showData: false,
+ targetLineValue: 70,
+ baseLineValue: 20,
+ showTrendLine: true,
+ hideLegend: true,
+ title: "My chart title",
+ domainAxisTitle: "Periods",
+ rangeAxisTitle: "Percent"
+ });
+ }
+ </script>
+</head>
+
+<body>
+ <div id="chartA1"></div>
+ <div id="chartB1"></div>
+</body>
+</html></screen>
+ </para>
+
+ <para>Three files are included in the header section of the HTML document. The first
two files are the Ext JS javascript library (we use the DHIS 2 content delivery network in
this case) and its stylesheet. The third file is the Visualizer plug-in. Make sure the path
is pointing to your DHIS server installation.</para>
<screen><link rel="stylesheet" type="text/css" href="http://dhis2-cdn.org/v213/ext/resources/css/ext-plugin-gray.css" />
<script src="http://dhis2-cdn.org/v213/ext/ext-all.js"></script>
-<script src="http://dhis2-cdn.org/v213/plugin/table.js"></script></screen>
+<script src="http://dhis2-cdn.org/v213/plugin/chart.js"></script></screen>
<para>To authenticate with the DHIS server we use the same approach as in the previous section. In the header of the HTML document we include the following Javascript inside a script element. The <emphasis role="italic">setLinks</emphasis> method will be implemented later. Make sure the <emphasis role="italic">base</emphasis> variable is pointing to your DHIS installation.</para>
<screen>var base = "http://apps.dhis2.org/demo/";
@@ -1828,31 +1958,32 @@
</table>
<para>We continue by including two pre-defined charts and to dynamic charts to our HTML document. You can browse the list of available charts using the Web API here: <ulink url="http://apps.dhis2.org/demo/api/charts"/>.</para>
<screen>function setLinks() {
- DV.plugin.getChart({ url: base, el: 'chartA1', id: 'R0DVGvXDUNP' });
+ DHIS.getChart({ url: base, el: "chartA1", id: "R0DVGvXDUNP" });
- DV.plugin.getChart({
- url: base,
- el: 'chartB1',
- type: 'stackedBar',
- columns: [
- {dimension: 'de', items: [{id: 'YtbsuPPo010'}, {id: 'l6byfWFUGaP'}, {id: 's46m5MS0hxu'}]}
- ],
- rows: [
- {dimension: 'pe', items: [{id: 'LAST_12_MONTHS'}]}
- ],
- filters: [
- {dimension: 'ou', items: [{id: 'USER_ORGUNIT'}]}
- ],
- showData: false, // All following options are optional
- targetLineValue: 70,
- baseLineValue: 20,
- showTrendLine: true,
- hideLegend: true,
- title: 'My chart title',
- domainAxisTitle: 'Periods',
- rangeAxisTitle: 'Percent'
+ DHIS.getChart({
+ url: base,
+ el: "chartB1",
+ type: "stackedBar",
+ columns: [ // Chart series
+ {dimension: "de", items: [{id: "YtbsuPPo010"}, {id: "l6byfWFUGaP"}]}
+ ],
+ rows: [ // Chart categories
+ {dimension: "pe", items: [{id: "LAST_12_MONTHS"}]}
+ ],
+ filters: [
+ {dimension: "ou", items: [{id: "USER_ORGUNIT"}]}
+ ],
+ // All following options are optional
+ showData: false,
+ targetLineValue: 70,
+ baseLineValue: 20,
+ showTrendLine: true,
+ hideLegend: true,
+ title: "My chart title",
+ domainAxisTitle: "Periods",
+ rangeAxisTitle: "Percent"
});
-};</screen>
+}</screen>
<para>Finally we include some <emphasis role="italic">div</emphasis> elements in the body section of the HTML document with the identifiers referred to in the plug-in Javascript.</para>
<screen><div id="chartA1"></div>
<div id="chartB1"></div>
@@ -1862,21 +1993,71 @@
<section>
<title>Embedding maps with the GIS map plug-in</title>
<para>In this example we will see how we can embed maps with data served from a DHIS back-end into a Web page. To accomplish this we will use the GIS map plug-in. The plug-in is written in Javascript and depends on the Ext JS library only. A complete working example can be found at <ulink url="http://apps.dhis2.org/portal/map.html"/>. Open the page in a web browser and view the source to see how it is set up.</para>
- <para>We start by including four files and Google Maps in the header section of the HTML
+ <para>We start by having a look at what the complete html file could look like. This setup puts two maps in our web page. The first one is referring to an existing map. The second is configured inline.
+
+ <screen><!DOCTYPE html>
+<html>
+<head>
+ <link rel="stylesheet" type="text/css" href="http://dhis2-cdn.org/v214/ext/resources/css/ext-plugin-gray.css" />
+ <script src="http://dhis2-cdn.org/v214/ext/ext-all.js"></script>
+ <script src="https://maps.google.com/maps/api/js?sensor=false"></script>
+ <script src="http://dhis2-cdn.org/v214/openlayers/OpenLayers.js"></script>
+ <script src="http://dhis2-cdn.org/v214/plugin/map.js"></script>
+
+ <script>
+ var base = "http://apps.dhis2.org/demo";
+
+ // Login - if OK, call the setLinks function
+
+ Ext.onReady( function() {
+ Ext.Ajax.request({
+ url: base + "dhis-web-commons-security/login.action",
+ method: "POST",
+ params: { j_username: "portal", j_password: "Portal123" },
+ success: setLinks
+ });
+ });
+
+ function setLinks() {
+ DHIS.getMap({ url: base, el: "mapA1", id: "ytkZY3ChM6J" });
+
+ DHIS.getMap({
+ url: base,
+ el: "mapB1",
+ mapViews: [{
+ columns: [{dimension: "in", items: [{id: "Uvn6LCg7dVU"}]}], // data
+ rows: [{dimension: "ou", items: [{id: "LEVEL-3"}, {id: "ImspTQPwCqd"}]}], // organisation units,
+ filters: [{dimension: "pe", items: [{id: "LAST_3_MONTHS"}]}], // period
+ // All following options are optional
+ classes: 7,
+ colorLow: "02079c",
+ colorHigh: "e5ecff",
+ opacity: 0.9,
+ legendSet: {id: "fqs276KXCXi"}
+ }]
+ });
+ }
+ </script>
+</head>
+
+<body>
+ <div id="mapA1"></div>
+ <div id="mapB1"></div>
+</body>
+</html></screen></para>
+ <para>Four files and Google Maps are included in the header section of the HTML
document. The first two files are the Ext JS javascript library (we use the DHIS 2 content
delivery network in this case) and its stylesheet. The third file is the OpenLayers
javascript mapping framework (<ulink url="http://openlayers.org"/>) and finally we include
the GIS map plug-in. Make sure the path is pointing to your DHIS server installation.</para>
- <screen><link rel="stylesheet" type="text/css" href="http://dhis2-cdn.org/v213/ext/resources/css/ext-plugin-gray.css" />
-<script src="http://dhis2-cdn.org/v213/ext/ext-all.js"></script>
+ <screen><link rel="stylesheet" type="text/css" href="http://dhis2-cdn.org/v214/ext/resources/css/ext-plugin-gray.css" />
+<script src="http://dhis2-cdn.org/v214/ext/ext-all.js"></script>
<script src="https://maps.google.com/maps/api/js?sensor=false"></script>
-<script src="http://dhis2-cdn.org/v213/openlayers/OpenLayers.js"></script>
-<script src="http://dhis2-cdn.org/v213/plugin/map.js"></script></screen>
+<script src="http://dhis2-cdn.org/v214/openlayers/OpenLayers.js"></script>
+<script src="http://dhis2-cdn.org/v214/plugin/map.js"></script></screen>
<para>To authenticate with the DHIS server we use the same approach as in the previous section. In the header of the HTML document we include the following Javascript inside a script element. The <emphasis role="italic">setLinks</emphasis> method will be implemented later. Make sure the <emphasis role="italic">base</emphasis> variable is pointing to your DHIS installation.</para>
- <screen>var base = "http://apps.dhis2.org/demo/";
-
-Ext.onReady( function() {
+ <screen>Ext.onReady( function() {
Ext.Ajax.request({
url: base + "dhis-web-commons-security/login.action",
method: "POST",
@@ -2080,31 +2261,30 @@
</table>
<para>We continue by adding one pre-defined and one dynamically configured map to our HTML document. You can browse the list of available maps using the Web API here: <ulink url="http://apps.dhis2.org/demo/api/maps"/>.</para>
<screen>function setLinks() {
- Ext.onReady(function() {
- var url = "http://apps.dhis2.org/demo/";;
-
- GIS.plugin.getMap({
- url: url,
- el: "mapA1",
- id: "ytkZY3ChM6J"
- });
-
- GIS.plugin.getMap({
- url: url,
- el: "mapB1",
- mapViews: [{
- columns: [{dimension: 'in', items: [{id: 'Uvn6LCg7dVU'}]}], // data
- rows: [{dimension: 'ou', items: [{id: 'LEVEL-3'}, {id: 'ImspTQPwCqd'}]}], // organisation units
- filters: [{dimension: 'pe', items: [{id: 'LAST_3_MONTHS'}]}], // period
- classes: 7,
- colorLow: '02079c',
- colorHigh: 'e5ecff',
- opacity: 0.9
- legendSet: {id: 'fqs276KXCXi'} // Optional
- }]
- });
-});
-};</screen>
+ DHIS.getMap({ url: base, el: "mapA1", id: "ytkZY3ChM6J" });
+
+ DHIS.getMap({
+ url: base,
+ el: "mapB1",
+ mapViews: [
+ columns: [ // Chart series
+ columns: [{dimension: "in", items: [{id: "Uvn6LCg7dVU"}]}], // data
+ ],
+ rows: [ // Chart categories
+ rows: [{dimension: "ou", items: [{id: "LEVEL-3"}, {id: "ImspTQPwCqd"}]}], // organisation units
+ ],
+ filters: [
+ filters: [{dimension: "pe", items: [{id: "LAST_3_MONTHS"}]}], // period
+ ],
+ // All following options are optional
+ classes: 7,
+ colorLow: "02079c",
+ colorHigh: "e5ecff",
+ opacity: 0.9,
+ legendSet: {id: "fqs276KXCXi"}
+ ]
+ });
+}</screen>
<para>Finally we include some <emphasis role="italic">div</emphasis> elements in the body section of the HTML document with the identifiers referred to in the plug-in Javascript.</para>
<screen><div id="mapA1"></div>
<div id="mapB1"></div>
