We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Feature request: Histogram

Thread ID:





118790 Apr 9,2015 08:00 PM UTC Feb 8,2019 08:24 AM UTC JavaScript 3
Tags: ejGantt
Franjkovic Ivan
Asked On April 9, 2015 08:00 PM UTC

Hello all
do you have plans to include histogram feature in the Gantt chart?
Something like this one: http://www.bryntum.com/forum/download/file.php?id=3071
You have already Resources, so it would be nice to see them in histogram form.
Thank you.

Mahalakshmi Karthikeyan [Syncfusion]
Replied On April 10, 2015 07:07 AM UTC

Hi Franjkovic,

Thanks for using Syncfusion product.

We would like to inform you that we have already planned and logged a feature request regarding this.

A support incident has been created under your account to track the status of this requirement. Please log on to our support website to check for further updates.


Please let us know if you require further assistance on this.


Mahalakshmi K.

Replied On February 7, 2019 03:04 AM UTC

Hello Mahalakshmi, I think this is a useful feature, and i saw your histogram has hours.

Can you please allow us to customize the histogram to show

  1. for e.g. which all tasks he is working on
  2. or custom (which skills he has)
  3. Also link it so the gantt task so when user select task it filters/highlights the resources for that task only.

Jayakumar Duraisamy [Syncfusion]
Replied On February 8, 2019 08:24 AM UTC

Hi Megatron, 
Please find the response below: 
Query1: or custom (which skills he has) 
We have prepared the Gantt sample with histogram view. Using “queryTaskbarInfo client-side event we have customized the taskbar color, label color and label position. Using “args.taskbar” parameter we have append skills in the taskbar in histogram view.  
Please find the code example below: 
<script type="text/javascript"> 
function load() { 
            this.isProjectViewData = true; 
function resourceQueryTask(args) { 
            args.taskbarBackground = args.data.isOverAllocated ? "#0000FF" : "#3CB371"; 
            args.labelColor = "#FFFFFF"; 
            $(args.taskbar).find(".e-gantthistoworklabel").css("transform", "none"); 
            var rowIndex = $("#histoview").data("ejGantt").getGanttChartRows().index($(args.taskbar).closest('tr.e-ganttrowcell')), 
                resourceSkills = args.model.currentViewData[rowIndex].Skills, 
            resourceWork = $(args.taskbar).find(".e-gantthistoworklabel").text(); 
            $(args.taskbar).find(".e-gantthistoworklabel").text("Skills- " + resourceSkills + ", Work- " + resourceWork); 
Query2: Also link it so the gantt task so when user select task it filters/highlights the resources for that task only 
Using “rowSelected” client-side event we can populate histogram view with selected resources and data source. 
Please find the code example below: 
  function rowSelected(args) { 
            var resourceData = []; 
            for (var j = 0; j < args.model.dataSource.length; j++) { 
                if (args.data.item[args.model.taskIdMapping] == args.model.dataSource[j][args.model.taskIdMapping]) { 
            var ganttObj = $("#histoview").data("ejGantt"); 
            ganttObj.setModel({“dataSource": resourceData, "resources": args.data.resourceInfo }); 
We have also prepared the sample based on this. Please find the sample from below location 
Please let us know, if you need further assistance on this. 
Jayakumar D 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon