Creating a QlikView Extension from Scratch using D3 (QlikTip #50)

I recently received the request from a colleague if the following animated scatter chart published on GapMinder could be realized with QlikView Extensions.

GapMinder World - Wealth & Health of Nations

After some research I found out that the guru Mike Bostok has created a clone of the above solution using D3:

Recreation in D3 of Gapminder’s Wealth & Health of Nations by Mike Bostock

So I was wondering how long it would take to bring that solution to QlikView as a QlikView Object Extension.

First results after 10 minutes

After downloading some sample data from the World Bank and using Mike Bostock’s code I got it up and running (with some dummy data) in about 10 minutes.

First results after some minutes

Working version after 2 hours

Following some best practices and taking benefit of some experiences with QlikView Extensions the next steps were completed surprisingly fast.

  • Understanding how to code works
  • Re-Coding it a little bit
  • Parametrizing everything to be able to define all settings in the properties of the extension
  • Bringing the data from QlikView to the JavaScript code

My QlikView Extension was finished … nearly …

Finished after 5 hours

So, to be honest, after having the first results the “hard” and annoying work began: Writing the documentation, cleaning the code, creating a nice sample QlikView application …

The Result

The following short video demonstrates the final result:

Unable to display content. Adobe Flash is required.

So Why do I Tell You That?

There are several reasons why I have decided to share this experience:

  • First of all it is amazing how fast terrific chart solutions can be brought to QlikView
    (Sure, you’ll need to find some existing code, but fortunately many other people have done the hard and time-consuming work …)
  • I have absolutely fallen in love with the charting library D3, I love this framework, it is amazing what can be done by just using JavaScript and SVG
    I am really looking forward to having some time to create some basic charts from the scratch …
  • Have a look at the examples on D3js.org and imagine that most of these charts could be brought to QlikView easily … OK, in many cases there are better ways to visualize data, but for certain scenarios …

Some Charting Examples from D3js.org

Finally …

Sure, I will post this QlikView Extensions, so that you can use it in your projects … Stay tuned.

Bookmark and Share

and tagged , , . Bookmark the permalink. Both comments and trackbacks are currently closed.

10 Comments