Background Image

NetworkDiagramView

for HTML5 and JavaScript® with optional TypeScript support and Angular, React & Vue extensions
Angular 8, React & Vue components: within downloadable package (.zip)

Run demos Demo source code NuGet package Reference

NetworkDiagramView component displays tasks and dependencies using a Network Diagram similar to that of the classic PERT review technique. Supports rearranging items using drag and drop operations, computing values based on items displayed by existing GanttChartView component instances, and custom element templates.

Screenshot
  • JavaScript®
    
    var networkDiagramView = document.getElementById("networkDiagramView");
    var items = [{ content: "First task", displayedText: "Task 1", effort: …,
                   earlyStart: new Date(…), earlyFinish: new Date(…), lateStart: new Date(…), lateFinish: new Date(…), … },
                 { content: "First task", displayedText: "Task 1", effort: …,
                   earlyStart: new Date(…), earlyFinish: new Date(…), lateStart: new Date(…), lateFinish: new Date(…), … },
                 …];
    items[1].predecessors = [{ item: items[0] }, …];
    …
    var settings = { … };
    DlhSoft.Controls.Pert.NetworkDiagramView.initialize(networkDiagramView, items, settings);
    …
    networkDiagramView.refresh();
    
                                            
    Demo
  • TypeScript
    
    /// <reference path='./DlhSoft.ProjectData.PertChart.HTML.Controls.d.ts' />
    import NetworkDiagramView = DlhSoft.Controls.Pert.NetworkDiagramView;
    import TaskItem = NetworkDiagramView.Item;
    var networkDiagramViewElement = document.getElementById("networkDiagramView");
    var items = <TaskItem[]>[
        { content: "First task", displayedText: "Task 1", effort: …,
          earlyStart: new Date(…), earlyFinish: new Date(…), lateStart: new Date(…), lateFinish: new Date(…), … },
        { content: "First task", displayedText: "Task 1", effort: …,
          earlyStart: new Date(…), earlyFinish: new Date(…), lateStart: new Date(…), lateFinish: new Date(…), … },
        …];
    items[1].predecessors = [{ item: items[0] }, …];
    …
    var settings = <NetworkDiagramView.Settings>{ … };
    var networkDiagramView = NetworkDiagramView.initialize(networkDiagramViewElement, items, settings);
    …
    networkDiagramView.refresh();
    
                                            
  • AngularJS
    
    <!-- Dependencies: DlhSoft.ProjectData.PertChart.HTML.Controls, DlhSoft.ProjectData.PertChart.Angular.Components -->
    <ds:network-diagram items="items" settings="settings" auto-refresh="{{ true }}">
        …
    </ds:network-diagram>
    
                                                
    
    var items = [{ content: "First task", displayedText: "Task 1", effort: …,
                   earlyStart: new Date(…), earlyFinish: new Date(…), lateStart: new Date(…), lateFinish: new Date(…), … },
                 { content: "First task", displayedText: "Task 1", effort: …,
                   earlyStart: new Date(…), earlyFinish: new Date(…), lateStart: new Date(…), lateFinish: new Date(…), … },
                 …];
    items[1].predecessors = [{ item: items[0] }, …];
    …
    $scope.items = items;
    $scope.settings = { … };
    
                                                
  • Angular 8
    
    <!-- Angular dependency: DlhSoft.ProjectData.PertChart.Components -->
    <networkdiagramview [items]="items" [settings]="settings">
        …
    </networkdiagramviews>
    
                                                
    
    import TaskItem = NetworkDiagramView.Item;
    var items = <TaskItem[]>[
        { content: "First task", displayedText: "Task 1", effort: …,
          earlyStart: new Date(…), earlyFinish: new Date(…), lateStart: new Date(…), lateFinish: new Date(…), … },
        { content: "First task", displayedText: "Task 1", effort: …,
          earlyStart: new Date(…), earlyFinish: new Date(…), lateStart: new Date(…), lateFinish: new Date(…), … },
        …];
    items[1].predecessors = [{ item: items[0] }, …];
    …
    this.items = items;
    this.settings = { … };
    
                                                
  • React
    
    // Dependencies: DlhSoft.ProjectData.PertChart.HTML.Controls, DlhSoft.ProjectData.PertChart.React.Components
    var items = [{ content: "First task", displayedText: "Task 1", effort: …,
                   earlyStart: new Date(…), earlyFinish: new Date(…), lateStart: new Date(…), lateFinish: new Date(…), … },
                 { content: "First task", displayedText: "Task 1", effort: …,
                   earlyStart: new Date(…), earlyFinish: new Date(…), lateStart: new Date(…), lateFinish: new Date(…), … },
                 …];
    items[1].predecessors = [{ item: items[0] }, …];
    …
    return <NetworkDiagramView items={items} settings={…}>…</NetworkDiagramView>;
    
                                                
  • Vue
    
    <!-- Dependencies: DlhSoft.ProjectData.PertChart.HTML.Controls, DlhSoft.ProjectData.PertChart.Vue.Components -->
    <network-diagram v-bind:items="items" v-bind:settings="settings">
        …
    </network-diagram>
    
                                                
    
    var items = [{ content: "First task", displayedText: "Task 1", effort: …,
                   earlyStart: new Date(…), earlyFinish: new Date(…), lateStart: new Date(…), lateFinish: new Date(…), … },
                 { content: "First task", displayedText: "Task 1", effort: …,
                   earlyStart: new Date(…), earlyFinish: new Date(…), lateStart: new Date(…), lateFinish: new Date(…), … },
                 …];
    items[1].predecessors = [{ item: items[0] }, …];
    …
    var app = new Vue({
        el: …,
        data: {
            items: items,
            settings: {…}
        }
    });
    
                                                

