Universal HTML examples
Gantt chart


You can run these examples locally from filesystem or from your local or remote web server.

Example index

Gantt chart
Special TreeGrid feature for project management - creating fully ineractive Gantt charts.
Main Gantt chart A demonstration of TreeGrid application showing fully interactive Gantt chart with all features enabled. link
Simple Gantt chart A demonstration of TreeGrid application showing simple interactive Gantt chart with only basic features enabled. link
Table Gantt chart A demonstration of TreeGrid application creating Gantt chart tree from plain table by grouping. link
Gantt chart with 1000 tasks Similar demonstration to the Main Gantt chart, but shows large dataset and uses client paging. link
 
Run chart
Special TreeGrid feature for service management - displaying continuous or discrete runnings.
Interactive Run chart A demonstration of TreeGrid application showing fully interactive Gantt chart with Run type bars. link
 
Line charts and XY points charts
TreeGrid can calculate and show any line chart (even X values) and XY point chart (random X,Y values).
Line charts and XY points charts A demonstration of TreeGrid application showing fully interactive Gantt chart with Run type bars. link

Gantt chart


Special TreeGrid feature for project management - creating fully ineractive Gantt charts - timetable of tasks and their completion.

Main Gantt chart
Main file Gantt.html.
Layout file in GanttDef.xml, data file in GanttData.xml.
 A demonstration of TreeGrid application showing fully interactive Gantt chart with all features enabled.
Shows basic Gantt items: planned tasks, milestones, percent completed, real flow, resources, flags descendant and ancestor dependencies with types (ss,fs,sf,ff) and lags.
Shows also manual and automatic correcting dependencies and baseline constraints.
Shows also extended features like grouping tasks including percentage calculations, time zoom levels and resouce filter.

Simple Gantt chart
Main file GanttSimple.html.
Layout file in GanttSimpleDef.xml, data file in GanttSimpleData.xml.
 A demonstration of TreeGrid application showing simple interactive Gantt chart with only basic features enabled to start learning how to create Gantt charts.
Shows fixed tree structure with freedom of levels and row dragging
Shows basic Gantt items: planned tasks, percent completed and descendant dependencies.

Gantt chart tree
Main file GanttTree.html.
Layout file in GanttTreeDef.xml, data file in GanttTreeData.xml.
 A demonstration of TreeGrid application creating Gantt chart tree from plain table by grouping.
It supports free adding, moving and deleting tasks in tree levels. It is done by JavaScript API events.
Shows basic Gantt items: planned tasks, percent completed and descendant dependencies.

Gantt chart with 1000 tasks
Main file GanttBig.html.
Layout file in GanttBigDef.xml, data file in GanttBigData.xml.
 Similar demonstration to the Main Gantt chart, but shows large dataset and uses client paging.

Run chart


Special TreeGrid feature for service management - displaying continuous or discrete runnings or any other interactive charts.

Interactive Run chart
Main file Run.html.
Layout file in RunDef.xml, data file in RunData.xml.
 A demonstration of TreeGrid application showing fully interactive Gantt chart with Run type bars.
The Run type bars support more boxes in one cells, with different features, size, color, class, text and tooltip.

Line charts and XY point charts


TreeGrid can calculate and show any line chart (even X values) and XY point chart (random X,Y values).

Line charts and XY point charts
Main file Chart.html.
Data file in Chart.xml.
 This example calculates and shows various line charts and XY points charts with sources in the grid.