This sample demonstrates how to create a simple PERT chart. A PERT chart is a project management tool used to schedule and coordinate tasks within a project.
Each node represents an activity and displays several pieces of information about each one. The node template is basically a Panel of type Panel.Table holding several TextBlocks that are data-bound to properties of the Activity, all surrounded by a rectangular border. The lines separating the text are implemented by setting the RowColumnDefinition.separatorStroke for two columns and two rows. The separators are not seen in the middle because the middle row of each node has its RowColumnDefinition.background set to white, and RowColumnDefinition.coversSeparators set to true.
The "critical" property on the activity data object controls whether the node is drawn with a red brush or a blue one. There is a special converter that is used to determine the brush used by the links.
The light blue legend is implemented by a separate Part implemented in a manner similar to the Node template. However it is not bound to data -- there is no JavaScript object in the model representing the legend.
The "Table" Panel, Panel.Table, arranges objects in rows and columns. Each object in a Table Panel is put into the cell indexed by the value of GraphObject.row and GraphObject.column. The panel will look at the rows and columns for all of the objects in the panel to determine how many rows and columns the table should have. More information can be found in the GoJS Intro.
This predefined layout is used for placing Nodes of a general directed graph in layers (rows or columns). This is more general than TreeLayout, as it does not require that the graph be tree-structured. More information can be found in the GoJS Intro.