dhis2-devs team mailing list archive
-
dhis2-devs team
-
Mailing list archive
-
Message #25632
[Branch ~dhis2-documenters/dhis2/dhis2-docbook-docs] Rev 843: DV plugin docs updated.
------------------------------------------------------------
revno: 843
committer: Jan Henrik Overland <janhenrik.overland@xxxxxxxxx>
branch nick: dhis2-docbook-docs
timestamp: Thu 2013-10-17 15:39:40 +0200
message:
DV plugin docs updated.
modified:
src/docbkx/en/dhis2_user_man_using_gis.xml
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_using_gis.xml'
--- src/docbkx/en/dhis2_user_man_using_gis.xml 2013-10-15 14:18:28 +0000
+++ src/docbkx/en/dhis2_user_man_using_gis.xml 2013-10-17 13:39:40 +0000
@@ -141,7 +141,7 @@
<screeninfo>Analysis integration</screeninfo>
<mediaobject>
<imageobject>
- <imagedata width="25%" fileref="resources/images/visualizer/chart_integration.png" format="PNG"/>
+ <imagedata width="25%" fileref="resources/images/gis/chart_integration.png" format="PNG"/>
</imageobject>
</mediaobject>
</screenshot>
=== modified file 'src/docbkx/en/dhis2_user_man_web_api.xml'
--- src/docbkx/en/dhis2_user_man_web_api.xml 2013-10-16 13:45:28 +0000
+++ src/docbkx/en/dhis2_user_man_web_api.xml 2013-10-17 13:39:40 +0000
@@ -969,7 +969,7 @@
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">
+ src="http://apps.dhis2.org/demo/dhis-web-commons/javascripts/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/';
@@ -978,11 +978,27 @@
Ext.Ajax.request({
url: base + "dhis-web-commons-security/login.action",
method: 'POST',
- params: { j_username: "admin", j_password: "district" },
+ params: { j_username: "portal", j_password: "Portal123" },
success: setLinks
});
});</screen>
- <para>Now let us have a look at the various options for the Visualizer plug-in. If you want to refer to pre-defined charts already made inside DHIS you should use the <emphasis role="italic">uid</emphasis> parameter. If you want create dynamic charts you shoud include the indicators and/or dataelements parameter and omit the uid parameter. Asterisk (*) indicates that a parameter is required only when the uid parameter is not used.</para>
+ <para>Now let us have a look at the various options for the Visualizer plug-in. Two properies are required: <emphasis role="italic">el</emphasis> and <emphasis role="italic">url</emphasis> (please refer to the table below). If you want to refer to pre-defined charts already made inside DHIS it is sufficient to provide the additional <emphasis role="italic">id</emphasis> parameter. If you want to create dynamic charts you shoud omit the id parameter and provide data dimensions inside a <emphasis role="italic">columns</emphasis> array (chart series), a <emphasis role="italic">rows</emphasis> array (chart categories) and optionally a <emphasis role="italic">filters</emphasis> array instead.</para>
+
+ <para>A data dimension is defined as an object with a text property called <emphasis role="italic">dimension</emphasis>. This property accepts the following values: <emphasis role="italic">in</emphasis> (indicator), <emphasis role="italic">de</emphasis> (data element), <emphasis role="italic">ds</emphasis> (data set), <emphasis role="italic">dc</emphasis> (data element operand), <emphasis role="italic">pe</emphasis> (period), <emphasis role="italic">ou</emphasis> (organisation unit) or the id of any organisation unit group set or data element group set (can be found in the web api). The data dimension also has an array property called <emphasis role="italic">items</emphasis> which accepts objects with an <emphasis role="italic">id</emphasis> property.</para>
+
+ <para>To sum up, if you want to have e.g. "ANC 1 Coverage", "ANC 2 Coverage" and "ANC 3 Coverage" as series in your chart you can make the following <emphasis role="italic">columns</emphasis> config:</para>
+
+<screen>
+columns: [{
+ dimension: "in",
+ items: [
+ {id: "Uvn6LCg7dVU"},
+ {id: "OdiHJayrsKo"},
+ {id: "sB79w2hiLp8"}
+ ]
+}]
+</screen>
+
<table>
<title>Visualizer chart plug-in configuration</title>
<tgroup cols="5">
@@ -1007,11 +1023,25 @@
</thead>
<tbody>
<row>
- <entry>uid</entry>
+ <entry>el</entry>
+ <entry>string</entry>
+ <entry>Yes</entry>
+ <entry/>
+ <entry>Identifier of the HTML element to render the chart in your web page</entry>
+ </row>
+ <row>
+ <entry>url</entry>
+ <entry>string</entry>
+ <entry>Yes</entry>
+ <entry/>
+ <entry>Base URL of the DHIS server</entry>
+ </row>
+ <row>
+ <entry>id</entry>
<entry>string</entry>
<entry>No</entry>
<entry/>
- <entry>Identifier of a pre-defined chart in DHIS</entry>
+ <entry>Identifier of a pre-defined chart (favorite) in DHIS</entry>
</row>
<row>
<entry>type</entry>
@@ -1021,68 +1051,40 @@
<entry>Chart type</entry>
</row>
<row>
- <entry>indicators</entry>
- <entry>[string]</entry>
- <entry>Yes*</entry>
- <entry/>
- <entry>Identifiers of indicators to include in chart</entry>
- </row>
- <row>
- <entry>dataelements</entry>
- <entry>[string]</entry>
- <entry>Yes*</entry>
- <entry/>
- <entry>Identifiers of data elements to include in chart</entry>
- </row>
- <row>
- <entry>periods</entry>
- <entry>[string]</entry>
- <entry>No</entry>
- <entry>last12Months | lastMonth | lastQuarter | last4Quarters | lastSixMonth | last2SixMonths | thisYear | last5Years</entry>
- <entry>Names of relative periods to include in chart</entry>
- </row>
- <row>
- <entry>organisationunits</entry>
- <entry>[string]</entry>
- <entry>Yes*</entry>
- <entry/>
- <entry>Identifiers of organisation units to include in chart</entry>
- </row>
- <row>
- <entry>series</entry>
- <entry>string</entry>
- <entry>No</entry>
- <entry>data | period | organisationunit</entry>
- <entry>Dimension to use as chart series</entry>
- </row>
- <row>
- <entry>category</entry>
- <entry>string</entry>
- <entry>No</entry>
- <entry>data | period | organisationunit</entry>
- <entry>Dimension to use as chart category</entry>
+ <entry>columns</entry>
+ <entry>array</entry>
+ <entry>Yes (if no id provided)</entry>
+ <entry/>
+ <entry>Data dimensions to include in chart as series</entry>
+ </row>
+ <row>
+ <entry>rows</entry>
+ <entry>array</entry>
+ <entry>Yes (if no id provided)</entry>
+ <entry/>
+ <entry>Data dimensions to include in chart as category</entry>
</row>
<row>
<entry>filter</entry>
- <entry>string</entry>
- <entry>No</entry>
- <entry>data | period | organisationunit</entry>
- <entry>Dimension to use as chart filter</entry>
- </row>
- <row>
- <entry>orgUnitIsParent</entry>
- <entry>boolean</entry>
- <entry>No</entry>
- <entry>false | true</entry>
- <entry>Whether the chart should display the children of the selected org units</entry>
- </row>
- <row>
- <entry>skipAnimation</entry>
- <entry>boolean</entry>
- <entry>No</entry>
- <entry>false | true</entry>
- <entry>Whether the initial chart animation should be displayed</entry>
- </row>
+ <entry>array</entry>
+ <entry>No</entry>
+ <entry/>
+ <entry>Data dimensions to include in chart as filters</entry>
+ </row>
+
+
+ showData: false,
+ //targetLineValue: 70,
+ //baseLineValue: 20,
+ //showTrendLine: true,
+ //hideLegend: true,
+ //title: 'My chart title',
+ //domainAxisTitle: 'Periods',
+ //rangeAxisTitle: 'Percent'
+ });
+
+
+
<row>
<entry>showData</entry>
<entry>boolean</entry>
@@ -1091,7 +1093,7 @@
<entry>Whether to display data on the chart</entry>
</row>
<row>
- <entry>trendLine</entry>
+ <entry>showTrendLine</entry>
<entry>boolean</entry>
<entry>No</entry>
<entry>false | true</entry>
@@ -1105,27 +1107,13 @@
<entry>Whether to hide the chart legend</entry>
</row>
<row>
- <entry>hideSubtitle</entry>
+ <entry>hideTitle</entry>
<entry>boolean</entry>
<entry>No</entry>
<entry>false | true</entry>
<entry>Whether to hide the chart title</entry>
</row>
<row>
- <entry>userOrganisationUnit</entry>
- <entry>boolean</entry>
- <entry>No</entry>
- <entry>false | true</entry>
- <entry>Whether the user of the current user should be included in the chart</entry>
- </row>
- <row>
- <entry>userOrganisationUnitChildren</entry>
- <entry>boolean</entry>
- <entry>No</entry>
- <entry>false | true</entry>
- <entry>Whether the child org units of the current user should be included in the chart</entry>
- </row>
- <row>
<entry>targetLineValue</entry>
<entry>double</entry>
<entry>No</entry>
@@ -1154,32 +1142,18 @@
<entry>Label for baseline</entry>
</row>
<row>
- <entry>domainAxisLabel</entry>
- <entry>string</entry>
- <entry>No</entry>
- <entry/>
- <entry>Label for the domain axis</entry>
- </row>
- <row>
- <entry>rangeAxisLabel</entry>
- <entry>string</entry>
- <entry>No</entry>
- <entry/>
- <entry>Label for the range axis</entry>
- </row>
- <row>
- <entry>el</entry>
- <entry>string</entry>
- <entry>Yes</entry>
- <entry/>
- <entry>Identifier of HTML element to render the chart in</entry>
- </row>
- <row>
- <entry>url</entry>
- <entry>string</entry>
- <entry>Yes</entry>
- <entry/>
- <entry>Base URL of the DHIS server</entry>
+ <entry>domainAxisTitle</entry>
+ <entry>string</entry>
+ <entry>No</entry>
+ <entry/>
+ <entry>Title for the domain axis</entry>
+ </row>
+ <row>
+ <entry>rangeAxisTitle</entry>
+ <entry>string</entry>
+ <entry>No</entry>
+ <entry/>
+ <entry>Title for the range axis</entry>
</row>
<row>
<entry>width</entry>
@@ -1195,46 +1169,42 @@
<entry/>
<entry>Height of chart</entry>
</row>
- <row>
- <entry>legendPosition</entry>
- <entry>string</entry>
- <entry>No</entry>
- <entry>top | right | bottom | left</entry>
- <entry>Position of chart legend</entry>
- </row>
</tbody>
</tgroup>
</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() {
- DHIS.getChart({ uid: 'R0DVGvXDUNP', el: 'chartA1', url: base });
-
- DHIS.getChart({ uid: 'X0CPnV6uLjR', el: 'chartA2', 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'
+ <screen>
+function setLinks() {
+ DV.plugin.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,
+ //targetLineValue: 70,
+ //baseLineValue: 20,
+ //showTrendLine: true,
+ //hideLegend: true,
+ //title: 'My chart title',
+ //domainAxisTitle: 'Periods',
+ //rangeAxisTitle: 'Percent'
});
};</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" class="chart"></div>
-<div id="chartA2" class="chart"></div>
-
+ <screen>
+<div id="chartA1" class="chart"></div>
<div id="chartB1" class="chart"></div>
-<div id="chartB2" class="chart"></div></screen>
+</screen>
<para>To see a complete working example please visit <ulink url="http://apps.dhis2.org/portal/chart.html"/>.</para>
</section>
<section>
