Improvements to WebPageViewer2 QlikView Extension

By Stefan Walther 3 Comments
Posted in Extensions

In the last months I have received quite often the request to add a new feature to my WebPageViewer2 extension (you could even say it’s a bugfix): The extension did reload the web page on every QlikView refresh event (e.g. making any selections), even if the Url of the web page did not change.

Improvement to WebPageViewer2 (v1.0.2)

There is now a new property called “Prevent reloading if Url does not change” which exactly does what many of you requested: Prevent reloading the Url if it does not change …

WebPageViewer2: New Property "Prevent Reloading if Url does not change"

Download Latest Version + Documentation






Bookmark and Share
Published: January 6, 2014
Tags: , ,

SlopeGraph for QlikView (D3SlopeGraph QlikView Extension)

By Stefan Walther 6 Comments
Posted in Design & Layout, Extensions

Some weeks ago the chart type “Slope Graph”, invented by Eward Tufte in 1983, was first brought to my attention.

When I first saw it I thought that it would be quite easy to bring this chart also to the QlikView world. But after some research I realized that Slopegrahps have some drawbacks which are quite tricky to solve.

I have found quite a dozen of nice implementations out there but none of them was really satisfying me. So this little project was a perfect playground for me to understand challenges when creating chart-visualizations better. It really was the first project where I did not only adapt existing visualizations based on D3 to be used in QlikView, instead I created a new implementation of Slopegraphs in D3 (by combining several existing approaches).

Here is the result:

D3SlopeGraph QlikView Extension

Some Theory about Slopegraphs

Edward Tufte states: “Slopegraphs compare changes over time for a list of nouns located on an ordinal or interval scale” and he also first published and example in his book “The Visual Display of Quantitative Information” in 1983:

Tufte, Edward. The Visual Display of Quantitative Information. Cheshire, Connecticut: Graphics Press; 1983; p. 158

Slopegraph Example by Edward Tufte

Advantages and Scenarios for Using SlopeGraph

  • Slopegraphs are very minimal visualizations, there is no unnecessary information
  • It is easy to capture changes over time
  • The same type of data is shown on the left and right side using the same units of measurement
  • “Any time you’d use a line chart to show a progression of univariate data among multiple actors over time, you might have a good candidate for a SlopeGraph” (source)

Drawback

The most important and relevant drawback of using Slopegraphs is that if you have a lot of dimensions with similar values the visualization becomes messy very quickly (see some screenshots below demonstrating this).

My Approach for Slopegrahps

To overcome the above described drawback I have chosen a combination of several approaches based on the default visualization:

Default Visulization

Handling Conflicting Label
In the above displayed example you’ll see that three dimensions on the left side share the same value for 2012. Instead of displaying them upon each other the dimensions are shown one below the other.

Emphasizing Dimensions
If you hover a dimension, the current dimension will be emphasized / highlighted

Highlighting hovered dimensions

Displaying a Summary
While hovering a dimension a tooltip will be displayed with a short summary. This is especially useful if you have a lot of dimensions with little movement from one to the other time period:

ToolTip for hovered dimensions

Text Fadout for Colliding Labels
But there is still the issue that if you have a lot of dimensions with similar values that they will collide:

Label Collisions

There are many suggestions how this can be solved, I have chosen an interactive one where conflicting labels will be faded out if you hover a dimension:

Conflicting Labels - Resolution

Still to Many Dimensions & Messy Visualization
There are situation where all the above described solutions are not sufficient. Especially if you are using a lot of dimensions this can happen.

Messy result because of conflicting labels

There are two possible solutions:

  • Use a different chart type
  • Increase either the size of the chart object (extension) or increase the size of the plotting area. By doing so you’ll see a vertical scroll-bar, but certainly, the user has to scroll …

Same data as above but with a larger plotting area (+ scroll-bars)

Caution for Touch-Devices
It is at this point important to mention that the approaches I have chosen are not really a perfect fit for mobile devices (especially if you think of touching devices which at the same time excludes hovering items …). I’ll have to investigate on this …

Conclusion

In my opinion it is really worth giving this type of chart a try (and I would not be surprised if we’ll see Slopegraphs much more often in the future). But this type of chart is also not a “generalist”, usage and configuration has to be considered with caution.

Download Extension, Demo + Source Code

The solution called “D3SlopeGraph QlikView Extension” is published under MIT-license and free to use (but still, I am happy to hear your feedback!!!)

Issues, Bugs, Wishes

If you have any issues please post them here.

Additional Articles on the Web

Bookmark and Share
Published: January 2, 2014
Tags: , , ,

Calendar Heatmap QlikView Extension (D3CalendarView)

By Stefan Walther 7 Comments
Posted in Extensions

I have recently published a free calendar heatmap extension to compare values on a day-per-day basis over a long period of time (several years). The extension is developed using D3 and an existing visualization called “Calendar View” by Mike Bostok.

