Background Image

LoadChartView

for WPF & .NET 4+ / .NET Core 3.1 / .NET 5+ and Silverlight™ 4+
New: WPF .NET Core/.NET 5+ support: with NuGet!

Run demos Demo source code NuGet package Reference

LoadChartView component displays allocations using a chart displaying normal and over-allocations of one or more resources through a project timeline. Supports custom appearance settings, built-in and custom scales, and computing allocations based on items displayed by existing GanttChartDataGrid and GanttChartView component instances.

LoadChartDataGrid component provides the core features and behavior that LoadChartView offers, with a supplemental resource data grid attached.

Screenshot
  • WPF +
    C#
    
    <!-- Assuming you need to display as single resource item, set item and bar heights to large values. -->
    <pdgcc:LoadChartView x:Name="LoadChartView" ItemHeight="176" BarHeight="172">
        …
    </pdgcc:LoadChartView>
    
                                                
    
    var item = new LoadChartItem { Content = "Resource" };
    item.GanttChartItems.Add(new AllocationItem { Content = "Task 1", Start = new DateTime(…), Finish = new DateTime(…) });
    item.GanttChartItems.Add(new AllocationItem { Content = "Task 1, Task 2 [50%]: 150%", Start = new DateTime(…), Finish = new DateTime(…), 
                                                  Units = 1.5  });
    …
    var items = new ObservableCollection<LoadChartItem> { item }; // Single item collection.
    LoadChartView.Items = items;
    …
    
                                                
    Demo
  • WPF +
    Visual Basic®
    
    <!-- Assuming you need to display as single resource item, set item and bar heights to large values. -->
    <pdgcc:LoadChartView x:Name="LoadChartView" ItemHeight="176" BarHeight="172">
        …
    </pdgcc:LoadChartView>
    
                                                
    
    Dim item = New LoadChartItem With { .Content = "Resource" }
    item.GanttChartItems.Add(New AllocationItem With { .Content = "Task 1", .Start = new Date(…), .Finish = new Date(…) })
    item.GanttChartItems.Add(New AllocationItem With { .Content = "Task 1, Task 2 [50%]: 150%", .Start = new Date(…), .Finish = new Date(…), _
                                                       .Units = 1.5  })
    …
    Dim items = New ObservableCollection(Of LoadChartItem) From { item } 'Single item collection.
    LoadChartView.Items = items
    …
    
                                                
  • Silverlight™ +
    C#
    
    <!-- Assuming you need to display as single resource item, set item and bar heights to large values. -->
    <pdgcc:LoadChartView x:Name="LoadChartView" ItemHeight="176" BarHeight="172">
        …
    </pdgcc:LoadChartView>
    
                                                
    
    var item = new LoadChartItem { Content = "Resource" };
    item.GanttChartItems.Add(new AllocationItem { Content = "Task 1", Start = new DateTime(…), Finish = new DateTime(…) });
    item.GanttChartItems.Add(new AllocationItem { Content = "Task 1, Task 2 [50%]: 150%", Start = new DateTime(…), Finish = new DateTime(…), 
                                                  Units = 1.5  });
    …
    var items = new ObservableCollection<LoadChartItem> { item }; // Single item collection.
    LoadChartView.Items = items;
    …
    
                                                
    Demo
  • Silverlight™ +
    Visual Basic®
    
    <!-- Assuming you need to display as single resource item, set item and bar heights to large values. -->
    <pdgcc:LoadChartView x:Name="LoadChartView" ItemHeight="176" BarHeight="172">
        …
    </pdgcc:LoadChartView>
    
                                                
    
    Dim item = New LoadChartItem With { .Content = "Resource" }
    item.GanttChartItems.Add(New AllocationItem With { .Content = "Task 1", .Start = new Date(…), .Finish = new Date(…) })
    item.GanttChartItems.Add(New AllocationItem With { .Content = "Task 1, Task 2 [50%]: 150%", .Start = new Date(…), .Finish = new Date(…), _
                                                       .Units = 1.5  })
    …
    Dim items = New ObservableCollection(Of LoadChartItem) From { item } 'Single item collection.
    LoadChartView.Items = items
    …
    
                                                

Items collection

To load and present data with LoadChartView control, initialize the Items collection of the component, setting up a single or more LoadChartItem objects representing resource rows identified by these main properties: Content, and GanttChartItems. GanttChartItems collection (objects of type AllocationItem) defines timeline allocations and are identified by these properties: Start, Finish, and Units.