Items collection

To load and present data with NetworkDiagramView control, initialize the items collection of the component, setting up objects representing tasks identified by these main fields: displayedText, content, earlyStart, lateStart, earlyFinish, lateFinish, effort, isMilestone, slack, and predecessors. Displayed text values should be short inline entity titles, while content values are displayed as chart shape tool tips. Predecessors collection represents task dependencies and are identified by this field: item.

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


var items = [{ content: "Start milestone", displayedText: "Start", isMilestone: true, 
               earlyStart: new Date(year, month, 2, 8, 0, 0), earlyFinish: new Date(year, month, 2, 8, 0, 0), 
               lateStart: new Date(year, month, 2, 8, 0, 0), lateFinish: new Date(year, month, 2, 8, 0, 0) },
             { content: "First task", displayedText: "Task 1", effort: 8 * hourDuration, 
               earlyStart: new Date(year, month, 2, 8, 0, 0), earlyFinish: new Date(year, month, 2, 16, 0, 0), 
               lateStart: new Date(year, month, 2, 8, 0, 0), lateFinish: new Date(year, month, 2, 8, 0, 0), slack: 0 },
             { content: "Second task", displayedText: "Task 2", effort: 4 * hourDuration, 
               earlyStart: new Date(year, month, 2, 8, 0, 0), earlyFinish: new Date(year, month, 2, 12, 0, 0), 
               lateStart: new Date(year, month, 2, 12, 0, 0), lateFinish: new Date(year, month, 2, 8, 0, 0), slack: 4 * hourDuration },
             { content: "Third task", displayedText: "Task 3", effort: 16 * hourDuration, 
               earlyStart: new Date(year, month, 3, 8, 0, 0), earlyFinish: new Date(year, month, 4, 16, 0, 0), 
               lateStart: new Date(year, month, 3, 8, 0, 0), lateFinish: new Date(year, month, 4, 16, 0, 0), slack: 0 },
             { content: "Fourth task", displayedText: "Task 4", effort: 4 * hourDuration, 
               earlyStart: new Date(year, month, 3, 8, 0, 0), earlyFinish: new Date(year, month, 3, 12, 0, 0), 
               lateStart: new Date(year, month, 4, 12, 0, 0), lateFinish: new Date(year, month, 4, 16, 0, 0), slack: 12 * hourDuration },
             { content: "Fifth task (middle milestone)", displayedText: "Task 5", isMilestone: true, effort: 12 * hourDuration, 
               earlyStart: new Date(year, month, 5, 8, 0, 0), earlyFinish: new Date(year, month, 6, 12, 0, 0), 
               lateStart: new Date(year, month, 5, 8, 0, 0), lateFinish: new Date(year, month, 6, 12, 0, 0), slack: 0 },
             { content: "Sixth task", displayedText: "Task 6", effort: 48 * hourDuration, 
               earlyStart: new Date(year, month, 6, 12, 0, 0), earlyFinish: new Date(year, month, 12, 12, 0, 0), 
               lateStart: new Date(year, month, 6, 12, 0, 0), lateFinish: new Date(year, month, 12, 12, 0, 0), slack: 0 },
             { content: "Seventh task", displayedText: "Task 7", effort: 20 * hourDuration, 
               earlyStart: new Date(year, month, 6, 12, 0, 0), earlyFinish: new Date(year, month, 8, 16, 0, 0), 
               lateStart: new Date(year, month, 10, 8, 0, 0), lateFinish: new Date(year, month, 12, 12, 0, 0), slack: 28 * hourDuration },
             { content: "Finish milestone", displayedText: "Finish", isMilestone: true, 
               earlyStart: new Date(year, month, 12, 12, 0, 0), earlyFinish: new Date(year, month, 12, 12, 0, 0), 
               lateStart: new Date(year, month, 12, 12, 0, 0), lateFinish: new Date(year, month, 12, 12, 0, 0) }];
items[1].predecessors = [{ item: items[0]}];
items[2].predecessors = [{ item: items[0]}];
items[3].predecessors = [{ item: items[1] }, { item: items[2] }];
items[4].predecessors = [{ item: items[1]}];
items[5].predecessors = [{ item: items[3] }, { item: items[4] }];
items[6].predecessors = [{ item: items[5]}];
items[7].predecessors = [{ item: items[5]}];
items[8].predecessors = [{ item: items[6] }, { item: items[7] }];
DlhSoft.Controls.Pert.NetworkDiagramView.initialize(networkDiagramView, items, settings);

                        

var items = ganttChartView.getNetworkDiagramItems();
DlhSoft.Controls.Pert.NetworkDiagramView.initialize(networkDiagramView, 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 tasks and their dependencies using the classic PERT review technique.


var criticalTasks = networkDiagramView.getCriticalItems();
var criticalTaskDependencies = networkDiagramView.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, settings.milestoneClass, 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 taskTemplate 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.


networkDiagramView.print({ title: "Network Diagram (printable)", 
                           preparingMessage: "…" });