Embedding a chart on an HTML page

Hi Devs

I’m trying to embed a chart with category options on to an HTML page.

What is the correct format to map the co & de dimension? This is the example for the de only?

DHIS.getChart({

url : base,

el : 'chart1',

type : 'pie',

columns : [ {dimension : 'de',items : [ {id : 'DE_UID'	}]	} ],

rows :  [ {dimension : 'pe',items : [ {id : 'PE_UID' } ]} ],

filters : [{dimension : 'ou',items : [{id : 'UID' }]	} ],

showData : true,

});

DHIS2 version 2.25

Kind Regards

Pooben

This message and any attachments are subject to a disclaimer published at http://www.hisp.org/policies.html#comms_disclaimer. Please read the disclaimer before opening any attachment or taking any other action in terms of this electronic transmission. If you cannot access the disclaimer, kindly send an email to disclaimer@hisp.org and a copy will be provided to you. By replying to this e-mail or opening any attachment you agree to be bound by the provisions of the disclaimer.

···

---------- Forwarded message ----------
From: Pooben Dass pooben@hisp.org
Date: Fri, Nov 4, 2016 at 9:52 AM
Subject: Embedding a chart on an HTML page
To: dhis2-devs@lists.launchpad.net

Thanks Jan

I would like to have the years display seperately. I’ve tried this

