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
Main Gantt chart JSON The same example as previous, but uses JSON format instead of XML. 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
Resource usage chart A demonstration of TreeGrid application generating resource usage chart from Gantt chart source. 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.

Main Gantt chart JSON
Main file Gantt.html.
Layout file in GanttJsonDef.js, data file in GanttJsonData.js.
The same example as previous, but uses JSON format instead of XML.

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.

Resource usage chart
Main file GanttResources.html.
Layout file in GanttResourcesDef.xml, Gantt source layout file in GanttDef.xml, Gantt source data file in GanttData.xml.
This example show automatically generated resources usage chart.
The chart is generated from hidden grid that loads the data from original Gantt chart example.
This grid supports adding, deleting, changing and renaming the resources.


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.