Using GANTT chart to display multi-segmented columns/bars

Type tutorial

This demo shows how we can simulate multi-segment columns using GANTT chart. This specific chart type is good because you can specify any number colored segments without the need to define graphs for each of them. Since GANTT chart is always horizontal by default, we also use the following trick to rotate it before it […]

GANTT Chart with a legend

Type tutorial

GANTT chart does not support automatically-generated legends. The reason for this is that on most GANTT setups, generating legend for every segment would not make a lot of sense, and it’s fairly difficult to deduct a color for a category, given big number of possible segments and their representations. That being said, you can still […]

Overlapping segments on GANTT chart with rollover effect

Type tutorial

This demo shows how GANTT chart with overlapping semi-transparent segments. It also shows how you can use rollOverGraphitem and rollOutGraphItem events to dynamically apply style properties to the segment.

Simulating double-click on GANTT chart segment

Type tutorial

This demo shows how you can use clickGraphItem event to register both click and double-click events on GANTT chart segments. It works by delaying execution of click event using JavaScript function setTimeout. If the second click occurs on the same segment within 200 milliseconds, we cancel previous click and proceed as it was double-click. P.S. the […]

Paging data in GANTT chart

Type tutorial

This example demonstrates how you can “page” through a large data set of GANTT elements by setting a sub-set of data based on user’s interaction. All you need to do is to dynamically set chart’s dataProvider and call it’s validateData() method.