rows : [{dimension:‘co’},{dimension : ‘pe’,items : [ {id : ‘LAST_5_YEARS’} ]

but the co labels are the only things that display.

The chart is able to display in the visualiser but I would like to let it display for different org units.

Attached is a sample

Kind Regards

Pooben

This message and any attachments are subject to a disclaimer published at http://www.hisp.org/policies.html#comms_disclaimer. Please read the disclaimer before opening any attachment or taking any other action in terms of this electronic transmission. If you cannot access the disclaimer, kindly send an email to disclaimer@hisp.org and a copy will be provided to you. By replying to this e-mail or opening any attachment you agree to be bound by the provisions of the disclaimer.

image

···

On Mon, Nov 7, 2016 at 12:39 PM, Jan Henrik Øverland jan@dhis2.org wrote:

Hi Pooben,

First of all, the chart plugin has been improved in 2.25 and will render charts with Highcharts instead of ExtJs. Which means you don’t have to include ExtJs at all anymore. You need jQuery 2 though.

You can link in the plugin from here: http://dhis2-cdn.org/v225/plugin/chart.js

To load charts you can do:

chartPlugin.url = ‘’;
chartPlugin.username = ‘’;
chartPlugin.password = ‘’;

chartPlugin.load([]);

To answer your question, if you want to use “assigned categories” you can simply move periods to filter and do

rows : [ {dimension : ‘co’} ]

Remember that you can always create the chart you want in the app first and click “Embed” on the toolbar to see how the chart is configured.

Jan

On 4 November 2016 at 14:11, Pooben Dass pooben@hisp.org wrote:

---------- Forwarded message ----------
From: Pooben Dass pooben@hisp.org
Date: Fri, Nov 4, 2016 at 9:52 AM
Subject: Embedding a chart on an HTML page
To: dhis2-devs@lists.launchpad.net

Hi Devs

I’m trying to embed a chart with category options on to an HTML page.

What is the correct format to map the co & de dimension? This is the example for the de only?

DHIS.getChart({

url : base,

el : ‘chart1’,

type : ‘pie’,

columns : [ {dimension : ‘de’,items : [ {id : ‘DE_UID’ }] } ],

rows : [ {dimension : ‘pe’,items : [ {id : ‘PE_UID’ } ]} ],

filters : [{dimension : ‘ou’,items : [{id : ‘UID’ }] } ],

showData : true,

});

DHIS2 version 2.25

Kind Regards

Pooben

This message and any attachments are subject to a disclaimer published at http://www.hisp.org/policies.html#comms_disclaimer. Please read the disclaimer before opening any attachment or taking any other action in terms of this electronic transmission. If you cannot access the disclaimer, kindly send an email to disclaimer@hisp.org and a copy will be provided to you. By replying to this e-mail or opening any attachment you agree to be bound by the provisions of the disclaimer.


Mailing list: https://launchpad.net/~dhis2-devs

Post to : dhis2-devs@lists.launchpad.net

Unsubscribe : https://launchpad.net/~dhis2-devs

More help : https://help.launchpad.net/ListHelp

Jan Henrik Øverland

Software developer, DHIS 2

University of Oslo

http://www.dhis2.org

Thanks for the reply Jan

I’ve tried it as you stated but I get this error

chart.js:2244 Uncaught TypeError: Cannot read property ‘index’ of undefined(…)

Here is the code

DHIS.getChart({

	url : base,

	el : 'chart1',

	type : 'column',

	columns : [ {dimension:'co'} ],

	rows :  [ {dimension : 'pe',items : [ {id : 'LAST_5_YEARS' }]} ],

	filters : [{dimension : 'ou',items : [{id : orgUnit.id }]	},{dimension : 'dx',items : [ {id : 'EKIxIlsirHJ' }]} ],

	showData : true,

	});

Regards

Pooben

This message and any attachments are subject to a disclaimer published at http://www.hisp.org/policies.html#comms_disclaimer. Please read the disclaimer before opening any attachment or taking any other action in terms of this electronic transmission. If you cannot access the disclaimer, kindly send an email to disclaimer@hisp.org and a copy will be provided to you. By replying to this e-mail or opening any attachment you agree to be bound by the provisions of the disclaimer.

···

On Tue, Nov 8, 2016 at 10:48 AM, Jan Henrik Øverland jan@dhis2.org wrote:

I see. Just set the co dimension as series (columns) and period dimension as category (rows). Then the data element and orgunit(s) as filter.

Remember, you can only have a single column dimension and a single row dimension in a chart.

On 8 November 2016 at 08:13, Pooben Dass pooben@hisp.org wrote:

Thanks Jan

I would like to have the years display seperately. I’ve tried this

rows : [{dimension:‘co’},{dimension : ‘pe’,items : [ {id : ‘LAST_5_YEARS’} ]

but the co labels are the only things that display.

The chart is able to display in the visualiser but I would like to let it display for different org units.

Attached is a sample

Kind Regards

Pooben

This message and any attachments are subject to a disclaimer published at http://www.hisp.org/policies.html#comms_disclaimer. Please read the disclaimer before opening any attachment or taking any other action in terms of this electronic transmission. If you cannot access the disclaimer, kindly send an email to disclaimer@hisp.org and a copy will be provided to you. By replying to this e-mail or opening any attachment you agree to be bound by the provisions of the disclaimer.


Jan Henrik Øverland

Software developer, DHIS 2

University of Oslo

http://www.dhis2.org

On Mon, Nov 7, 2016 at 12:39 PM, Jan Henrik Øverland jan@dhis2.org wrote:

Hi Pooben,

First of all, the chart plugin has been improved in 2.25 and will render charts with Highcharts instead of ExtJs. Which means you don’t have to include ExtJs at all anymore. You need jQuery 2 though.

You can link in the plugin from here: http://dhis2-cdn.org/v225/plugin/chart.js

To load charts you can do:

chartPlugin.url = ‘’;
chartPlugin.username = ‘’;
chartPlugin.password = ‘’;

chartPlugin.load([]);

To answer your question, if you want to use “assigned categories” you can simply move periods to filter and do

rows : [ {dimension : ‘co’} ]

Remember that you can always create the chart you want in the app first and click “Embed” on the toolbar to see how the chart is configured.

Jan

On 4 November 2016 at 14:11, Pooben Dass pooben@hisp.org wrote:

---------- Forwarded message ----------
From: Pooben Dass pooben@hisp.org
Date: Fri, Nov 4, 2016 at 9:52 AM
Subject: Embedding a chart on an HTML page
To: dhis2-devs@lists.launchpad.net

Hi Devs

I’m trying to embed a chart with category options on to an HTML page.

What is the correct format to map the co & de dimension? This is the example for the de only?

DHIS.getChart({

url : base,

el : ‘chart1’,

type : ‘pie’,

columns : [ {dimension : ‘de’,items : [ {id : ‘DE_UID’ }] } ],

rows : [ {dimension : ‘pe’,items : [ {id : ‘PE_UID’ } ]} ],

filters : [{dimension : ‘ou’,items : [{id : ‘UID’ }] } ],

showData : true,

});

DHIS2 version 2.25

Kind Regards

Pooben

This message and any attachments are subject to a disclaimer published at http://www.hisp.org/policies.html#comms_disclaimer. Please read the disclaimer before opening any attachment or taking any other action in terms of this electronic transmission. If you cannot access the disclaimer, kindly send an email to disclaimer@hisp.org and a copy will be provided to you. By replying to this e-mail or opening any attachment you agree to be bound by the provisions of the disclaimer.


Mailing list: https://launchpad.net/~dhis2-devs

Post to : dhis2-devs@lists.launchpad.net

Unsubscribe : https://launchpad.net/~dhis2-devs

More help : https://help.launchpad.net/ListHelp

Jan Henrik Øverland

Software developer, DHIS 2

University of Oslo

http://www.dhis2.org

Hi Jan

I’ve changed the script to use the gender UID as below but the Title and labels are the only things that display and there is no error

DHIS.getChart({

	url : base,

	el : 'chart1',

	type : 'column',

	columns : [ {dimension:'NJEphFlHptZ',items : [ {id : 'EzyqzEZWZnJ' },{id : 'oa0TQEBOTSc' }]} ],

	filters : [{dimension : 'ou',items : [{id : orgUnit.id }]	},{dimension : 'dx',items : [ {id : 'EKIxIlsirHJ' }]} ],

	showData : true,

	});

Is this what you meant?

Regards

Pooben

This message and any attachments are subject to a disclaimer published at http://www.hisp.org/policies.html#comms_disclaimer. Please read the disclaimer before opening any attachment or taking any other action in terms of this electronic transmission. If you cannot access the disclaimer, kindly send an email to disclaimer@hisp.org and a copy will be provided to you. By replying to this e-mail or opening any attachment you agree to be bound by the provisions of the disclaimer.

···

On Tue, Nov 8, 2016 at 11:36 AM, Jan Henrik Øverland jan@dhis2.org wrote:

You are right, having “co” as a dimension and the data element as filter isn’t actually supported.

However, selecting e.g. gender with items male/female as a dimension by using ids will work. Is that okay for now?

On 8 November 2016 at 10:10, Pooben Dass pooben@hisp.org wrote:

Thanks for the reply Jan

I’ve tried it as you stated but I get this error

chart.js:2244 Uncaught TypeError: Cannot read property ‘index’ of undefined(…)

Here is the code

DHIS.getChart({

  url : base,
  el : 'chart1',
  type : 'column',
  columns : [ {dimension:'co'} ],
  rows :  [ {dimension : 'pe',items : [ {id : 'LAST_5_YEARS' }]} ],
  filters : [{dimension : 'ou',items : [{id : orgUnit.id }]	},{dimension : 'dx',items : [ {id : 'EKIxIlsirHJ' }]} ],
  showData : true,
  });

Regards

Pooben

This message and any attachments are subject to a disclaimer published at http://www.hisp.org/policies.html#comms_disclaimer. Please read the disclaimer before opening any attachment or taking any other action in terms of this electronic transmission. If you cannot access the disclaimer, kindly send an email to disclaimer@hisp.org and a copy will be provided to you. By replying to this e-mail or opening any attachment you agree to be bound by the provisions of the disclaimer.


Jan Henrik Øverland

Software developer, DHIS 2

University of Oslo

http://www.dhis2.org

On Tue, Nov 8, 2016 at 10:48 AM, Jan Henrik Øverland jan@dhis2.org wrote:

I see. Just set the co dimension as series (columns) and period dimension as category (rows). Then the data element and orgunit(s) as filter.

Remember, you can only have a single column dimension and a single row dimension in a chart.

On 8 November 2016 at 08:13, Pooben Dass pooben@hisp.org wrote:

Thanks Jan

I would like to have the years display seperately. I’ve tried this

rows : [{dimension:‘co’},{dimension : ‘pe’,items : [ {id : ‘LAST_5_YEARS’} ]

but the co labels are the only things that display.

The chart is able to display in the visualiser but I would like to let it display for different org units.

Attached is a sample

Kind Regards

Pooben

This message and any attachments are subject to a disclaimer published at http://www.hisp.org/policies.html#comms_disclaimer. Please read the disclaimer before opening any attachment or taking any other action in terms of this electronic transmission. If you cannot access the disclaimer, kindly send an email to disclaimer@hisp.org and a copy will be provided to you. By replying to this e-mail or opening any attachment you agree to be bound by the provisions of the disclaimer.


Jan Henrik Øverland

Software developer, DHIS 2

University of Oslo

http://www.dhis2.org

On Mon, Nov 7, 2016 at 12:39 PM, Jan Henrik Øverland jan@dhis2.org wrote:

Hi Pooben,

First of all, the chart plugin has been improved in 2.25 and will render charts with Highcharts instead of ExtJs. Which means you don’t have to include ExtJs at all anymore. You need jQuery 2 though.

You can link in the plugin from here: http://dhis2-cdn.org/v225/plugin/chart.js

To load charts you can do:

chartPlugin.url = ‘’;
chartPlugin.username = ‘’;
chartPlugin.password = ‘’;

chartPlugin.load([]);

To answer your question, if you want to use “assigned categories” you can simply move periods to filter and do

rows : [ {dimension : ‘co’} ]

Remember that you can always create the chart you want in the app first and click “Embed” on the toolbar to see how the chart is configured.

Jan

On 4 November 2016 at 14:11, Pooben Dass pooben@hisp.org wrote:

---------- Forwarded message ----------
From: Pooben Dass pooben@hisp.org
Date: Fri, Nov 4, 2016 at 9:52 AM
Subject: Embedding a chart on an HTML page
To: dhis2-devs@lists.launchpad.net

Hi Devs

I’m trying to embed a chart with category options on to an HTML page.

What is the correct format to map the co & de dimension? This is the example for the de only?

DHIS.getChart({

url : base,

el : ‘chart1’,

type : ‘pie’,

columns : [ {dimension : ‘de’,items : [ {id : ‘DE_UID’ }] } ],

rows : [ {dimension : ‘pe’,items : [ {id : ‘PE_UID’ } ]} ],

filters : [{dimension : ‘ou’,items : [{id : ‘UID’ }] } ],

showData : true,

});

DHIS2 version 2.25

Kind Regards

Pooben

This message and any attachments are subject to a disclaimer published at http://www.hisp.org/policies.html#comms_disclaimer. Please read the disclaimer before opening any attachment or taking any other action in terms of this electronic transmission. If you cannot access the disclaimer, kindly send an email to disclaimer@hisp.org and a copy will be provided to you. By replying to this e-mail or opening any attachment you agree to be bound by the provisions of the disclaimer.


Mailing list: https://launchpad.net/~dhis2-devs

Post to : dhis2-devs@lists.launchpad.net

Unsubscribe : https://launchpad.net/~dhis2-devs

More help : https://help.launchpad.net/ListHelp

Jan Henrik Øverland

Software developer, DHIS 2

University of Oslo

http://www.dhis2.org

Hi Jan

Sorry i copied and overwrote the row in this email but this is the script all that displays is the Title and label.

DHIS.getChart({

	url : base,

	el : 'chart1',

	type : 'column',

	columns : [ {dimension:'NJEphFlHptZ',items : [ {id : 'EzyqzEZWZnJ' },{id : 'oa0TQEBOTSc' }]} ],

rows : [ {dimension : ‘pe’,items : [ {id : ‘LAST_5_YEARS’ }]} ],

	filters : [{dimension : 'ou',items : [{id : orgUnit.id }]	},{dimension : 'dx',items : [ {id : 'EKIxIlsirHJ' }]} ],

	showData : true,

	}); 

Regards

Pooben

This message and any attachments are subject to a disclaimer published at http://www.hisp.org/policies.html#comms_disclaimer. Please read the disclaimer before opening any attachment or taking any other action in terms of this electronic transmission. If you cannot access the disclaimer, kindly send an email to disclaimer@hisp.org and a copy will be provided to you. By replying to this e-mail or opening any attachment you agree to be bound by the provisions of the disclaimer.

···

On Tue, Nov 8, 2016 at 2:29 PM, Jan Henrik Øverland jan@dhis2.org wrote:

Then add periods to rows and it should work?

On 8 November 2016 at 13:26, Pooben Dass pooben@hisp.org wrote:

Hi Jan

I’ve changed the script to use the gender UID as below but the Title and labels are the only things that display and there is no error

DHIS.getChart({

  url : base,
  el : 'chart1',
  type : 'column',
  columns : [ {dimension:'NJEphFlHptZ',items : [ {id : 'EzyqzEZWZnJ' },{id : 'oa0TQEBOTSc' }]} ],
  filters : [{dimension : 'ou',items : [{id : orgUnit.id }]	},{dimension : 'dx',items : [ {id : 'EKIxIlsirHJ' }]} ],
  showData : true,
  });

Is this what you meant?

Regards

Pooben

This message and any attachments are subject to a disclaimer published at http://www.hisp.org/policies.html#comms_disclaimer. Please read the disclaimer before opening any attachment or taking any other action in terms of this electronic transmission. If you cannot access the disclaimer, kindly send an email to disclaimer@hisp.org and a copy will be provided to you. By replying to this e-mail or opening any attachment you agree to be bound by the provisions of the disclaimer.


Jan Henrik Øverland

Software developer, DHIS 2

University of Oslo

http://www.dhis2.org

On Tue, Nov 8, 2016 at 11:36 AM, Jan Henrik Øverland jan@dhis2.org wrote:

You are right, having “co” as a dimension and the data element as filter isn’t actually supported.

However, selecting e.g. gender with items male/female as a dimension by using ids will work. Is that okay for now?

On 8 November 2016 at 10:10, Pooben Dass pooben@hisp.org wrote:

Thanks for the reply Jan

I’ve tried it as you stated but I get this error

chart.js:2244 Uncaught TypeError: Cannot read property ‘index’ of undefined(…)

Here is the code

DHIS.getChart({

  url : base,
  el : 'chart1',
  type : 'column',
  columns : [ {dimension:'co'} ],
  rows :  [ {dimension : 'pe',items : [ {id : 'LAST_5_YEARS' }]} ],
  filters : [{dimension : 'ou',items : [{id : orgUnit.id }]	},{dimension : 'dx',items : [ {id : 'EKIxIlsirHJ' }]} ],
  showData : true,
  });

Regards

Pooben

This message and any attachments are subject to a disclaimer published at http://www.hisp.org/policies.html#comms_disclaimer. Please read the disclaimer before opening any attachment or taking any other action in terms of this electronic transmission. If you cannot access the disclaimer, kindly send an email to disclaimer@hisp.org and a copy will be provided to you. By replying to this e-mail or opening any attachment you agree to be bound by the provisions of the disclaimer.


Jan Henrik Øverland

Software developer, DHIS 2

University of Oslo

http://www.dhis2.org

On Tue, Nov 8, 2016 at 10:48 AM, Jan Henrik Øverland jan@dhis2.org wrote:

I see. Just set the co dimension as series (columns) and period dimension as category (rows). Then the data element and orgunit(s) as filter.

Remember, you can only have a single column dimension and a single row dimension in a chart.

On 8 November 2016 at 08:13, Pooben Dass pooben@hisp.org wrote:

Thanks Jan

I would like to have the years display seperately. I’ve tried this

rows : [{dimension:‘co’},{dimension : ‘pe’,items : [ {id : ‘LAST_5_YEARS’} ]

but the co labels are the only things that display.

The chart is able to display in the visualiser but I would like to let it display for different org units.

Attached is a sample

Kind Regards

Pooben

This message and any attachments are subject to a disclaimer published at http://www.hisp.org/policies.html#comms_disclaimer. Please read the disclaimer before opening any attachment or taking any other action in terms of this electronic transmission. If you cannot access the disclaimer, kindly send an email to disclaimer@hisp.org and a copy will be provided to you. By replying to this e-mail or opening any attachment you agree to be bound by the provisions of the disclaimer.


Jan Henrik Øverland

Software developer, DHIS 2

University of Oslo

http://www.dhis2.org

On Mon, Nov 7, 2016 at 12:39 PM, Jan Henrik Øverland jan@dhis2.org wrote:

Hi Pooben,

First of all, the chart plugin has been improved in 2.25 and will render charts with Highcharts instead of ExtJs. Which means you don’t have to include ExtJs at all anymore. You need jQuery 2 though.

You can link in the plugin from here: http://dhis2-cdn.org/v225/plugin/chart.js

To load charts you can do:

chartPlugin.url = ‘’;
chartPlugin.username = ‘’;
chartPlugin.password = ‘’;

chartPlugin.load([]);

To answer your question, if you want to use “assigned categories” you can simply move periods to filter and do

rows : [ {dimension : ‘co’} ]

Remember that you can always create the chart you want in the app first and click “Embed” on the toolbar to see how the chart is configured.

Jan

On 4 November 2016 at 14:11, Pooben Dass pooben@hisp.org wrote:

---------- Forwarded message ----------
From: Pooben Dass pooben@hisp.org
Date: Fri, Nov 4, 2016 at 9:52 AM
Subject: Embedding a chart on an HTML page
To: dhis2-devs@lists.launchpad.net

Hi Devs

I’m trying to embed a chart with category options on to an HTML page.

What is the correct format to map the co & de dimension? This is the example for the de only?

DHIS.getChart({

url : base,

el : ‘chart1’,

type : ‘pie’,

columns : [ {dimension : ‘de’,items : [ {id : ‘DE_UID’ }] } ],

rows : [ {dimension : ‘pe’,items : [ {id : ‘PE_UID’ } ]} ],

filters : [{dimension : ‘ou’,items : [{id : ‘UID’ }] } ],

showData : true,

});

DHIS2 version 2.25

Kind Regards

Pooben

This message and any attachments are subject to a disclaimer published at http://www.hisp.org/policies.html#comms_disclaimer. Please read the disclaimer before opening any attachment or taking any other action in terms of this electronic transmission. If you cannot access the disclaimer, kindly send an email to disclaimer@hisp.org and a copy will be provided to you. By replying to this e-mail or opening any attachment you agree to be bound by the provisions of the disclaimer.


Mailing list: https://launchpad.net/~dhis2-devs

Post to : dhis2-devs@lists.launchpad.net

Unsubscribe : https://launchpad.net/~dhis2-devs

More help : https://help.launchpad.net/ListHelp

Jan Henrik Øverland

Software developer, DHIS 2

University of Oslo

http://www.dhis2.org

Hi Jan

I had a look at the server and its a DHIS 2.24 version.

Is there No way for it to work on 2.24?

Regards

Pooben

This message and any attachments are subject to a disclaimer published at http://www.hisp.org/policies.html#comms_disclaimer. Please read the disclaimer before opening any attachment or taking any other action in terms of this electronic transmission. If you cannot access the disclaimer, kindly send an email to disclaimer@hisp.org and a copy will be provided to you. By replying to this e-mail or opening any attachment you agree to be bound by the provisions of the disclaimer.

···

On Tue, Nov 8, 2016 at 2:45 PM, Jan Henrik Øverland jan@dhis2.org wrote:

That config should work and I just had it work on the 2.25 dashboard.

I see you are still using DHIS.getChart - which version of the plugin is this?

Try the 2.25 plugin and it will work (as described earlier in the thread). No guarantees when the versions don’t match.

On 8 November 2016 at 13:32, Pooben Dass pooben@hisp.org wrote:

Hi Jan

Sorry i copied and overwrote the row in this email but this is the script all that displays is the Title and label.

DHIS.getChart({

  url : base,
  el : 'chart1',
  type : 'column',
  columns : [ {dimension:'NJEphFlHptZ',items : [ {id : 'EzyqzEZWZnJ' },{id : 'oa0TQEBOTSc' }]} ],

rows : [ {dimension : ‘pe’,items : [ {id : ‘LAST_5_YEARS’ }]} ],

  filters : [{dimension : 'ou',items : [{id : orgUnit.id }]	},{dimension : 'dx',items : [ {id : 'EKIxIlsirHJ' }]} ],
  showData : true,
  }); 

Regards

Pooben

This message and any attachments are subject to a disclaimer published at http://www.hisp.org/policies.html#comms_disclaimer. Please read the disclaimer before opening any attachment or taking any other action in terms of this electronic transmission. If you cannot access the disclaimer, kindly send an email to disclaimer@hisp.org and a copy will be provided to you. By replying to this e-mail or opening any attachment you agree to be bound by the provisions of the disclaimer.


Jan Henrik Øverland

Software developer, DHIS 2

University of Oslo

http://www.dhis2.org

On Tue, Nov 8, 2016 at 2:29 PM, Jan Henrik Øverland jan@dhis2.org wrote:

Then add periods to rows and it should work?

On 8 November 2016 at 13:26, Pooben Dass pooben@hisp.org wrote:

Hi Jan

I’ve changed the script to use the gender UID as below but the Title and labels are the only things that display and there is no error

DHIS.getChart({

  url : base,
  el : 'chart1',
  type : 'column',
  columns : [ {dimension:'NJEphFlHptZ',items : [ {id : 'EzyqzEZWZnJ' },{id : 'oa0TQEBOTSc' }]} ],
  filters : [{dimension : 'ou',items : [{id : orgUnit.id }]	},{dimension : 'dx',items : [ {id : 'EKIxIlsirHJ' }]} ],
  showData : true,
  });

Is this what you meant?

Regards

Pooben

This message and any attachments are subject to a disclaimer published at http://www.hisp.org/policies.html#comms_disclaimer. Please read the disclaimer before opening any attachment or taking any other action in terms of this electronic transmission. If you cannot access the disclaimer, kindly send an email to disclaimer@hisp.org and a copy will be provided to you. By replying to this e-mail or opening any attachment you agree to be bound by the provisions of the disclaimer.


Jan Henrik Øverland

Software developer, DHIS 2

University of Oslo

http://www.dhis2.org

On Tue, Nov 8, 2016 at 11:36 AM, Jan Henrik Øverland jan@dhis2.org wrote:

You are right, having “co” as a dimension and the data element as filter isn’t actually supported.

However, selecting e.g. gender with items male/female as a dimension by using ids will work. Is that okay for now?

On 8 November 2016 at 10:10, Pooben Dass pooben@hisp.org wrote:

Thanks for the reply Jan

I’ve tried it as you stated but I get this error

chart.js:2244 Uncaught TypeError: Cannot read property ‘index’ of undefined(…)

Here is the code

DHIS.getChart({

  url : base,
  el : 'chart1',
  type : 'column',
  columns : [ {dimension:'co'} ],
  rows :  [ {dimension : 'pe',items : [ {id : 'LAST_5_YEARS' }]} ],
  filters : [{dimension : 'ou',items : [{id : orgUnit.id }]	},{dimension : 'dx',items : [ {id : 'EKIxIlsirHJ' }]} ],
  showData : true,
  });

Regards

Pooben

This message and any attachments are subject to a disclaimer published at http://www.hisp.org/policies.html#comms_disclaimer. Please read the disclaimer before opening any attachment or taking any other action in terms of this electronic transmission. If you cannot access the disclaimer, kindly send an email to disclaimer@hisp.org and a copy will be provided to you. By replying to this e-mail or opening any attachment you agree to be bound by the provisions of the disclaimer.


Jan Henrik Øverland

Software developer, DHIS 2

University of Oslo

http://www.dhis2.org

On Tue, Nov 8, 2016 at 10:48 AM, Jan Henrik Øverland jan@dhis2.org wrote:

I see. Just set the co dimension as series (columns) and period dimension as category (rows). Then the data element and orgunit(s) as filter.

Remember, you can only have a single column dimension and a single row dimension in a chart.

On 8 November 2016 at 08:13, Pooben Dass pooben@hisp.org wrote:

Thanks Jan

I would like to have the years display seperately. I’ve tried this

rows : [{dimension:‘co’},{dimension : ‘pe’,items : [ {id : ‘LAST_5_YEARS’} ]

but the co labels are the only things that display.

The chart is able to display in the visualiser but I would like to let it display for different org units.

Attached is a sample

Kind Regards

Pooben

This message and any attachments are subject to a disclaimer published at http://www.hisp.org/policies.html#comms_disclaimer. Please read the disclaimer before opening any attachment or taking any other action in terms of this electronic transmission. If you cannot access the disclaimer, kindly send an email to disclaimer@hisp.org and a copy will be provided to you. By replying to this e-mail or opening any attachment you agree to be bound by the provisions of the disclaimer.


Jan Henrik Øverland

Software developer, DHIS 2

University of Oslo

http://www.dhis2.org

On Mon, Nov 7, 2016 at 12:39 PM, Jan Henrik Øverland jan@dhis2.org wrote:

Hi Pooben,

First of all, the chart plugin has been improved in 2.25 and will render charts with Highcharts instead of ExtJs. Which means you don’t have to include ExtJs at all anymore. You need jQuery 2 though.

You can link in the plugin from here: http://dhis2-cdn.org/v225/plugin/chart.js

To load charts you can do:

chartPlugin.url = ‘’;
chartPlugin.username = ‘’;
chartPlugin.password = ‘’;

chartPlugin.load([]);

To answer your question, if you want to use “assigned categories” you can simply move periods to filter and do

rows : [ {dimension : ‘co’} ]

Remember that you can always create the chart you want in the app first and click “Embed” on the toolbar to see how the chart is configured.

Jan

On 4 November 2016 at 14:11, Pooben Dass pooben@hisp.org wrote:

---------- Forwarded message ----------
From: Pooben Dass pooben@hisp.org
Date: Fri, Nov 4, 2016 at 9:52 AM
Subject: Embedding a chart on an HTML page
To: dhis2-devs@lists.launchpad.net

Hi Devs

I’m trying to embed a chart with category options on to an HTML page.

What is the correct format to map the co & de dimension? This is the example for the de only?

DHIS.getChart({

url : base,

el : ‘chart1’,

type : ‘pie’,

columns : [ {dimension : ‘de’,items : [ {id : ‘DE_UID’ }] } ],

rows : [ {dimension : ‘pe’,items : [ {id : ‘PE_UID’ } ]} ],

filters : [{dimension : ‘ou’,items : [{id : ‘UID’ }] } ],

showData : true,

});

DHIS2 version 2.25

Kind Regards

Pooben

This message and any attachments are subject to a disclaimer published at http://www.hisp.org/policies.html#comms_disclaimer. Please read the disclaimer before opening any attachment or taking any other action in terms of this electronic transmission. If you cannot access the disclaimer, kindly send an email to disclaimer@hisp.org and a copy will be provided to you. By replying to this e-mail or opening any attachment you agree to be bound by the provisions of the disclaimer.


Mailing list: https://launchpad.net/~dhis2-devs

Post to : dhis2-devs@lists.launchpad.net

Unsubscribe : https://launchpad.net/~dhis2-devs

More help : https://help.launchpad.net/ListHelp

Jan Henrik Øverland

Software developer, DHIS 2

University of Oslo

http://www.dhis2.org