Using D3 Controls in ComponentOne Studio for LightSwitch HTML Client

May 13

Written by: Michael Washington
5/13/2014 5:56 PM

The latest update to the ComponentOne Studio for LightSwitch adds data visualization.

This release adds five new charts powered by the D3.js library, Bubble Chart, Gantt Chart, Heatmap, Timeline, and Treemap.

Using The Gantt Chart

To demonstrate how you implement the controls, we will look at the Gantt Chart.

First, we install the ComponentOne Studio for LightSwitch HTML, and enable it and the ComponentOne D3 Controls for LightSwitch HTML extensions.

We right-click on the Client project and select Manage NuGet Packages…

We search for and install the Wijmo for LightSwitch HTML Client and D3 Controls for LightSwitch HTML Client.

If we get the warning box we click Yes to All.

We create a simple table to hold Vacations.

We create screens for the table.

We enter sample data.

Next, we change the control to a D3 Collection Control.

We reorder the properties according the the format expected by the control:

First property = task start (DateTime)
Second property = task end (DateTime)
Third property = task label (string)
Remaining properties are ignored

In the Properties for the control we select the Gantt Chart.

We click the Edit Render Code link in Properties to automatically create the required JavaScript code.

The JavaScript code is automatically created.

We add a custom format because we want to display days instead of hours.

When we run the project the Gantt Chart displays.

The D3 Controls

To use these controls, add the extension ComponentOne D3 Controls for LightSwitch HTML to your project. You will also need to add the NuGet package D3 Controls for LightSwitch HTML Client to your HTML client project. This package is dependent on the specific version of Wijmo for LightSwitch HTML Client provided with this release, and future releases will update both packages so that they share the same version number.

No screen templates are provided for the D3 controls, but you can instantiate them as follows:

Create a new browse screen for the desired data source.
In the screen designer, change the control type of the collection element from List to D3 Collection Control.
In the Properties window, set the Widget property to the desired control (default: Treemap).
Click the Edit Render Code link to generate the render method for the control.

As with Wijmo collection controls, the design-time elements under Columns Layout must be specified in the proper sequence in order for the D3 control to function correctly at runtime. The required entity properties are as follows: