Understanding Gantt Chart in LightSwitch

With the new release of ComponentOne Studio for LightSwitch Desktop (Build 4.0.20133.47), Chart control for LightSwitch now provides default support for Gantt Chart Type. Coolest part of this new feature is that creating a Gantt Chart does not require any coding. This can be easily implemented from designer with simplest of screen settings. However, while I say this, I don't mean that this control is restricted to Designer; it can also be easily used by the developers who would be looking to create Gantt Chart at runtime. In this Blog, I am describing the steps to get the Gantt Chart appear with SQL binding.

Define DataSource for Chart Binding

Your SQL DataTable may have end number of columns. For Gantt Chart to work, it should have mandatory 3 fields which can be mapped to the field types described below.

  • Task Name
  • Start Date
  • End Date

Following screenshot shows how my SQL datatable looks like. SQL Structure Next steps are routine tasks which involve creating a new LightSwitch Desktop Application and adding the SQL DataTable as DataSource to the Project. I am considering that developers who are looking to work with Gantt Chart, already know about this process.

Creating New LightSwitch Chart Screen

Now, once we have the datasource added, lets get the Chart Screen added to the Project. You can refer to this documentation link for information on adding Chart Template to the existing project.

Makes Changes to Desginer Settings

Once you have the screen added, you have to do some settings to configure the C1Chart control to display a Gantt Chart. Its important to understand the hierarchy in which the elements work in Designer. One should be aware of the following elements to configure the Chart control.

  • C1ChartDataItemName : It defines the name of the Tasks/Events to be plotted
  • C1ChartDataSeries : Contains array for either Start Dates or the End Dates of the events

Unlike the other chart types, Gantt Chart must have two C1ChartDataSeries elements. The first one specifies the start date/time, and the second one specifies the end date/time. Refer to the series of images attached below to understand how the Chart screen and SQL datasource fields have been configured.



### Chart Settings


 ### Customizing Fields

[![ChartDataItemName](//cdn.mescius.io/assets/developer/blogs/legacy/c1/2013/12/ChartDataItemName.png)](//cdn.mescius.io/assets/developer/blogs/legacy/c1/2013/12/ChartDataItemName.png) [![StartValueField](//cdn.mescius.io/assets/developer/blogs/legacy/c1/2013/12/StartValueField.png)](//cdn.mescius.io/assets/developer/blogs/legacy/c1/2013/12/StartValueField.png) [![EndValue](//cdn.mescius.io/assets/developer/blogs/legacy/c1/2013/12/EndValue.png)](//cdn.mescius.io/assets/developer/blogs/legacy/c1/2013/12/EndValue.png)

Once we have the above designer settings right on their place, final output would appears like this.
[![FinalDesignerOutput](//cdn.mescius.io/assets/developer/blogs/legacy/c1/2013/12/FinalDesignerOutput.png)](//cdn.mescius.io/assets/developer/blogs/legacy/c1/2013/12/FinalDesignerOutput.png)

I hope this will help everyone to kick start on their first experience with **C1Chart for LightSwitch**. You can leave your comments if you have any doubts or feedback on this.

MESCIUS inc.

comments powered by Disqus