You are here:   Blog
Register   |  Login

 

May 13

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

image

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

image

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.

image

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

image

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

image

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

image

We create a simple table to hold Vacations.

image

We create screens for the table.

image

We enter sample data.

image

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

image

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

 

image

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

image

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

 

image

The JavaScript code is automatically created.

image

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

image

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:

  1. Create a new browse screen for the desired data source.
  2. In the screen designer, change the control type of the collection element from List to D3 Collection Control.
  3. In the Properties window, set the Widget property to the desired control (default: Treemap).
  4. 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:

image

  • First property = data points (labels)
  • Second property = data points (numeric values)
  • Remaining properties are ignored

image

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

image

  • First property = row labels
  • Second property = column labels
  • Third property = data points (numeric values)
  • Remaining properties are ignored

image

  • First property = data points (DateTime only, X-axis)
  • Remaining properties = data series (numeric values only, Y-axis)

image

  • First property = data points (labels)
  • Second property = data points (numeric values)
  • Remaining properties are ignored

 

Special Thanks

A special thanks to John Juback, and Dan Beall at ComponentOne for their assistance in creating this article.

Links

Installing ComponentOne Studio for LightSwitch HTML

ComponentOne Studio for LightSwitch HTML - Live Sample

What's new in Studio for LightSwitch

ComponentOne Studio for LightSwitch HTML Help

Download Code

The LightSwitch project is available at http://lightswitchhelpwebsite.com/Downloads.aspx

(you must have Visual Studio 2013 (or higher) installed to run the code)

(you must have ComponentOne Studio for LightSwitch HTML Trial or full product installed to run the code)

2 comment(s) so far...


Gravatar

Re: Using D3 Controls in ComponentOne Studio for LightSwitch HTML Client

Do you have a list of custom formats for the gantt chart?

By scott on   8/11/2014 2:14 PM
Gravatar

Re: Using D3 Controls in ComponentOne Studio for LightSwitch HTML Client

@Scott - A detailed list of all settings is here: http://helpcentral.componentone.com/nethelp/c1htmlclientlightswitch/#!Documents/d3controls.htm

By Michael Washington on   8/11/2014 2:16 PM

Your name:
Gravatar Preview
Your email:
(Optional) Email used only to show Gravatar.
Your website:
Title:
Comment:
Security Code
CAPTCHA image
Enter the code shown above in the box below
Add Comment   Cancel 
Microsoft Visual Studio is a registered trademark of Microsoft Corporation / LightSwitch is a registered trademark of Microsoft Corporation