Allocation items are presented as vertically positioned rectangular bars, having heights set to values proportional to assignment units. Over-allocations are highlighted by default, but you can also configure under-allocation visual hints.

You may set an ID or GUID for any item object as Key and GlobalKey property values, useful when mapping to relational data storage access layers. A generic Tag property is also available to support miscellaneous object linking scenarios. Note that you can also prepare items for LoadChartView component from a GanttChartDataGrid or ScheduleChartDataGrid instance using GetLoadChartItems method.

Screenshot
  • WPF
    
    var items = GanttChartDataGrid.GetLoadChartItems();
    LoadChartView.Items = items;
    
                                            
    Demo
  • Silverlight™
    
    var items = GanttChartDataGrid.GetLoadChartItems();
    LoadChartView.Items = items;
    
                                            
    Demo

Timeline

You may configure timeline duration, visible and working days and hours, scales, and zoom level (width of an hour) in the view. The component can further be zoomed in and out by moving the mouse wheel. Nonworking intervals, such as holidays or simple day breaks, may be defined either as a collection or using a delegate.

When the end user horizontally scrolls to an end of the timeline viewport special buttons appear to allow updating the timeline page, increasing both start and finish ends synchronously. The component also supports automatic zooming, depending on the set up timeline page. Otherwise, the timeline is automatically scrolled horizontally to the start time of a selected task when that date and time is within the set up timeline page.

Screenshot
  • WPF
    
    <pdgcc:LoadChartView x:Name="LoadChartView" HourWidth="20" HeaderHeight="60" ScaleHeaderHeight="20" >
        <!-- Set Scales collection to specify the headers to be displayed in the chart. -->
        <pdgcc:LoadChartView.Scales>
            <pdgcc:ScaleCollection>
                <pdgcc:Scale ScaleType="Months" HeaderBorderBrush="Silver" HeaderBorderThickness="0,0,1,1" 
                             HeaderContentTemplate="{StaticResource ScaleHeaderContentTemplate}" BorderBrush="Silver" BorderThickness="0,0,1,0"/>
                <pdgcc:Scale ScaleType="Weeks" HeaderHeight="0" BorderBrush="Silver" BorderThickness="0,0,0.35,0"/>
                <pdgcc:Scale ScaleType="Days" HeaderContentFormat="DayLeadingZero" … />
                <pdgcc:Scale ScaleType="Hours" HeaderContentTemplate="{StaticResource ScaleHeaderContentTemplate}" … />
            </pdgcc:ScaleCollection>
        </pdgcc:LoadChartView.Scales>
        …
    </pdgcc:LoadChartView>
    
                                            
    
    LoadChartView.SetTimelinePage(start, finish);
    // Optionally, enable automatic zoom level based on timeline page:
    LoadChartView.IsFittingToTimelinePageEnabled = true;
    
                                            
    
    LoadChartView.VisibleWeekStart = DayOfWeek.Monday;
    LoadChartView.VisibleWeekFinish = DayOfWeek.Friday; // Mon-Fri
    LoadChartView.WorkingWeekStart = DayOfWeek.Monday;
    LoadChartView.WorkingWeekFinish = DayOfWeek.Thursday; // Mon-Thu
    LoadChartView.WorkingDayStart = TimeSpan.FromHours(10);
    LoadChartView.WorkingDayFinish = TimeSpan.FromHours(19); // 10-19
    LoadChartView.NonworkingIntervals = …;
    
                                            
    Custom schedule demo
  • Silverlight™
    
    <pdgcc:LoadChartView x:Name="LoadChartView" HourWidth="20" HeaderHeight="60" ScaleHeaderHeight="20" >
        <!-- Set Scales collection to specify the headers to be displayed in the chart. -->
        <pdgcc:LoadChartView.Scales>
            <pdgcc:ScaleCollection>
                <pdgcc:Scale ScaleType="Months" HeaderBorderBrush="Silver" HeaderBorderThickness="0,0,1,1" 
                             HeaderContentTemplate="{StaticResource ScaleHeaderContentTemplate}" BorderBrush="Silver" BorderThickness="0,0,1,0"/>
                <pdgcc:Scale ScaleType="Weeks" HeaderHeight="0" BorderBrush="Silver" BorderThickness="0,0,0.35,0"/>
                <pdgcc:Scale ScaleType="Days" HeaderContentFormat="DayLeadingZero" … />
                <pdgcc:Scale ScaleType="Hours" HeaderContentTemplate="{StaticResource ScaleHeaderContentTemplate}" … />
            </pdgcc:ScaleCollection>
        </pdgcc:LoadChartView.Scales>
        …
    </pdgcc:LoadChartView>
    
                                            
    
    LoadChartView.SetTimelinePage(start, finish);
    // Optionally, enable automatic zoom level based on timeline page:
    LoadChartView.IsFittingToTimelinePageEnabled = true;
    
                                            
    
    LoadChartView.VisibleWeekStart = DayOfWeek.Monday;
    LoadChartView.VisibleWeekFinish = DayOfWeek.Friday; // Mon-Fri
    LoadChartView.WorkingWeekStart = DayOfWeek.Monday;
    LoadChartView.WorkingWeekFinish = DayOfWeek.Thursday; // Mon-Thu
    LoadChartView.WorkingDayStart = TimeSpan.FromHours(10);
    LoadChartView.WorkingDayFinish = TimeSpan.FromHours(19); // 10-19
    LoadChartView.NonworkingIntervals = …;
    
                                            
    Custom schedule demo

