# Query regarding ExtJs

**URL:** <https://community.dhis2.org/t/query-regarding-extjs/31115>\
**Category:** Support - Assistance technique\
**Created:** [4 November 2015 08:40 UTC](https://community.dhis2.org/t/query-regarding-extjs/31115 "2015-11-04T08:40:43Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sourabh\_Bhardwaj](https://dhis2.b-cdn.net/letter_avatar_proxy/v4/letter/s/bbe5ce/32.png) [@Sourabh\_Bhardwaj](https://community.dhis2.org/u/Sourabh_Bhardwaj)\
**Post date:** [4 November 2015 08:40 UTC](https://community.dhis2.org/t/query-regarding-extjs/31115/1 "2015-11-04T08:40:43Z")

</div>

Hi Sir,

This side Sourabh (working as software developer Intern in Hisp India) and Priyanka(working as software developer in Hisp India)

There is one requirement that has come up on ExtJS to plot charts dynamically by getting data through web API.

We are facing with a query as explained as follows: We want to display the data(period) in legend dynamically as shown in figure 1.

![image](https://dhis2.b-cdn.net/images/transparent.png)

figure 1

But we are getting output as shown in figure 2, although it represents data from Apr14 to Mar15 still the legend shows Apr14 to Sep14

![image](https://dhis2.b-cdn.net/images/transparent.png)

figure 2

Currently we are fixing the period in legend as shown in highlighted text-

Ext.require(‘Ext.chart.\*’);

```
		  Ext.require('Ext.layout.container.Fit');

			Ext.onReady(function ()

			{

	var store = Ext.create('Ext.data.JsonStore', {

fields: ['ou', 'Apr14ToSep14', 'Apr15ToSep15']

```

});

```
				var data = [];

				for (var i = 0; i < count; i++){

```

data.push({ou: orgUnitname[i], Apr14ToSep14: result[i], Apr15ToSep15: result1[i] });

```
				}

				store.loadData(data);

				console.log(store.getRange());

				var panel1 = Ext.create('widget.panel', {

				width: 600,

				height: 400,

				title: 'Early ANC Registration',

				renderTo: Ext.getBody(),

				layout: 'fit',

				items: {

					xtype: 'chart',

					animate: true,

					shadow: true,

					store: store,

					legend: {

						position: 'right',

						renderer: function(storeItem, item) {

```

this.setTitle(storeItem.get(‘startPeriod’) + 'to ’ + storeItem.get(‘endPeriod’) );

}

```
							},

				axes: [{

					type: 'Numeric',

					position: 'left',

					fields: ['Apr14ToSep14', 'Apr15ToSep15'],

					title: false,

					grid: true,

					roundToDecimal: false

					}, {

				type: 'Category',

				position: 'Bottom',

				fields: ['ou'],

				label: {

					    rotate:{degrees:270}

							},

				title: false

				}],

				series: [{

					//type: 'bar',

				type: 'column',

				axis: 'bottom',

				gutter: 80,

				xField: 'ou',

				yField: ['Apr14ToSep14', 'Apr15ToSep15'],

				stacked: false,

				tips: {

```

trackMouse: true,

width: 65,

height: 28,

renderer: function(storeItem, item) {

this.setTitle(String(item.value[1]));

}

}

```
						}]

					}

				});

					});

```

});

})

```
		})

	})

```

We tried making it dynamic by taking a variable and passing as:

var periodStr1 = startPeriod +“to”+ endPeriod;

fields: [‘ou’, periodStr1 , periodStr1]. But this doesn’t work.

Can you please suggest a way to make the legend dynamic based on the periods passed by the user.

Regards

Sourabh Bhardwaj.

---

<div class="post-metadata">

