2. Run JSON definition
Two ways of defining Run in JSON format
02-Run_JSON_independent
.xml - Run defined by
Start +
End or
Duration for every box.
Demonstrates also FastGantt and GanttLastUnit attributes.
-
See documentation for Gantt Run.
-
This example shows the same grids and description as the 01-Run_array_definition, just uses Gantt Run JSON format instead of Array format.
-
The Run is universal Gantt object to show one or more resizable and movable bars and / or movable milestones in one cell.
The Run can be used as one Gantt task, as Gantt task per box or for any bar chart, not only Gantt.
The advantages of the runs are especially various bar types (normal, solid, fixed, ...),
different texts and classes for individual bars inside one cell, different vertical positions and heights of the bars,
many options for moving and resizing the run bars, search for the bars inside whole chart and large JavaScript API.
To speed up the Run rendering, you can set Cfg attribute FastGantt='1', the look is slightly worse, but every Run box is done by one HTML tag. Demonstrated in the first grid.
-
JSON definition
It is defined by GanttRun
attribute containing JSON array of box objects like "[{...},{...},{...}]".
The JSON definition must start with "[" as the first character, without any white space before. In other places are white spaces permitted.
Attribute names are sensitive, but in input data are possible two variants first letter upper case (e.g. Start) and all letters lowercase (e.g. start). In output is used always first letter upper case (e.g. Start).
All the parameters are optional, e.g. {} is empty separating box, {Duration:xxx} is standard box.
To use JSON definition for new boxes in empty run, define the GanttRunNewStart in the JSON format, e.g. GanttRunNewStart="[{Duration:'0.0001'}]".
The JSON definition is slower to parse and save than the Array definition.
-
Independent boxes
are defined by only GanttRun
attribute, every Run box is specified by its Start date and End date or by Start date and Duration in GanttDataUnits.
Demonstrated in the first grid.
You define only boxes, the spaces between boxes are added automatically.
Internally the Run is always defined as continuous, so between all not joined boxes is always one Empty type box (even with zero or negative duration).
-
To define joined boxes (directly or by Nbsp), you must also define the second and next boxes only by Duration (like in the continuous definition), without Start date to not add spaces between them.
-
It is possible to define the boxes in random order, but there must be set GanttRunError='Sort'.
Remember, the GanttRunError='sort' on start slows down the initialization, because all the boxes must be sorted on start.
-
By default are the Run saved back with Start+End (if not defined GanttRunStart attribute).
To save Run by Start+Duration set GanttRunSave='2'.
-
If set GanttLastUnit (usually to 'd' as days), the End date in definition is the last unit (e.g. day), not the exact date. Simply, the End date definition is by the one unit less than the exact end date.
-
Continuous Run
is defined by start date for the whole Run in GanttRunStart
and all bars adjacent defined in GanttRun
by only the bar Duration.
Demonstrated in the second grid.
You must define all bars including spaces between them.
-
If two Run bars don't have Empty box between them, they are joined.
To define two not joined bars, you must include Empty box between them, even if they are adjacent.
To shorten the definition, the Empty box between adjacent bars can be added by completely empty definition ({}) like "[{Duration:2},{},{Duration:1}]".
-
Empty type box can have also negative duration to move the next box over the previous one.
-
The continuous run definition is shorter and faster to parse than the independent boxes, especially for many boxes per cell.
-
Array definition
It is defined by the same attributes like the JSON definition, the GanttRun uses just Array format instead of array.
Demonstrated in previous example 01-Run_array_definition
-
Summary definiton
It is also possible to define the individual Run boxes by child main bars (one per one).
In this type of definition the GanttRun attribute is used just internally.
The child tasks can be visible to let manipulate with the bars or hidden to be used just for definition.
The changes in Run are done also to source main bars and can be also uploaded to server.
Demonstrated in next example 03-Run_summary_definition
-
Run box
type
is set by GanttRun box 2nd attribute Type. Demonstrated in many rows, e.g. in 12, 13, 14, 15 .
The Type can be Box (standard box), Solid (not resizable), Fixed (not movable and resizable),
Left (fixed left), Right (fixed right), Empty (empty space between boxes, inactive),
Nbsp (empty space between joined boxes), Bound (not movable start or end), End (automatic movable start or end).
It can define also milestones by Milestone (movable milestone) and Stop (not movable milestone).
-
Run box
content
is set by GanttRun box 3rd attribute Text. Demonstrated in many rows, especially in row 25.
It can contain any HTML code. The box height is updated according to its HTML content, except FastGantt is set.
Remember the characters < & " ' must be replaced by XML entities (< & " ') when placed to XML (but not in JavaScript API).
Also remember it cannot contain the GanttRun separators. The default separators are ',' and ';' if you want to use them in HTML code, define different GanttRun separators on its start.
The box content can be calculated also by GanttRunHtml attribute, it can automatically compose the content from the box start/end date, duration, text and many other box settings.
The box content can be also created dynamically by OnGetGanttRunText API event. Demonstrated in row 27.
-
Run box
side text
is set by GanttRun box 14th and 15th attributes TextLeft and TextRight. It can contain any HTML code. Demonstrated in rows 5, 6.
The texts horizontal position is controlled by GanttRunHtmlLeftEdge and GanttRunHtmlRightEdge, the available positions are before, inside left, centered, inside right and after.
Vertical position is set by GanttRunHtmlShift. It is also possible to generate the side texts by API event OnGetGanttRunSideText to achieve any count and positions of the main bar side content.
-
Run box
tooltip
is set by GanttRun box 5th attribute Tip. It can contain any HTML code. Demonstrated in row 1.
The box tooltip can be calculated also by GanttRunTip attribute, it can automatically compose the content from the box start/end date, duration, text and many other box settings.
The box tooltip can be also created dynamically by OnGanttTip API event.
-
Run box
style
is set by GanttRun box 4th attribute Class. It is a part of custom CSS class. Demonstrated in rows 18, 19, 20.
The box CSS class can be also created dynamically by OnGetGanttRunClass API event.
For side texts use GanttRunHtmlLeftClass and GanttRunHtmlRightClass.
-
Run box
vertical position
and height
is set by GanttRun 9th and 10th attributes Top and Height. The Height is inner box height in pixels. Demonstrated in row 25.
The values can be set also for boxes in the run by attributes GanttRunTop and GanttRunHeight.
Row height is automatically updated to show all the boxes if set GanttBottom attribute (by default is set).
New boxes can be created or moved to different vertical levels if set GanttRunLevels. Demonstrated in row 26.
-
Overlaid (error) boxes
can be handled in more ways. Demonstrated in rows 17, 23, 24, 25, 26.
-
To mark the overlaid boxes as error in red set GanttRunErrors='1'. It is default behavior. Marked is always only the next (right) box from the two overlaid boxes.
-
To place the overlaid boxes vertically below themselved to show all the boxes set GanttRunErrorsShift to pixel value how the second box will be shifted vertically.
Usual value is 17 for standard height boxes to move it by the whole height.
-
To permit Run boxes overlay when moving or resizing them, add keyword "Errors" to GanttRunAdjust attribute(s).
-
When set keyword "Sort" into GanttRunError (default setting), the boxes are sorted in GanttRun by their start date after any change.
You can add also keyword "Merge" to the GanttRunError to merge the overlaid boxes after any change.
-
Run
milestone
is defined by GanttRun box 2nd attribute Type, values Milestone as movable milestone and Stop as not movable milestone.
The milestone has always zero duration. It is also possible to have resizable zero duration box. Use GanttRunMilestones attribute to control creating the milestones / zero duration boxes.