Visualizer chart plug-in configuration

=== 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 @@ Analysis integration - + === 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> 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 setLinks method will be implemented later. Make sure the base variable is pointing to your DHIS installation. 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 }); }); - 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 uid 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. + Now let us have a look at the various options for the Visualizer plug-in. Two properies are required: el and url (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 id parameter. If you want to create dynamic charts you shoud omit the id parameter and provide data dimensions inside a columns array (chart series), a rows array (chart categories) and optionally a filters array instead. + + A data dimension is defined as an object with a text property called dimension. This property accepts the following values: in (indicator), de (data element), ds (data set), dc (data element operand), pe (period), ou (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 items which accepts objects with an id property. + + 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 columns config: + + +columns: [{ + dimension: "in", + items: [ + {id: "Uvn6LCg7dVU"}, + {id: "OdiHJayrsKo"}, + {id: "sB79w2hiLp8"} + ] +}] + + Visualizer chart plug-in configuration @@ -1007,11 +1023,25 @@ - uid + el + string + Yes + + Identifier of the HTML element to render the chart in your web page + + + url + string + Yes + + Base URL of the DHIS server + + + id string No - Identifier of a pre-defined chart in DHIS + Identifier of a pre-defined chart (favorite) in DHIS type @@ -1021,68 +1051,40 @@ Chart type - indicators - [string] - Yes* - - Identifiers of indicators to include in chart - - - dataelements - [string] - Yes* - - Identifiers of data elements to include in chart - - - periods - [string] - No - last12Months | lastMonth | lastQuarter | last4Quarters | lastSixMonth | last2SixMonths | thisYear | last5Years - Names of relative periods to include in chart - - - organisationunits - [string] - Yes* - - Identifiers of organisation units to include in chart - - - series - string - No - data | period | organisationunit - Dimension to use as chart series - - - category - string - No - data | period | organisationunit - Dimension to use as chart category + columns + array + Yes (if no id provided) + + Data dimensions to include in chart as series + + + rows + array + Yes (if no id provided) + + Data dimensions to include in chart as category filter - string - No - data | period | organisationunit - Dimension to use as chart filter - - - orgUnitIsParent - boolean - No - false | true - Whether the chart should display the children of the selected org units - - - skipAnimation - boolean - No - false | true - Whether the initial chart animation should be displayed - + array + No + + Data dimensions to include in chart as filters + + + + showData: false, + //targetLineValue: 70, + //baseLineValue: 20, + //showTrendLine: true, + //hideLegend: true, + //title: 'My chart title', + //domainAxisTitle: 'Periods', + //rangeAxisTitle: 'Percent' + }); + + + showData boolean @@ -1091,7 +1093,7 @@ Whether to display data on the chart - trendLine + showTrendLine boolean No false | true @@ -1105,27 +1107,13 @@ Whether to hide the chart legend - hideSubtitle + hideTitle boolean No false | true Whether to hide the chart title - userOrganisationUnit - boolean - No - false | true - Whether the user of the current user should be included in the chart - - - userOrganisationUnitChildren - boolean - No - false | true - Whether the child org units of the current user should be included in the chart - - targetLineValue double No @@ -1154,32 +1142,18 @@ Label for baseline - domainAxisLabel - string - No - - Label for the domain axis - - - rangeAxisLabel - string - No - - Label for the range axis - - - el - string - Yes - - Identifier of HTML element to render the chart in - - - url - string - Yes - - Base URL of the DHIS server + domainAxisTitle + string + No + + Title for the domain axis + + + rangeAxisTitle + string + No + + Title for the range axis width @@ -1195,46 +1169,42 @@ Height of chart - - legendPosition - string - No - top | right | bottom | left - Position of chart legend -

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: . - 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' + +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' }); }; Finally we include some div elements in the body section of the HTML document with the identifiers referred to in the plug-in Javascript. - <div id="chartA1" class="chart"></div> -<div id="chartA2" class="chart"></div> - + +<div id="chartA1" class="chart"></div> <div id="chartB1" class="chart"></div> -<div id="chartB2" class="chart"></div> + To see a complete working example please visit .