Integrating a charting library with View & Data API

By Philippe Leefsma

Here is a quick post to illustrate some of my work integrating graph charts into a viewer model in order to have a more visual representation of the data.

I initially experimented the Raphael library but it requires an additional extension do do charting: gRaphael. Although it produces nice graphs, I personally found some of the features of it's API were not straightforward to use. I also had some quirks when trying to integrate it in a more complex sample. You can take a look at my mongo sample which is using that library if you are looking for a concrete example. The full source code is available from github there.

My second experiment is using Chart.js and I found it very painless to work with that library. Below is the full source code of the extension to demo it: the nice feature is that it can apply to any viewer model. When loaded it will scan the list of existing properties for each components, then gather them in a dropdown menu so the can be represented by a chart. I also played with various chart type from the library: pie, doughnut and polar. 

The extension has dependencies to the following libraries:

Bootstrap, async.js, and obviously Chart.js.

 

Comments

[k r harsha]

I'm getting an error at createDropdownMenu function. It says 'Cannot read property 'label' of undefined' and I have no idea of what to do next.