ResourceHistogram, and allocation template customization

Discuss issues related to v3.x
Post Reply
User avatar
Posts: 5
Joined: Thu Jul 10, 2014 11:27 am

ResourceHistogram, and allocation template customization

Post by adrianot » Tue Jul 25, 2017 11:17 am

we are trying to change the text template of the resource histogram to make it more understandable to the user.

Please see the attachment.

Basically we see here 8,10, ... we could understand we're talking about hours.

Let's say that we prefer to show "8h 10mins" for instance... is it possible?

Thank you!
Rh.png (1.92 KiB) Viewed 2358 times

User avatar
Premium Member
Premium Member
Posts: 15621
Joined: Sat Dec 19, 2009 11:41 pm
Location: Sweden

Re: ResourceHistogram, and allocation template customization

Post by mats » Sat Jul 29, 2017 7:24 pm

Yes it's possible and easy :)

Add these declarations to your Histogram and you get control over what is written inside each bar. Now all you have to do is to convert the amount of milliseconds into the duration units you like.

Code: Select all

barTpl : new Ext.XTemplate('<tpl for=".">' +
                '<div id="{id}" class="gnt-resourcehistogram-bar ' + (this.barCls || '') + ' {cls}" gnt-bar-index="{index}" style="left:{left}px;top:{top}px;height:{height}px;width:{width}px">' +
                '<span class="gnt-resourcehistogram-bar-text" style="">{value}</span>' +
                '</div>' +

            barRenderer : function (resourceId, allocationData, tplData) {
                var allocation  = this.calendar.convertMSDurationToUnit(allocationData.allocationMS, 'h') + 'h';

                return {
                    value : allocation
Tired of debugging javascript errors in web applications? Try our new error logging service RootCause, or read more on the Sencha blog

API documentation

Post Reply