QlikView Extension – D3 Animated Scatter Chart

The Animated Scatter Chart Extension is based on the excellent charting library D3js.org and a recreation of Gapminder’s Wealth & Health of Nations, made famous by Hans Rosling’s memorable 2006 TED talk, by Mike Bostock.

Motivation

The range of use of this chart type is certainly limited but it is perfect to visualize the transition of two KPIs over time (years).

If you are interested in seeing the extension in a live demo, visit one of my previous posts.

Screenshots

Animated Scatter Chart - Example

Download & Installation

Installation of the QlikView extension is straightforward, there is nothing special to take care of:

Extension Configuration

There are some properties which can be set for the “D3 Animated Scatter Chart” extension (examples below are set on the sample chart above).

Data Options

Animated Scatter Chart - Data Properties

Property Description Example
Primary Dimension Primary dimension for the bubbles. [Country Name]
Dimension Grouping Secondary dimension used for color grouping. Region – will color all countries according to the given region.
Year Field, containing the Year value. Year
X-Axis Measurement Measurement on X-axis Sum(BirthRate)
X-Axis Label Label of the X-axis. Birth rate, crude (per 1,000 people)
X-Axis Type Type of X-scale (Linear is default). Linear or Logarithmic
Y-Axis Measure Measurement on Y-axis Sum(DeathRate)
Y-Axis Label Label for the Y-axis. Death rate, crude (per 1,000 people)
Y-Axis Type Type of Y-scale (Linear is default). Linear or Logarithmic
Bubble Size Measurement of definition the bubble size. Sum(Population)

Chart Layout & Behavior

Animated Scatter Chart - Chart Layout & Behavior