The data passed to the extension is displayed in a diverging color scale. The values are visualized as colored cells per day. Days are arranged into columns by week, then grouped by month and years.

Screenshots

Example 1 - Displaying Historical Dow Jones Data

Example 2 - Visualizing U.S. Commercial Flights

D3CalendarView Extension - Configuration Dialog

Usage Scenarios

There are several scenarios where using this extension seems to be a helpful kind of visualization:

  • Comparing changes of stock exchange prices
  • Making out of stock trends visible
  • etc.

Download, Configuration & Source Code

The source code, a demo-application and the .qar files are published on GitHub, where you will also find a short description how to configure the extension.

GitHub-Repository to post issues, fork the source-code, etc.:






Bookmark and Share
Published: December 30, 2013
Tags: , , ,

Plea for Open Source Development in the QlikView World

By Stefan Walther 26 Comments
Posted in Development /QV Developer, Extensions, Integration

To be honest, I’m a little bit frustrated when talking about open-source development for QlikView. For quite some time I am trying to share as much content as possible and the response/feedback is little.

For a long time I was thinking that maybe I am just developing solutions which are not used/needed by customers and partners, but the last months have shown me that the reality is different:

  • I – quite often – see my solutions (posted on this blog and on CodePlex and GitHub) in real world scenarios
  • And furthermore my prototypes are taken and improved, but I never receive any feedback. That would be OK, but I would really expect that at least some customers or partners post their improvements by applying patches or improvements to CodePlex or GitHub … Unfortunately this has only happened once – today.

Can you imagine why there is no real open-source culture in the entire QlikView community?

Sure QlikCommunity is great and a lot of code-samples are posted there, but you can rarely find ready-to-go open-source solutions out there and furthermore I really miss these projects where many developers are working on the same code, inspiring each other – I only know a few QlikView related open-source initiatives:

Are there other project out there which I do not know?
If you have a look at all the projects mentioned above there is little or no contribution by other developers beside the author (except the QlikView Components project).

Wouldn’t it be nice, if …

  • … there were a lot more open-source projects out there with a vital community of QlikView developers?
  • … some discussions on QlikCommunity result in useful code-pieces posted as Gists (or similar formats)?
  • … you were able to use the resulting solutions in your daily life as a QlikView user/developer/consultant?
  • … we were able to bring our know-how together to create astonishing solutions
  • … we do not need to re-invent the wheel in many cases?

My Contribution

I can only talk for myself and how I am planning to improve the situation in the future:

  • I am planing to move all my content from CodePlex to GitHub because GitHub seems to support participation of other developers much better.
  • I am going to upload all my prototypes on GitHub, not only projects which are ready-to-use but also alpha versions of several prototypes.
  • I will be happy to receive code-requests, patches and so on and integrate them into the main-line of my solutions.

Hmmm, really looking forward to reading your ideas and opinions regarding open-source development in the QlikView world.




Bookmark and Share
Published: December 9, 2013

QlikView Extension Tutorial #2: Hello World – Creating Your First QlikView Object Extension

By Stefan Walther 3 Comments
Posted in Extensions
This article is part of a series of articles, see also the table of contents.
← Previous Chapter

OK, it’s now time to stop with theory and start coding. We’ll create our first “Hello World” extension.
The easiest way to start with your first QlikView Extension is to create the required extension code where QlikView expects extensions to be:

In Windows 7/8 QlikView is loading extensions from the following folder:

C:\Users\%USER%\AppData\Local\QlikTech\QlikView\Extensions\Objects

Step 1 – Creating the Necessary Files

  1. First create a folder named “ET-HelloWorld” (ET stands for Extension Tutorial).
    C:\Users\%USER%\AppData\Local\QlikTech\QlikView\Extensions\Objects\ET-HelloWorld
  2. Create two empty files within this folder, one called “Definition.xml” the other “Script.js”

The Definition.xml file is the main file where QlikView searches for some meta-information of your QlikView extension. We start with a basic set of information:


<?xml version="1.0" encoding="utf-8" ?>
<ExtensionObject  Path="ET-HelloWorld"
                  Label="Hello World"
                  Description="Hello World Extension"
                  Type="object">

</ExtensionObject>

If QlikView loads this file the following information is set:

  • The path (folder) of our extension is set to “ET-HelloWorld”.
  • Label and Description is set to “Hello World” and “Hello World Extension”, we will recognize these values in a few minutes when we are adding the extension to a QlikView Document.
  • Finally we have defined that we are aiming to create an Object Extension by setting the “Type” attribute to “object”.

Now open the Script.js file and type/paste the following code into it:

Qv.AddExtension("ET-HelloWorld",
        function () {

            // Set the extension object's inner Html
            this.Element.innerHTML = 'Hello World';

        });

