This blog is in continuation of my efforts to make the LightSwitch Developers to have a smooth sailing while working with LightSwitch C1Chart control. With the release of Gantt Chart type in C1Chart of LightSwitch suite for Desktop, we have lot of developers looking to use Gantt Chart either in designer or through code.

If you are looking to implement the Gantt Chart through designer, you can read my previous blog here. Stacked with few images, I have tried to explain the step by step process to configure the LightSwitch Gantt Chart.

In this blog, I explain how to generate a Gantt Chart at run-time with minimal code requirement.

Retrieve C1Chart Object from Screen

Like any other LightSwitch control, if we have to customize C1Chart, we have to get the control using the FindControl() method.

Public Class GanttTablesChartScreen
   Private Sub GanttTablesChartScreen_Created()
     '' Provide programmatic access to the underlying C1.Silverlight.Chart.C1Chart control:
     Dim chart As IContentItemProxy = Me.FindControl("C1Chart")
     AddHandler chart.ControlAvailable, AddressOf chart_ControlAvailable
End Sub

Private Sub chart_ControlAvailable(ByVal sender As Object, ByVal e As ControlAvailableEventArgs)
     Dim chartSL = CType(e.Control, C1.Silverlight.Chart.C1Chart)
End Sub

Customize Chart Elements

Once the C1Chart control has been retrieved, we have to wait for the control to load before we start customizing and configuring the required settings for Gantt Chart. This has to be done in the Loaded event for C1Chart.

It is important to understand how the chart elements appear in Gantt Chart. When we implement Gantt Chart each Task is defined by a HighLowSeries. High value for a HighLowSeries define the Start DateTime value and low value defines the End DateTime value.

Consider the following code below.

'/////////////// Task 1 /////////////////////////////////

Dim startSeries As New C1.Silverlight.Chart.HighLowSeries
startSeries.ChartType = C1.Silverlight.Chart.ChartType.Gantt
startSeries.Label = "New Task1"

Dim startValues As New List(Of DateTime)
startValues.Add(New DateTime(2014, 1, 1, 0, 0, 0))

Dim endValues As New List(Of DateTime)
endValues.Add(New DateTime(2014, 1, 6, 0, 0, 0))

startSeries.HighValuesSource = startValues
startSeries.LowValuesSource = endValues

chartSL.Data.Children.Add(startSeries)
'/////////////// End Task 1 //////////////////////////////

Above code will generate an output like this.
SingleTask

Now what if we want a task to be divided in two time slots or consider that the above has task to be completed in two phases. In this scenario, we have to add multiple DateTime values for HighValuesSource and LowValuesSource properties which take enumerable DateTime collection.

This is the modified version of the above code to divide a task in multiple time slots. You would observe multiple DateTime values added to the startValues and endValues array which define the start and end time for multiple slots for the same task.

'/////////////// Task 1 /////////////////////////////////

Dim startSeries As New C1.Silverlight.Chart.HighLowSeries
startSeries.ChartType = C1.Silverlight.Chart.ChartType.Gantt
startSeries.Label = "New Task1"

Dim startValues As New List(Of DateTime)
startValues.Add(New DateTime(2014, 1, 1, 0, 0, 0))
startValues.Add(New DateTime(2014, 1, 5, 0, 0, 0))

Dim endValues As New List(Of DateTime)
endValues.Add(New DateTime(2014, 1, 3, 0, 0, 0))
endValues.Add(New DateTime(2014, 1, 10, 0, 0, 0))

startSeries.HighValuesSource = startValues
startSeries.LowValuesSource = endValues

chartSL.Data.Children.Add(startSeries)
'/////////////// End Task 1 //////////////////////////////

For the above code, task will appear in multiple slots like this.

MultipleTask

Similarly you can have multiple tasks added split into multiple slots as shown in image below.
MultiSlotTasks

Download the sample below to understand the complete working implementation.
Gantt Chart Sample

I believe it is not that tough as we may have thought earlier and this blog should make you feel comfortable to implement Gantt Charts with LightSwitch application.

Tags