Example of Indicators in Javascript Gantt Chart Control

/
/
Indicators

This sample visualizes how to mention special moment in any mentioned day for a particular task with different icon and label.

More Details...

1
Product concept
4/2/20254/4/20253 days34
2
Define the product usage
4/2/20254/2/20251 day30
3
Define the target audience
4/2/20254/3/20252 days40
4
Prepare product sketch and notes
4/3/20254/4/20252 days2FS30
5
Concept approval
4/4/20254/4/20250 days3FS,4FS0
6
Market research
4/7/20254/16/20258 days25
7
Demand analysis
4/7/20254/10/20254 days15
8
Customer strength
4/7/20254/10/20254 days5FS30
9
Market opportunity analysis
4/7/20254/10/20254 days5FS0
10
Competitor analysis
4/11/20254/16/20254 days7FS,8FS30
11
Product strength analysis
4/11/20254/16/20254 days9FS40
12
Research completed
4/16/20254/16/20250 days10FS30
13
Product design and development
4/17/20255/13/202519 days31
14
Functionality design
4/17/20254/22/20254 days12FS30
15
Quality design
4/17/20254/21/20253 days12FS40
16
Define reliability
4/22/20254/25/20254 days15FS30
17
Identifying raw materials
4/22/20254/23/20252 days15FS0
18
Define cost plan
4/24/20254/28/20253 days17FS35
19
Estimate manufacturing cost
4/24/20254/28/20253 days17FS40
20
Estimate selling cost
4/24/20254/28/20253 days17FS30
21
Development of final design
4/29/20255/13/202511 days32
22
Develop dimensions and design
4/29/20255/2/20254 days19FS,20FS30
23
Develop designs to meet industry
5/5/20255/7/20253 days22FS40
24
Include all the details
5/8/20255/13/20254 days23FS30
25
CAD - Computer Aided Design
5/14/20255/16/20253 days24FS0
26
CAM - Computer Aided Manufacturing
5/19/20255/22/20254 days25FS30
27
Finalize the design
5/22/20255/22/20250 days26FS40
28
Prototype testing
5/23/20255/28/20254 days27FS30
29
Include feedback
5/23/20255/28/20254 days28SS0
30
Manufacturing
5/29/20256/4/20255 days28FS,29FS30
31
Assembling material into finished goods
6/5/20256/11/20255 days30FS40
32
Final product development
6/12/20256/20/20257 days17
33
Important improvement
6/12/20256/16/20253 days31FS0
34
Customer testing and feedback
6/17/20256/20/20254 days33FS30
35
Final product development
6/23/20256/26/20254 days30
36
Important improvement
6/23/20256/26/20254 days34FS30
37
Address any unforeseen issues
6/23/20256/26/20254 days36SS30
38
Finalize the product
6/27/20257/8/20258 days15
39
Branding the product
6/27/20257/2/20254 days37FS30
40
Marketing and presales
7/3/20257/8/20254 days39FS0
Product concept
Define the product usage
Define the target audience
Prepare product sketch and notes
Concept approval
Market research
Demand analysis
Customer strength
Market opportunity analysis
Competitor analysis
Product strength analysis
Research completed
Product design and development
Functionality design
Quality design
Define reliability
Identifying raw materials
Define cost plan
Estimate manufacturing cost
Estimate selling cost
Development of final design
Develop dimensions and design
Develop designs to meet industry
Include all the details
CAD - Computer Aided Design
CAM - Computer Aided Manufacturing
Finalize the design
Prototype testing
Include feedback
Manufacturing
Assembling material into finished goods
Final product development
Important improvement
Customer testing and feedback
Final product development
Important improvement
Address any unforeseen issues
Finalize the product
Branding the product
Marketing and presales
Description

In this example, indicators are displayed with some custom text in specified day of task, which are defined in dataSource. You can define the indicators with the following properties for tasks: date: Defines the date value to where we want to display the indicators. iconClass : Defines the icon to highlight the indicator. name: Defines text to be displayed in the mentioned date. tooltip: The text to be displayed when hover the mouse over the indicator. Injecting Module: Gantt control features are segregated into individual feature-wise modules. To use a selection, inject the Selection module using the Gantt.Inject(Selection) method. To use markers, inject the DayMarkers module using the Gantt.Inject(DayMarkers) method. More information on the Essential® JS2 Gantt Chart can be found in this documentation section.