Example: Embedding charts with the Visualizer Plugin

+ Example: Embedding charts with the Visualizer Plugin + In this example we will see how we can embed good-looking Ext JS charts () with data served from a DHIS back-end into a Web page. To accomplish this we will use the DHIS Visualizer plugin. The plugin is written in Javascript and depends on the Ext JS library only. A complete working example can be found at . Open the page in a web browser and view the source to see how it is set up. + We start by including three required Javascript files in the header section of the HTML document. The first file is the Ext JS CSS stylesheet and the second is the Ext JS Javascript library (we use the Google content delivery network in this case). The third file is the Visualizer plugin. Make sure the path is pointing to your DHIS server installation. + <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> + 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 variabel is pointing to your DHIS installation. + 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 + }); +}); + Now let us have a look at the various options for the Visualizer plugin. 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. + + Visualizer plugin configuration + + + + + Param + + + Type + + + Required + + + Options (default first) + + + Description + + + + uid + string + No + + Identifier of a pre-defined chart in DHIS + + + type + string + No + column | stackedcolumn | bar | stackedbar | line | area | pie + Chart type + + + indicators + [integer] + Yes* + + Identifiers of indicators to include in chart + + + dataelements + [integer] + 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 + [integer] + 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 + + + filter + string + No + data | period | organiastionunit + Dimension to use as chart filter + + + el + string + Yes + + Identifier of HTML element to render the chart in + + + url + string + Yes + + Base URL of the DHIS server + + + width + integer + No + + Width of chart + + + height + integer + No + + 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' + }); +}; + Finally we include some div elements in the body section of the HTML document with the identifiers referred to in the plugin Javascript. + <div id="chartA1" class="chart"></div> +<div id="chartA2" class="chart"></div> + +<div id="chartB1" class="chart"></div> +<div id="chartB2" class="chart"></div> + To see a complete working example please visit . +