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

  1. Hari
    Posted June 5, 2013 at 17:54 | Permalink

    Nice and super cool..

  2. Posted June 5, 2013 at 23:19 | Permalink

    I agree that most of the charts on the d3 site are a little over the top for analysis purposes, but there is definite value added to even be able to build your own basic charts like bars and lines. The value lies in some of the custom formatting options that you can’t achieve in QlikView.

    • Posted June 5, 2013 at 23:25 | Permalink

      I agree, absolutely … especially if we are talking about some very special technical (e.g. in the automotive or manifacturing industry) or financial charts, Regards Stefan

    • Hari
      Posted June 6, 2013 at 06:52 | Permalink

      Custom formatting is good in QV. I am not sure what you meant by cant achieve ?

      • Posted June 6, 2013 at 15:18 | Permalink

        Here is a simple example. Take Edward Tufte’s slope graph seen here:
        http://www.edwardtufte.com/bboard/images/0003nk-10289.gif

        You can make this chart in QlikView, but unfortunately you cannot put labels to the left and right of lines. The only options you have are either to put the labels on the points, which centers them above each point, or color the lines and add a legend.

        The first workaround is problematic because the labels may cover other points of the graph. For example, France, Belgium, and Germany on the right would not be decipherable with their labels on top of the points rather than to the side.

        The second workaround technically achieves what you want, but I would argue that it is much harder to read and thus diminishes the value of the graph. We would need 15 different colors to create the chart. Reading it would be time consuming. While in Tufte’s version, you can read the labels of France, Belgium, and Germany as you examine the various lines, with a colored version you would have to check the color of each line with the legend and store those values in your head.

        My point is, even the smallest formatting changes can add great value to the perception of a chart.

  3. YaDurand
    Posted June 10, 2013 at 17:28 | Permalink

    Hi,
    I am very impressed with what you achieved in 10 minutes.
    Do you have explanation or any link to point me in the direction on how to do such a think from scratch ? It is hard to find explanation for someone who doesn’t know anything in that matter.
    Thanks !

  4. Daniel M
    Posted October 8, 2013 at 16:37 | Permalink

    Hi Stefan,
    Would you be willing to post this extension? I’d love to take a look at it as I’m trying to incorporate some D3 visualizations myself.

    Thanks!
    Daniel

  5. Allan
    Posted October 26, 2013 at 13:27 | Permalink

    Stefan –

    Thanks for this info. Is there a way to see the SQL behind a QlikView chart (straight table; pivot table; etc)? We have some charts in QV that we’d like to put back into the QV script code without having to manually write all the code. The chart GUI makes it really easy to create charts with data from multiple tables so it’d be nice to be able to use the chart creation feature almost as a code generating tool. Thoughts on this?

    Thanks,
    Allan

    • Posted October 28, 2013 at 09:16 | Permalink

      That will not work since QlikView is not querying the underlying databases directly by default (this only happens if you are using Direct Discovery)

      Regads Stefan