If this piece of code is loaded by QlikView an extension will be made available in QlikView Desktop and the inner Html of the extension element will be filled with “Hello World”.

Note: For ensuring that we do not have a conflict with other QlikView Extensions I will – in all chapters – use the prefix “ET-“ in all examples we create together.

Test Your Hello World Extension

Now let’s add the newly created extension to a new QlikView Document:

  1. Open QlikView Desktop
  2. Create a new QlikView document and save it
  3. Switch to WebView
  4. Click somewhere in the sheet and activate the context-menu (right mouse click)
  5. Navigate to “New Sheet Object”
  6. Switch to the accordion panel “Extension Objects”
  7. You should now see a window very similar as the one below with at least having your “Hello World” extension in the list of available objects:

Hello World Extension in your list of extensions

  1. Drag & Drop the “Hello World” extension somewhere to your sheet.
  2. You will see the result of your “Hello World” extension:

The resulting Hello World extension

Congratulations, you have created your first QlikView Object Extension!

The Anatomy of a QlikView Extension

It’s now time to understand the anatomy of a QlikView extension. There are at least, as you have realized in your Hello-World example, two files required for an extension to work property:

  • Definition.xml
  • Script.js

But there are other files too, so here’s the list of all possible elements of an extension:

File Name Description
Definition.xml Within the Definition.xml file some meta-data (like the name of the extension, a description, etc.) and all properties and initial values for the extension are defined.
Script.js The Script.js file is the main entry point for your extension, QlikView is loading the extension only if a Script.js can be found and is a function called Qv.AddExtension within this file.
Icon.png By adding a file called Icon.png to the directory you can define the icon shown in the list of all extensions.
This should be a PNG-file with 24×24 pixels.
.qvpp files QlikView Property Pages, you’ll learn more how to use this functionality in some of the following chapters.
Additional files Additional resource files like JavaScript files, images, etc. – you’ll learn more how to reference these files in one of the following chapters.

In the next chapter we’ll concentrate on improving the experience of our Hello-World example.

Bookmark and Share
Published: December 3, 2013
Tags: , , ,

QlikView Extension Tutorial #1: The Concept of QlikView Extensions

By Stefan Walther Leave a comment
Posted in Extensions
This article is part of a series of articles, see also the table of contents.
← Previous Chapter

The Concept of QlikView Extensions

The concept of QlikView Extensions has been introduced with QlikView 10 and improved with QlikView 11+.

A QlikView Extension allows you to visualize your data the way you want to see it. With Extensions fully interactive custom visualizations can be used directly from within QlikView. This feature enables the use of specialist visualizations and user interface components that are not present in standard QlikView today. Extensions allow developers, for example, to create and use a map, a tag cloud or an infographic chart directly from within their QlikView application like any other QlikView object.
QlikView Extensions are built by developers using standard web technologies and are installed alongside a standard QlikView installation. An Extension is developed and packaged by a developer ready to be installed then used within a QlikView application. This plug-in mechanism allows Extensions to be developed once and re-used in multiple QlikView applications. Once an Extension is built by a developer end users can easily add these from the palette of available objects.

QlikView Extensions are designed to work both in the QlikView Ajax Client and QlikView Desktop (if you turn WebView on).

Business Cases

The use of Extensions is extremely broad and can be used as solutions to a number of different scenarios.
Add to documents where the following are considerations

  1. A specialized or bespoke data visualization is required
  2. A unique look and feel is desired
  3. A visualization or user interface element is required that is not part of standard QlikView.
  4. A communication from within the client with external processes or web services is desired
  5. An integration of external web content / web services should be implemented

Object and Document Extensions

There are two different types of QlikView Extensions, Object Extensions and Document Extensions.

QlikView Object Extensions represent as single visualization object within a QlikView document, very similar to the standard objects (like a straight-table, a chart, a text object, etc.) QlikView provides. In comparison to a standard object an extension developer has the freedom to develop how the entire object should look like.

QlikView Document Extensions allow you to customize an entire QlikView Document, for example by using a Document Extension you could achieve that the entire document is not aligned to the left side of your browser but centered instead (see “Center Align Document Extension” by Brian Munz).

Extensions are developed by using standard web-technologies like JavaScript, Html and CSS but you could also use Java, Flash or Silverlight (even if these technologies become less and less important nowadays).

Limitations of QlikView Extensions

There are some limitations which cannot be achieved using QlikView Extensions:

  • You are not able/allowed to modify neither the data model nor the data of a QlikView Application
  • QlikView Extensions cannot be used in reports

Using Existing Extensions – How to Install