Data binding

Although we designed the component to support items of specific types only (LoadChartItem and AllocationItem) to ensure high runtime performance, you can use a fully custom converter to provide collection binding features based your own needs.

The component is persistence layer independent, so you can bind it to data collections from virtually any data source, including but not limited to SQL Server® databases.

Appearance

You may fully customize item appearance, either for the entire chart or for individual entries in the view, using attached properties such as LoadChartView.NormalAllocationBarFill, NormalAllocationBarStroke, OverAllocationBarFill, etc.

And if you need to customize component input interactions, you may handle mouse events and get information about the visually hit elements with ease.

Screenshot
  • WPF
    
    <pdgcc:LoadChartView NormalAllocationBarFill="Orange" NormalAllocationBarStroke="Red">
        …
    </pdgcc:LoadChartView>
    
                                            
    
    LoadChartView.SetNormalAllocationBarFill(allocationItem, Brushes.Yellow);
    LoadChartView.SetNormalAllocationBarStroke(allocationItem, Brushes.Orange);
    
                                            
    Custom appearance demo Pointer handling demo
  • Silverlight™
    
    <pdgcc:LoadChartView NormalAllocationBarFill="Orange" NormalAllocationBarStroke="Red">
        …
    </pdgcc:LoadChartView>
    
                                            
    
    LoadChartView.SetNormalAllocationBarFill(allocationItem, Brushes.Yellow);
    LoadChartView.SetNormalAllocationBarStroke(allocationItem, Brushes.Orange);
    
                                            
    Custom appearance demo Pointer handling demo

Printing and image exporting

The component offers a Print method that may be called to initiate a direct print operation for its content. A custom PrintingTemplate definition that you can specify using XAML is repeatedly used when generating the printed pages.

Moreover, you can export scalable images of the component content by calling GetBitmapSource method on the fly. For example, you may then encode an output image to an external file format such as PNG, include the image into an element displayed in a custom printed document, or simply displaying it as read only content on the screen.


LoadChartView.Print("Sample Document");

                        

LoadChartView.Export((Action)delegate
{
    SaveFileDialog saveFileDialog = 
        new SaveFileDialog { Title = "Export Image To", Filter = "PNG image files|*.png" };
    if (saveFileDialog.ShowDialog() != true)
        return;
    BitmapSource bitmapSource = LoadChartView.GetExportBitmapSource(96 * 2);
    using (Stream stream = saveFileDialog.OpenFile())
    {
        PngBitmapEncoder pngBitmapEncoder = new PngBitmapEncoder();
        pngBitmapEncoder.Frames.Add(BitmapFrame.Create(bitmapSource));
        pngBitmapEncoder.Save(stream);
    }
});

                        

Windows® Forms

You may use the WPF component in Windows® Forms applications using Microsoft® ElementHost control from WindowsFormsIntegration assembly of .NET 4+.

Optionally, you can define a XAML user control in your Windows® Forms project to serve for encapsulation.


var items = …;
var host = new ElementHost 
{ 
    Child = new LoadChartView
    { 
        Items = items,
        …
    }, 
    Dock = DockStyle.Fill 
};
Controls.Add(host);