Blog
Creating your own Qlik Sense custom chart extension

Extensions are Qlik Sense components made with HTML, CSS and JavaScript, which are meant to be used inside QVFs or Mashups.

They serve a multitude of purposes, such as creating custom charts, buttons, tables, comments, and so on.

This short post will show you how to create an extension from scratch. It will be a custom line chart using the ECharts library.

The result will be the image below, and you can use it in your applications and create new features as you wish!

Needed tools:

– Qlik Sense Desktop
– A Text Editor (I use Visual Studio Code)
– ECharts Library (https://echarts.apache.org/)
– Basic HTML and JS knowledge
– Browser (we will access Qlik Sense via this address: http://localhost:4848/hub)

Building the basic file structure:

Once you’ve got your Qlik Sense Desktop up and running, we’ll create a file called ClusterLineChart inside the /Extensions/ folder. This is usually located under Documents/Qlik/Sense/Extensions/.

– ClusterLinechart.qext
– ClusterLinechart.js

The QEXT file is responsible for telling Qlik Sense what the above set of files represents. In this case, type will be “visualization”.

ClusterLinechart.qext File contents

{
 "name" : "Cluster Line Chart",
 "description" : "Minha primeira extensão!",
 "icon" : "extension",
 "type" : "visualization",
 "version": "0.1",
 "author": "Thomas Pessato"
}

And the basic Javascript file structure:

ClusterLinechart.js File contents

define( [
     'jquery'
 ],
 function ( $ , echarts) {
     'use strict';
     return {
         paint: function ( $element, layout ) {
             $element.append("teste");
             //deverá aparecer escrito ‘teste’ ao inserir a extensão
         }
     };
 } ); 

With this done, we can now access our extension via the “custom objects” tab inside a QVF.

Note 1: The $ element variable is the containing box in our extension. That is, anything we put inside this element will appear on the screen. This includes text or any html element.

Note 2: The paint method is executed every time an action occurs on the screen, be it a window resize, sheet object resize, an applied filter, etc. This method is responsible for ‘painting’ the object on the screen.

For testing purposes, we will include the text “teste” inside our extension. As we insert the extension into a sheet, the text “teste” should be visible:

Great! We now have an extension that we can include inside a QVF, and it already brings up information!

Now we must make sure all our dependencies are included in our extension. In this case, it means including the ECharts library.

 define( [
     'jquery',
     'https://cdnjs.cloudflare.com/ajax/libs/echarts/4.2.1/echarts.min.js'
 ],
 function ( $ , echarts) {
    //repare na variável echarts, logo depois de $.
    …
 } ); 

At this point we should be able to “print” the “echarts” variable within our extension and check it exists in the console (hit F12 in the browser). Note: For this to work, we must insert the extension inside a sheet.

In other words, we are now able to use the ECharts library and start building our visualizations!

We now need to define which properties / data we want the Sense Engine to return. This means the data, the title, subtitle and footnote options of the object, and so on. For this to work, we must declare a few properties within our JavaScript code, which we will account for within our “return” in the code snippet below.

define( [
     'jquery',
     'https://cdnjs.cloudflare.com/ajax/libs/echarts/4.2.1/echarts.min.js'
 ],
 function ( $, echarts ) {
     'use strict';
     return {
         initialProperties: {
             qHyperCubeDef : {
                 qDimensions : [],
                 qMeasures : [],
                 qInitialDataFetch : [{
                     qWidth : 2,
                     qHeight : 50
                 }]
             }
         },
         definition: {
             type: "items",
             component: "accordion",
             items: {
                 data: {
                     uses: "data",
                     dimensions: {
                         uses: "dimensions"
                     },
                     measures: {
                         uses: "measures"
                     }
                 },
                 sorting: {
                     uses: "sorting"
                 },
                 appearance: {
                     uses: "settings",
                 }
             }
         },
         paint: function ( $element, layout ) {
              …
         };
 } );

For more information on what each of the properties means: Building a property panel for your extension

Anyway, now we can get to the real work. With these properties, when we insert the extension into a sheet, the option to “Add dimension” and “Add measure” will appear, as it usually appears in Qlik’s native extensions.

When choosing the data that we want to include (a measure and a dimension), the Qlik engine will return the data and metadata within the variable called “layout”, which is within the “paint” function. Namely: function ($ element, layout) {…}.

paint: function ( $element, layout ) {
             var data = layout.qHyperCube.qDataPages[0].qMatrix;
             console.log(data);
         }

Adding this code snippet, then going through the JavaScript layout object, we will find the qMatrix property, which has all the data. We can check through the browser’s console what data is being returned. Note: In order to view the data as shown below, you must select a dimension and a measure for the extension.

What we need to do now is convert this console data into a friendlier view on the main browser.

In order to structure the data we got from the Qlik Engine, we know that position 0 of the array corresponds to the dimension, and position 1 to the measure. We will now separate this data into different strings.

var dimensions = layout.qHyperCube.qDataPages[0].qMatrix.map((item) => {       return item[0].qText;
 });
 var measures = layout.qHyperCube.qDataPages[0].qMatrix.map((item) => {
     return {
          value: item[1].qNum,
          itemStyle: {
              color: "red"
          }
     } 
 });

I used the map method to optimize the code. This code will come out as two arrays, one containing the dimension text (qText), and the second will contain 2 variables: value (qNum) and itemStyle. The value array will match the measurement value, and the itemStyle array will match pertinent row customizations. In this case, I just decided to put a “color” variable with the value “red”, which will be used to render the ECharts chart. We could input styles for the line, such as thickness, types of line, and so on.

Last but not least, we will now pass the data on to the graphic library and return the element to be displayed in our extension.

paint: function ( $element, layout ) {
       var dimensions = layout.qHyperCube.qDataPages[0].qMatrix.map((item) => {
       return item[0].qText;
       });
       var measures = layout.qHyperCube.qDataPages[0].qMatrix.map((item) => {
           return {
                value: item[1].qNum,
                itemStyle: {
                    color: "red"
                 }
          } 
       });
       var myChart = echarts.init($element[0]);
       //initializing the graph in the extension's box. Since $element is a jQuery element, we access via index 0.
       // Here we pass all the variables to the graph configuration object, according to the Echarts documentation. xAxis for dimensions, and then passing measurements on the so-called data "series"
       var option = {
                  legend: {
                      data:[layout.qHyperCube.qMeasureInfo[0].qFallbackTitle]
                  },
                  xAxis: {
                      data: dimensions // variable 'dimensions', declared at the beggining
                  }, 
                  yAxis: {},
                  series: [{
                      lineStyle: {
                          normal: {
                              color: "red",
                              width: 3,
                              type: "solid"
                          }
                      },
                      name: 'Sales',
                      type: 'line',
                      data: measures // variable'measure', declared at the beggining
                      }]
         }; // what defines this being a line chart is the prop called “type”
         myChart.setOption(option);
         myChart.resize(); //whenever an action is taken, the chart must be resized via resize(). This is an eCharts method.
}

For more customizations (there are MANY), you can check out the ECharts documentation and test your countless options (https://echarts.apache.org/en/option.html).

The end result, using Qlik’s own Consumer Sales.qvf and using the City dimension along with “Avg Sales”:

Notice that at this time the customization panel works, with its basic settings:

There are several additional customizations and implementations to be had, such as:

  • chart filters;
  • zoom options;
  • data export options;
  • color customizations;
  • adding reference lines;
  • entry point customizations;
  • tooltip with values;
  • and more.

Nevertheless these will be covered in subsequent posts. We hope this post was useful! For more details on custom extensions and graphics, contact us!

4 Tips for Creating Accessible Qlik Sense Mashups

Qlik has made every effort to keep Qlik Sense in line with the latest trends and most advanced technologies, and the same goes for making the analytics tool accessible to people with disabilities.

Native Qlik Sense apps currently support the JAWS screen reader, as well as compatibility with Internet Explorer 11. However, the best way to engage and combine the power of Qlik Sense with accessible web application development standards is via mashup implementations that render the web experience more enjoyable and truly ready to use for people with disabilities, especially people who need screen readers or who can’t use a mouse or keyboard to navigate.

When we engage web languages and embed graphics or even customize them we gain the ability to design user interfaces that are compatible with free desktop screen readers such as NVDA, or ready to use in the palm of your hand through native Android and iOS screen readers.

Customized experience when using Mashups

A mashup provides much more freedom and flexibility to create an application that fits the specific needs of each user group. Whether creating a custom filter menu or adding dynamically accessible properties and attributes, the focus of an accessible mashup is to create an intuitive layout with smooth mouse and keyboard navigation.

Native Qlik Sense QVF limitations and how mashup engagement overcomes such limitations

When developing a web application with screen readers in mind, one important thing to keep in mind is make sure the user remains always aware of what is happening and where the focus is on the screen.

In the native application, the navigation works apparently well. But when using the NVDA reader, focusing on a table-like object, for example, the user receives no feedback with regards to what object is being focused on, since the table’s title is not read. This is something that can be solved in a mashup using the aria-label HTML attribute.

Engaging mashups we can, for example, help the user navigate information, control focus on screen elements, change text and element captions based on user actions, and create predictable QVF functionality components that have a simple and natural use.

4 quick tips for making an accessible mashups

1 – Help the user navigate

A good example is to create a “skip to main content” button at the top of the page that is hidden by default, but that becomes visible when it gets a keyboard focus.

2 – Make the user aware of what is happening on the screen

If you have a loading screen or an error screen, be sure to add focus to some text that tells the user that the application is loading or that an error has occurred. Example:

3 – Always remember to test your mashup in other platforms

Sometimes some solutions that make the application more accessible work slightly differently on different platforms. It is therefore important to always make sure that we are achieving the expected behaviour on all platforms. Otherwise you will need to find another way to reach the expected goal.

4- Less is more

Get rid of absolutely everything your user won’t use in the interface. For example, the native app’s edit bar, where users can edit and create their graphics and sheets, and so many other elements that we’ve just added to the interface that will eventually make the experience exhausting in areas of little or no importance.

Webinar: Configuring NewHub inside the Qlik Sense Enterprise environment

In this 45 minute webinar, explore how to install NewHub on your Qlik Sense environment: https://zoom.us/recording/share/sG7o-z96lqUtz-TZ8vDXVj3cZooufaaQB4d3xDQHjyawIumekTziMw

What will we cover?
– Installing a fresh version of NewHub via the QMC panel
– Linking your apps and mashups to NewHub through QMC custom properties
– Linking specific KPI’s to your NewHub installation by creating Master Items and Tags directly in the QVF file
– Customizing colors and logos to fit specific branding and data organization purposes

Transform the whole experience of using your Qlik Sense panels and mashups with NewHub.
FREE Download and Live Preview https://clusterdesign.com.br/en/en-newhub/

How to render a Qlik Sense object within a React mashup
By Pedro Ugioni and Andrés Ruiz Droege

This post aims to clarify the following points regarding the use of React in rendering Qlik Sense Mashups:

  1. After reading this, you will have learned how to implement a basic component using React in order to link to your Qlik Sense data and visually render it inside your React App.
  2. Understand the benefits a React deployment brings with regards to data management when working with the Qlik Sense platform for your data analysis.

Contextualizing React

React is a library developed and maintained by Facebook that is intended to build large application interfaces. One of the main objectives that React tries to solve is allowing for data updates every second. In other words, a tool to update data on the screen in real time.

Read More
Cluster partners with Looker

Building upon our existing design services and customization services with advanced BI panels and dashboards, Cluster proudly announces it’s newly minted partnership with North American business intelligence platform Looker.

With this new addition, Cluster reassures its positioning as a multi-platform consulting firm, and now paves the way for Looker’s global clients to fully customize their Looker-powered BI mashups.

Read More
Download NewHub for Qlik Sense. For Free

Warning: count(): Parameter must be an array or an object that implements Countable in /home/customer/www/clusterdesign.com.br/public_html/wp-content/plugins/email-before-download/includes/class-email-before-download-db.php on line 56

The full-featured version of NewHub is available for download. The mashup was released in late 2018 and runs within Qlik Sense Server. This means it does not require any additional structure beyond the Enterprise license.

Just fill out this form and you’ll receive a zip file for installation, along with configuration instructions and a commercial presentation. This version remains free up to 5 (five) users/tokens and allows color and logo customizations.

Click here to learn more about NewHub

DOWNLOAD DA VERSÃO COMPLETA PARA 5 USUÁRIOS




Você está baixando o NewHub gratuito para 5 (cinco) usuários.
Para podermos liberar este acesso, na primeira vez que você acessar o NewHub no seu servidor Qlik, pegaremos automaticamente as seguintes informações: Nome do Host, Nome do Usuário e o ID da instalação do Qlik. Estes dados estão protegidos e são armazenados apenas para fins de controle e liberação dos seus usuários ao NewHub.
Se, a qualquer momento, você desejar parar de utilizar o NewHub e quiser remover seus dados, basta enviar um email para info@clusterdesign.com.br com esta solicitação informando o nome do seu usuário Qlik.