Items collection

To load and present data with PertChartView control, initialize the items collection of the component, setting up objects representing task events identified by these main fields: displayedText, content, and predecessors. Displayed text values should be short inline entity titles, while content values are displayed as chart shape tool tips. Predecessors collection represents event transitions (tasks) and are identified by these fields: item, displayedText, content, and effort.

Note that you can also prepare items for PertChartView component from a GanttChartView instance using getPertChartItems method.

var items = [{ displayedText: "0", content: "Start" },
             { displayedText: "1", content: "Task event 1" },
             { displayedText: "2", content: "Task event 2" },
             { displayedText: "3", content: "Task event 3" },
             { displayedText: "4", content: "Finish", displayedRowIndex: 0 }];
items[1].predecessors = [{ item: items[0], displayedText: "A", content: "Task A", effort: 4 * hourDuration }];
items[2].predecessors = [{ item: items[0], displayedText: "B", content: "Task B", effort: 2 * hourDuration }];
items[3].predecessors = [{ item: items[2], displayedText: "C", content: "Task C", effort: 1 * hourDuration }];
items[4].predecessors = [{ item: items[1], displayedText: "D", content: "Task D", effort: 5 * hourDuration },
                         { item: items[2], displayedText: "E", content: "Task E", effort: 3 * hourDuration },
                         { item: items[3], displayedText: "F", content: "Task F", effort: 2 * hourDuration }];
DlhSoft.Controls.Pert.PertChartView.initialize(pertChartView, items, settings);

                        

var items = ganttChartView.getPertChartItems();
DlhSoft.Controls.Pert.PertChartView.initialize(pertChartView, items, settings);

                        

Drag and drop

End users may use drag and drop operations to update shape positioning, if needed, in order to make the diagram fitting better to their own needs. You may also easily position items in code, setting their displayedRowIndex and displayedColumnIndex property values considering a virtual grid as the container of the elements and refreshing the user interface.

Changes

To be notified when items managed by the component change within the chart area, simply provide a handler function for settings.itemPropertyChanged.

settings.itemPropertyChangeHandler = 
    function (item, propertyName, isDirect, isFinal) { … };

                        

Project management features

The component offers built-in critical path enumeration algorithms for task events and for event transitions (tasks themselseves).

var criticalTaskEvents = pertChartView.getCriticalItems();
var criticalTasks = pertChartView.getCriticalDependencies();

                        

Appearance

You may fully customize item appearance, either for the entire chart or for individual entries in the view, using CSS class mappings such as settings.shapeClass, etc. (similar inline style settings are also available, if needed). Shapes may also be redesigned using a function that generates SVG content set up as taskEventTemplate setting of the component.

settings.shapeStyle = "stroke: Red; fill: White";
items[i].shapeStyle = "stroke: Red; fill: #ffd54e";

                        

Printing and exporting

The component offers a print method that may be called to initiate a direct print operation for their content. Moreover, you can export HTML out of a component content by calling exportContent methods on the fly. Both methods support custom configurations. Setting up rotate field of the argument settings to true enables direct landscape printing.

pertChartView.print({ title: "PERT Chart (printable)", 
                      preparingMessage: "…" });