**Author:** ![Jan\_Henrik\_Overland](https://dhis2.b-cdn.net/letter_avatar_proxy/v4/letter/j/48db29/32.png) [@Jan\_Henrik\_Overland](https://community.dhis2.org/u/Jan_Henrik_Overland)\
**Post date:** [4 November 2015 08:50 UTC](https://community.dhis2.org/t/query-regarding-extjs/31115/2 "2015-11-04T08:50:26Z")

</div>

Hi, I just replied in the private thead.

![image](https://dhis2.b-cdn.net/images/transparent.png)

![image](https://dhis2.b-cdn.net/images/transparent.png)

> **···**
>
> On Wed, Nov 4, 2015 at 9:40 AM, Sourabh Bhardwaj [bsourabh191@gmail.com](mailto:bsourabh191@gmail.com) wrote:
> 
> > Hi Sir,
> > 
> > This side Sourabh (working as software developer Intern in Hisp India) and Priyanka(working as software developer in Hisp India)
> 
> > 
> 
> > There is one requirement that has come up on ExtJS to plot charts dynamically by getting data through web API.
> 
> > We are facing with a query as explained as follows: We want to display the data(period) in legend dynamically as shown in figure 1.
> 
> > 
> 
> > figure 1
> 
> > 
> 
> > 
> 
> > But we are getting output as shown in figure 2, although it represents data from Apr14 to Mar15 still the legend shows Apr14 to Sep14
> 
> > 
> 
> > 
> 
> > 
> 
> > figure 2
> 
> > 
> 
> > Currently we are fixing the period in legend as shown in highlighted text-
> 
> > 
> 
> > Ext.require(‘Ext.chart.\*’);
> 
> > ```
> > Ext.require('Ext.layout.container.Fit');
> > 
> > ```
> 
> > 
> 
> > ```
> > Ext.onReady(function ()
> > 
> > ```
> 
> > ```
> > {
> > 
> > ```
> 
> > 
> 
> > ```
> > var store = Ext.create('Ext.data.JsonStore', {
> > 
> > ```
> 
> > ```
> > fields: ['ou', 'Apr14ToSep14', 'Apr15ToSep15']
> > 
> > ```
> 
> > });
> 
> > 
> 
> > 
> 
> > ```
> > var data = [];
> > 
> > ```
> 
> > ```
> > for (var i = 0; i < count; i++){
> > 
> > ```
> 
> > 
> 
> > data.push({ou: orgUnitname[i], Apr14ToSep14: result[i], Apr15ToSep15: result1[i] });
> 
> > 
> 
> > ```
> > }
> > 
> > ```
> 
> > ```
> > store.loadData(data);
> > 
> > ```
> 
> > 
> 
> > ```
> > console.log(store.getRange());
> > 
> > ```
> 
> > 
> 
> > ```
> > var panel1 = Ext.create('widget.panel', {
> > 
> > ```
> 
> > ```
> > width: 600,
> > 
> > ```
> 
> > ```
> > height: 400,
> > 
> > ```
> 
> > ```
> > title: 'Early ANC Registration',
> > 
> > ```
> 
> > ```
> > renderTo: Ext.getBody(),
> > 
> > ```
> 
> > ```
> > layout: 'fit',
> > 
> > ```
> 
> > ```
> > items: {
> > 
> > ```
> 
> > ```
> > xtype: 'chart',
> > 
> > ```
> 
> > ```
> > animate: true,
> > 
> > ```
> 
> > ```
> > shadow: true,
> > 
> > ```
> 
> > ```
> > store: store,
> > 
> > ```
> 
> > ```
> > legend: {
> > 
> > ```
> 
> > ```
> > position: 'right',
> > 
> > ```
> 
> > ```
> > renderer: function(storeItem, item) {
> > 
> > ```
> 
> > this.setTitle(storeItem.get(‘startPeriod’) + 'to ’ + storeItem.get(‘endPeriod’) );
> 
> > }
> 
> > 
> 
> > ```
> > },
> > 
> > ```
> 
> > ```
> > axes: [{
> > 
> > ```
> 
> > ```
> > type: 'Numeric',
> > 
> > ```
> 
> > ```
> > position: 'left',
> > 
> > ```
> 
> > ```
> > fields: ['Apr14ToSep14', 'Apr15ToSep15'],
> > 
> > ```
> 
> > ```
> > title: false,
> > 
> > ```
> 
> > ```
> > grid: true,
> > 
> > ```
> 
> > 
> 
> > ```
> > roundToDecimal: false
> > 
> > ```
> 
> > ```
> > }, {
> > 
> > ```
> 
> > ```
> > type: 'Category',
> > 
> > ```
> 
> > ```
> > position: 'Bottom',
> > 
> > ```
> 
> > ```
> > fields: ['ou'],
> > 
> > ```
> 
> > ```
> > label: {
> > 
> > ```
> 
> > ```
> > rotate:{degrees:270}
> > 
> > ```
> 
> > 
> 
> > ```
> > },
> > 
> > ```
> 
> > ```
> > title: false
> > 
> > ```
> 
> > 
> 
> > ```
> > }],
> > 
> > ```
> 
> > ```
> > series: [{
> > 
> > ```
> 
> > ```
> > //type: 'bar',
> > 
> > ```
> 
> > ```
> > type: 'column',
> > 
> > ```
> 
> > ```
> > axis: 'bottom',
> > 
> > ```
> 
> > ```
> > gutter: 80,
> > 
> > ```
> 
> > ```
> > xField: 'ou',
> > 
> > ```
> 
> > ```
> > yField: ['Apr14ToSep14', 'Apr15ToSep15'],
> > 
> > ```
> 
> > ```
> > stacked: false,
> > 
> > ```
> 
> > ```
> > tips: {
> > 
> > ```
> 
> > trackMouse: true,
> 
> > width: 65,
> 
> > height: 28,
> 
> > renderer: function(storeItem, item) {
> 
> > this.setTitle(String(item.value[1]));
> 
> > }
> 
> > }
> 
> > ```
> > }]
> > 
> > ```
> 
> > ```
> > }
> > 
> > ```
> 
> > ```
> > });
> > 
> > ```
> 
> > ```
> > });
> > 
> > ```
> 
> > });
> 
> > })
> 
> > 
> 
> > ```
> > })
> > 
> > ```
> 
> > ```
> > })
> > 
> > ```
> 
> > 
> 
> > 
> 
> > We tried making it dynamic by taking a variable and passing as:
> 
> > var periodStr1 = startPeriod +“to”+ endPeriod;
> 
> > 
> 
> > fields: [‘ou’, periodStr1 , periodStr1]. But this doesn’t work.
> 
> > 
> 
> > Can you please suggest a way to make the legend dynamic based on the periods passed by the user.
> 
> > 
> 
> > Regards
> 
> > Sourabh Bhardwaj.
> 
> > * * *
> > 
> > Mailing list: [https://launchpad.net/~dhis2-devs](https://launchpad.net/~dhis2-devs)
> > 
> > Post to : [dhis2-devs@lists.launchpad.net](mailto:dhis2-devs@lists.launchpad.net)
> > 
> > Unsubscribe : [https://launchpad.net/~dhis2-devs](https://launchpad.net/~dhis2-devs)
> > 
> > More help : [https://help.launchpad.net/ListHelp](https://help.launchpad.net/ListHelp)