Property Description Example
X-Axis Minimum You can set the maximum of the X-axis either explicitely or it will be calculated dynamically (in this case set the value to 0.
Note: For performance reasons it is recommended to pass this value using a QlikView expression.
Max(BirthRate)
Y-Axis Minimum You can set the maximum of the Y-axis either explicitely or it will be calculated dynamically (in this case set the value to 0.
Note: For performance reasons it is recommended to pass this value using a QlikView expression.
Max(DeathRate)
Year Size Size of the Year label in pixel. 100
X-Label Font Size Font size for the X-axis label in pixel. 10
Y-Label Font Size Font size for the Y-axis label in pixel. 10
Transition Transition duration in milliseconds, 10000 is default. 10,000
Show Replay Button Define whether the replay buttons should be shown or not. true/false

Example Application

I have created a more advanced example application where you can select the measurements for the X-axis, Y-axis and the bubble size within the QlikView application using only list boxes in QlikView.

Animated Scatter Chart - Advanced Usage

The sample QlikView application can be downloaded from GitHub.

Bookmark and Share

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

22 Comments

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

    Wow. Super cool.

    I need help stefan, is gps integration extension and speech recognition extension is possible.

    I do have codes, but finding so difficult to customize to mine need. Need a help from you

    • Posted June 5, 2013 at 18:02 | Permalink

      Hi Hari,

      sorry I will not be able to support in concrete projects … Did you find the corresponding solutions on QlikCommunity?

      Regards
      Stefan

      • Hari
        Posted June 5, 2013 at 18:58 | Permalink

        I was able to get some generic code from brian and elif.

        But facing some customization problem in locate me extension.

        Thought of getting some tips from you, if you had done any gps ot speech integration before.

        • Posted June 5, 2013 at 19:34 | Permalink

          I have only developed some basic prototypes, but basically based on the extensions posted on QlikCommunity by Brian an Elif …

          So, sorry … I’m afraid I will not be a great help for you …

          Regards
          Stefan

          • Hari
            Posted June 6, 2013 at 05:55 | Permalink

            Thats fine stefan.

            One more question. will it support in Ipad and safari browser ?

          • Posted June 6, 2013 at 06:14 | Permalink

            Yes ..

          • Hari
            Posted June 6, 2013 at 12:28 | Permalink

            Stefan

            I just tested in QV App in Mobile and safari. Unfortunately, it is not working.

            It is blank. Any idea or suggestions or tips will be most welcome.

            Thanks

  2. Sean
    Posted June 5, 2013 at 22:52 | Permalink

    Great work!!

    Have you tried to get a List box value, i.e. Linear or Logarithmic and then the chart changes dynamically… ?

    Sean

    • Posted June 5, 2013 at 22:56 | Permalink

      Yes … why?

      • Sean
        Posted June 6, 2013 at 01:43 | Permalink

        I was curious if it is possible to bring in Selected value or possible valued from a list box (data island) with always one value selected option on. So the end user can change the chart from the access point by clicking the filter….

        Are you using Visual Studio and qv workbench for the development?

        It is very frustrating that there are not much documentation around in the web.

        I am using a notepad++ and have created a simple horizontal and vertical bar chart. I wanted to combine them a way that is similar to the Grouped and Stacked Bar chart in d3 examples. I am struggling trying to embed ‘form’ tag inside the script… I would like to see how it can be done. Also, if you have some kind of documentation, can you post some of basic functions?

        Once again, I am very exited seeing another working code with D3.

        Thanks!!

  3. Sokkorn Cheav (Mr.)
    Posted June 6, 2013 at 03:43 | Permalink

    Dear Mr. Stefan,

    Excellence extension. This is QlikView out of the box. Please share more on animation chart.

    Regards,
    Sokkorn

  4. Hari
    Posted June 6, 2013 at 12:58 | Permalink

    Stefan,

    In general, how an extension that works in IE,Chrome etc in windows environment doesnt work in IOS safari, QV app etc ?

    How to make our extensions so generic ? any suggestions or idea ?

    • Posted July 20, 2013 at 13:26 | Permalink

      Hi Hari,

      it should work on Safari. Did you test it? Which issues to you experience?

      Regards
      Stefan

  5. YaDurand
    Posted June 10, 2013 at 11:34 | Permalink

    Hi
    Very nice work.
    But when i try to open the properties of your chart I got an error. I’ll try to translate it in english :

    Script error
    Line : 58
    Caracter : 385495
    Error : impossible to obtain the property “getattribute” of a null or not defined reference
    Code : 0
    URL: http://qlikview.com/QvAjaxZfc/QvAjax.js

    Does you have any idea what’s the cause ?

  6. YaDurand
    Posted June 10, 2013 at 14:13 | Permalink

    Hi
    Don’t worry I solved my problem

    If some other people have the same issue, just uninstalled QV, and reinstall the latest version.

    • Posted July 17, 2013 at 10:15 | Permalink

      OK, thanks!

      • srinivasan.r
        Posted November 14, 2013 at 14:04 | Permalink

        Hello team
        My D3.js graphs are working at the Html at IE. i want to convert to Extension. i dont know where is the bridge between extension and graph join. i dont know the syntax of this. can any one help me.

        • srinivasan.r
          Posted November 14, 2013 at 14:07 | Permalink

          can any one help me out how to create the circle or elips or squre. i can pickup from there. a small example

  7. Avs
    Posted February 3, 2014 at 01:41 | Permalink

    Hi Stefan,

    Your work is impressive, and I was wondering whether we could use D3 Animated charts in our analytics solution to provide it to our customers. Could you provide a license perhaps, i.e. MIT license or other terms and conditions?

    Also, I understand from a previous comment that you will not officially support Project implementations. If that stance has changed in the past months, please let me know.

    Thanks and Regards.

  8. Martin
    Posted February 18, 2014 at 16:30 | Permalink

    Hi Stefan,

    are there known issues using D3 with Qlikview 11.0? ( I developed an extension in 11.2 but the d3 library throws several errors when opening the document on an QV 11.0 (11440) Server. I also can’t open your Scatter Chart Demo Application so it seems like a general problem (?).

    Regards,
    Martin

  9. Alex Prokop
    Posted April 7, 2014 at 12:01 | Permalink

    Hi, I’ve just downloaded the example application, but it seems like the excel data is missing from the file? I’ve managed to locate 8_Topic_MetaData_en_EXCEL.xls from the World Bank, but now I’m missing Country_Region.xls and can’t seem to find the correct file online?

One Trackback

  1. […] 24. QlikView Extension – D3 Animated Scatter Chart http://www.qlikblog.at/2574/qlikview-extension-animated-scatter-chart/ […]