Before we start to develop our own QlikView Extensions let’s have a look into how existing extensions will be “installed” and used.
If you open QlikView Desktop having a fresh install you’ll see that there are no QlikView Extensions installed by default:

  1. Open QlikView Desktop
  2. Create a new blank QlikView document
  3. Switch to WebView (View > Turn on/off WebView or click the WebView in the Design toolbar)
  4. Right click anywhere in the sheet and select “New Sheet Object”

You’ll see a list of standard QlikView objects, but if you select the “Extension Objects” pane in the accordion you’ll notice that the list is empty:

So let’s “install” some existing extensions:

  1. If you switch to the folder C:\%ProgramFilesFolder\QlikView\Examples\Extensions\ in Windows Explorer you’ll find a file called “Extension Examples.qar”
  2. Double-click the file
  3. QlikView will open and you will see the following dialog, which confirms that 5 extensions have been installed successfully

Going back to the QlikView document you’ll notice that there are now 5 extensions available (if not, press the key F5 to refresh).

Now drag and drop the “Web Page Viewer” extension onto your sheet. This is a very simple extension which displays a web page within the current sheet of your QlikView document.

By default you’ll see a detail of http://www.qlikview.com because this is the default URL set for this extension. Now right-click again somewhere on the extension object’s area and you’ll see the extension’s property dialog:

Beside the default properties (which can be found in the panes “Presentation”, “Caption” and “Option”) you can now set the URL of the web page. Note that the value can be defined by either just entering a text or by using an expression, which is the case in the above shown screenshot.
As soon as you have changed the URL and closed the property dialog you’ll notice that the content of the “Web Page Viewer” extension object will change immediately.

Looking Under the Hood

You are maybe asking yourself what exactly happened when you clicked on the .qar file and what type of file this is.

A .qar file (stands for QlikView Archive File) is just a .zip file with the extension .qar. If you rename a .qar file’s extension to .zip and unzip it you’ll find files (and maybe folders) in the extraction result. Here’s the entire content of the WebPageViewer.qar extension:

In the next chapter I’ll explain in detail the anatomy of a .qar file.

QlikView is exactly doing the same as described above, unzipping the file and copying the content to a folder where QlikView is expecting all extensions to be. The previously “installed” extensions can be found under

C:\Users\%USER%\AppData\Local\QlikTech\QlikView\Extensions\

For further information about how to install and deploy QlikView extension both for QlikView Desktop and QlikView server please have a look at the article I have written some time ago.

In the next chapter we will finally start coding and creating our first “Hello World” extension.

Bookmark and Share
Published: November 28, 2013
Tags: ,

Starting to Publish my QlikView Extension Tutorial: Motivation

By Stefan Walther 1 Comment
Posted in Extensions
This article is part of a series of articles, see also the table of contents.

"D3 Sequences Sunbirst" Extension

Beginning with QlikView 10 I have started to develop QlikView Extensions. To be honest, starting to work with this concept of creating plugins for QlikView was really hard. At this time only little documentation and only a few examples were available.

But fortunately time has changed. Many QlikView customers and partners have started to create astonishing QlikView Extensions and the secrets behind Extensions have been discovered, bit by bit …

Especially in the last year I have created several dozens of QlikView Extensions and so I have been asked nearly every week if I could provide a step by step tutorial for creating extensions.
So here is it, my tutorial for all QlikView enthusiasts and hopefully the starting point for some great QlikView Extensions in the future.

About the Tutorial

Working through the tutorial you will

  • Understand the concept behind QlikView Extensions.
  • Be able to use existing QlikView Extensions.
  • Learn to develop QlikView Extensions from scratch.
  • Learn how you can use external libraries (e.g. charting libraries) within QlikView Extensions.
  • Learn how you can communicate with external web services.

Required Know How

For being able to follow the chapters of this tutorial some basic knowledge of the following technologies is required:

  • You should know how to create and configure QlikView objects using the “Web View” (simulates QlikView Ajax client in QlikView Desktop)
  • A basic understanding of basic web technologies like Html and CSS
  • A robust understanding of JavaScript (see here for some hints where to start)
  • Some basic knowledge of the famous jQuery framework for JavaScript

Prerequisites

For developing QlikView Extensions you’ll need the following software components:

That’s it for the beginning, in the more advanced chapters I’ll mention if I rely on additional complementary software tools.

Code Examples

For every chapter I have created code samples, so you’ll be able to start with each chapter with the same code basis as I did when writing this tutorial.

You’ll find the code samples in a GitHub project dedicated to only this tutorial. If you know how to use GitHub, just check out the repository, otherwise you can still just download a zip-file containing all chapters.

Note: As I am planning to publish not all chapters at once but a new chapter every few days, also the new code samples for each chapter will not be available on GitHub until the corresponding chapter is online.

Table of Contents

You’ll find an extra page here at qlikblog.at dedicated to this tutorial where I’ll update the table of contents and also publish additional links.

Bookmark and Share
Published: November 26, 2013
Tags: , ,