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:
- Download the extension + Sample QlikView application
- Install the extension on your local computer (doubleclick the .qar file)
- Drag’n’Drop the extension within QlikView Desktop (using WebView)
- Finally deploy the extension to your server (-> detailed instruction)
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.
Stefan WALTHER
22 Comments
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
Hi Hari,
sorry I will not be able to support in concrete projects … Did you find the corresponding solutions on QlikCommunity?
Regards
Stefan
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.
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
Thats fine stefan.
One more question. will it support in Ipad and safari browser ?
Yes ..
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
Great work!!
Have you tried to get a List box value, i.e. Linear or Logarithmic and then the chart changes dynamically… ?
Sean
Yes … why?
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!!
Dear Mr. Stefan,
Excellence extension. This is QlikView out of the box. Please share more on animation chart.
Regards,
Sokkorn
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 ?
Hi Hari,
it should work on Safari. Did you test it? Which issues to you experience?
Regards
Stefan
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 ?
Do you really get the URL http://qlikview.com/QvAjaxZfc/AvAjax.js?
Where are you trying that, in QlikView Desktop or in the QlikView Ajax-Client opened from QlikView AccessPoint?
Regards
Stefan
Hi
Don’t worry I solved my problem
If some other people have the same issue, just uninstalled QV, and reinstall the latest version.
OK, thanks!
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.
can any one help me out how to create the circle or elips or squre. i can pickup from there. a small example
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.
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
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
[…] 24. QlikView Extension – D3 Animated Scatter Chart http://www.qlikblog.at/2574/qlikview-extension-animated-scatter-chart/ […]