Recently I was working on a project to display data in different type of charts. Although, there are plenty of HTML5 frameworks to build that sort of controls, I was struggling to find what I was looking for. As I was developing app In Lightswitch for all range of devices from PC to small screen phones, consuming data from a multidimensional cube (probably will create another post about different BI options), I needed charts to be very light (canvas, not svg), supported simple interactions and to be open source. I was aware of pretty solid product, called Component One Lightswitch Studio, however, honestly, didn’t like the performance it provided together with kind of high setup complexity, even that project was positioned as a easy development less tool to build charts. You can look at the product page here: Link
Fortunately, I came across an interesting framework, called CanvasJS : CanvasJS All charts were built using canvas, straight forward instructions to setup and had wide range of different options to customize controls, together with ability to change source code as much as you want.

Whole documentation is available on the product web site. It is very easy and intuitive to customize charts. The only thing I had to do to make that charts worked was to create helper class, to provide kind of native support for data collections from Lightswitch screen. Also, Canvas JS has predefined data structure and variable names for income data, so I have created mapping function which allows me to map lightswitch data directly to charts.

Here are couple screenshots first.
This is how it looks at some of my production apps:

2-07-2014 9-19-12 PM



Helper class is just extend Canvas JS and allows you to use all Canvas JS options.

2-07-2014 9-22-37 PM

To create a simple Column Chart, showed above, we just need to create a Custom Control in Lightswitch and enter its render function:


In this example contentItem.value is a collection of objects {y:… ,label:… }. Canvas JS expects datapoints with predefined parameters such x,y,z,label etc. more info here

For such cases when we have our custom collection, let’s say from SQL data source, and column names don’t much x,y,z… we can use mapping function.

The example below shows the same Column Chart when using mapping function. Notice, that now contentItem.value is a collection of objects {FruitName:… ,Count:… },


You also can have many data series and link Data Items (queries) directly to chart series. Here is an example:

Here is a source code:

Tagged on:     

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">