Menu

Lightswitch HTML & Canvas JS. Interactive HTML5 Charts

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:

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

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