2018

Hi guys, in this video edition of the Qlik Design Blog, I cover a well known but often misunderstood chart function known as Aggr(). Aggr() is used in advanced calculations when you need to make a second aggregation based on the result of the first. Such as which customer in which country had the most orders. Note that in combination with AGGR you can also use the FirstSortedValue() function with your aggregated measure as an argument, in order to display the dimension along with the aggregated measure. I provided examples below. Enjoy!

 

 

 

Let's Break It Down

 

Spotting the difference and piecing it all together so you can see how it works is a great way to internalize the function. This can be done with either Qlik Sense or QlikView. I put this together in a manner that allows you to see the breakdown of how aggr() works in conjunction with the video.

 

Which customers had the most orders?

  • Use a table object
  • Add Customer as dimension
  • Add Count(OrderID) as measure
  • In the table click the header column to sort - Descending - Customer on top had the most orders

 

Which countries had the most orders?

  • Use a table object
  • Add Country as dimension
  • Add Count(OrderID) as measure
  • In the table click the header column to sort - Descending - Country on top had the most orders

Which customers, in what countries has the most orders?

  • Create a table object
  • Add Country as dimension
  • Add Customer as dimension
  • Add Count(OrderID) as measure
  • Hmmmm.... that's not right - it shows me the number of orders within each customer for each country, not the most.
  • Ah - if I use Aggr() with my expression - I can use the Max() aggregation to get the most of the order count for each customer as in:
    • max(aggr(Count(OrderID),Country,CustomerName)


BONUS Feature: FirstSortedValue()


  • But how do I display the corresponding customer value in that country?
    If I just use Country in the table, the results are similar to my previous example and are not correct.
    • Ah - if I create a measure using the FirstSortedValue() function along with my aggr() expression I can display the Max customer in that country in my table.

      • FirstSortedValue(CustomerName,-Aggr(Count(DISTINCT OrderID),Country, CustomerName))

 

FirstSortedValue( value, sort_weight, rank ):


FirstSortedValue() returns the value from the expression specified in value that corresponds to the result of sorting the sort_weight argument. So CustomerName is the value I want to display or return in the table and -aggr(Count(Distinct OrderID),Country,CustomerName) is the sort_weight argument...where " - " is used to denote the highest (or most) - the number of orders. This returns the value of the customer corresponding to the most orders for that customer.

 

The result - a single consolidated table showing you the customers with the most orders in their corresponding countries.

2-26-2018 5-38-23 PM.png

Which Customer in what Country had the most orders


Regards,

Michael Tarallo (@mtarallo) | Twitter

Qlik

 

Resources:

 

Custom Themes is one of the new features shipped with February release so make sure you are updated before trying to come up with your own.

 

To create a new theme, first we need to understand what exactly is a theme and what it can do for us. A custom theme is a collection of files stored in a folder, it must contain a definition (QEXT) file, a main JSON file, and optionally any other assets you might need to support the custom theme such as CSS files, custom font files, images, etc.

 

Custom themes let users to quickly apply different levels of customization to their apps, some of you might be interested in having your custom color palletes, while someone else might just need bigger font size, both can be achieved with Custom Themes. Theme authors can target individual visualization objects via JSON and/or use a custom CSS to modify the sheet styles.

 

From Qlik Help

 

The custom styles can be defined in two ways:

  • In the JSON file you define the style for the individual visualization types, for example bar charts and line charts.
  • CSS styling is more general and flexible. You can, for example, style sheets, visualizations and extensions.

 

Creating a simple custom theme

 

I'll be using Qlik Sense Desktop for this example, please check the help page for instructions on how to install a Custom Theme in Qlik Sense Server.

 

  • Go to your extensions folder: C:\Users\[username]\Documents\Qlik\Sense\Extensions
  • Create a new folder, I'll call mine theme-helloworld
  • Create a new file and rename it to theme-helloworld.qext. The QEXT file is a definition file that contains a few lines, where only name and type are the only mandatory lines.

 

{
  "name": "Hello World theme",
  "description": "My first custom theme",
  "type": "theme",
  "version": "1.0.0",
  "author": "Arturo Muñoz"
}




 

  • Now, it's time for the JSON file. Create a new file, name it theme.json
  • Edit the theme.json file with your favorite text/code editor
  • My advice is to start your theme with the sample code you can find in Qlik Help so you can familiarize with JSON and it's properties:

 

{
  "_inherit": true,
  "_variables" : {
    "@greenColor" : "#61a729",
    "@text": "#4c4c4c"
  },
  "color": "@text",
  "fontSize": "12px",
  "object" : {
    "title": {
      "main": {
      "fontSize" : "16px"
      }
    }
  },
  "dataColors": {
    "primaryColor": "@greenColor"
  }
}




 

  • The JSON file will change the primary color of your charts from Qlik dark blue to the custom green as defined in the variable at line 4 and will also modify the charts title to a font size of 16 pixels.

    This is a simple example but there are much more you can do with the JSON file, you could for example, define new color schemes for measures, change the axis', labels, legends font size and color and much more.

    Actually you could even load your custom CSS through the JSON file so you can target and hack any predefined style within your app, so you could modify object paddings, change font family, and so forth.

 

If you've followed the steps above you should have something like:

Custom-Themes.png

How to activate a Custom Theme?

 

Check how to apply a Custom Theme to your app in the animation below

 

CT.gif

 

 

 

Tips from the expert... and theme sharing!

 

I've asked my colleague Nabeel Asif for some tips since he created the Custom Theme based on Color Brewer that we are sharing  today (check the attachements). This is what he said:

 

All of our standard themes just give one sequential and one diverging gradient for measures, and two color schemes for dimensions. But you can actually define as many options as you like through the “scale” and “palettes” properties in the theme’s JSON.

 

For sequential and diverging gradients, Qlik uses seven colors to define a scheme. But you don’t actually need to specify all seven colors. Just define the two colors at the extremes, and Qlik does a nice job of calculating the rest. Of course, if you want very specific colors you can define them yourself.

 

Often apps will be designed with red representing something bad or dark colors representing higher values. To maintain this look as the user switches themes, you should follow these conventions in the JSON:

  • Diverging scales should be ordered from reddish hues to bluish hues.
  • Sequential scales should be ordered from dark to light. 

 

Please don't forget to always check Qlik Help for the most recent specifications.

 

Enjoy

steve.pngToday's Guest Blogger is, Qlik's Steven Pressland. Steven joined Qlik in 2016 as a Solution Architect. Prior to Qlik he was responsible for BI transformation and delivery across a number of Financial Services organizations. This experience and extensive product knowledge enables some of our largest enterprise customers to succeed at unlocking business insight through Qlik. Steven leads the global Advanced Analytics team within Pre-Sales and through this role brings us this update.  In this blog, Steve recaps the last 8 months of Qlik's latest enhancement to Qlik Sense and QlikView: Advanced Analytics Integration (AAI). He also shares the details on what's new with AAI in the February 2018 release including a sample on how it works.


Take it away Steve!


 

8 Months of Advanced Analytics Integration


Last June when Qlik Sense was released, it contained one of the biggest changes to the engine since the second generation data indexing engine engine was released with the launch of Qlik Sense in 2015. The server-side extensions API, more commonly referred to as Advanced Analytics Integration (AAI) was made generally available, providing a way for calculations to be externalized from the engine on demand as part of the user’s session.

 

Advanced Analytics Integration - Qlik Sense in 60

 

The capability and flexibility enabled developers to explore new use cases for their Qlik applications, and most importantly business users have more access to insights than ever before.

 

When we launched AAI, two open source connector projects were created. One for python and one for R. Supporting these two popular languages first, provided a way for users to connect to two of the most popular advanced analytics tools of choice. Since then, the R&D team has broadened Qlik's AAI projects by adding examples for C#, C++, GO and JAVA.

 

Over the last 8 months we have seen customers and partners deliver solutions using the out of the box sample R connector as well as create custom calculation engines to solve other calculation problems such as decryption and live data augmentation.

 

UK Reported Crime Demo App.jpg

UK Reported Crime Demo App

(LIVE DEMO LINK)

 

The next big milestone for AAI was the November 2017 release of QlikView, which brought the same AAI capabilities launched with Qlik Sense to QlikView. This gave QlikView customers a whole new set of opportunities for both old and new applications. The underlying technology for QlikView is the same as Qlik Sense, meaning you can share all the services already built with only a simple configuration step on your desktop or server. If you have not yet looked at how you can bring new a new perspective to your QlikView applications with Advanced Analytics Integration I will be presenting a session dedicated to AAI for QlikView at Qonnections 2018 (<- Customers and Partners sign up here), I hope to see some of you there.

 

The Qlik Community


As with many aspects of the Qlik product line, AAI’s success is made possible by the strong community who collaborate and share. The Qlik community space for advanced analytics integration is widely used and moving forward. This year we are planning to give it a facelift to make it easier to navigate and find information so more customers can make use of the technology in their businesses. If you have not yet got started with AAI or are experienced in the technology, do drop by and explore the resources available.

 

What’s new


This blog was written to coincide with the Qlik Sense February 2018 release, which is now generally available and includes the latest feature release for AAI which now supports whole table processing in the load script. A commonly requested feature is to be able to batch process algorithms for tasks such as model training and scoring. This was possible in a limited row by row capacity at launch, however with the new version we now support sending whole tables to and from the external calculation engine as a standard part of the application load script - made possible through a simple extension to the LOAD syntax.

 

So, how does this work?


When writing your application script there is now an extended syntax to the load statement, like the FROM or RESIDENT statements that have their specific uses. Qlik can now use the reserved statement, EXTENSION, to specify that the source of the loaded data table will be the result of an AAI function.

 

The following example calls an R script to score some input data using a table already loaded into the Qlik data model and returns a result:

 

Load 
 RowID, 
 num(p,'##0.##') AS Predict_Score 
 Extension 
 R.ScriptEval(' … R Script Here … ',
 Rentals{RowID,Year,Month,Day,RentalCount,WeekDay,Holiday,Snow });





As you can see, the returned results are accessible to be processed using all the standard Qlik script functions providing a useful addition to the script syntax.

 

AAI Script Process.jpg

 

Where to Next?


There are lots of resources available to help you succeed with Advanced Analytics Integration, here are a few of the key links to explore:

 

 

  • This repository provides a server-side extension (SSE) protocol based on gRPC that allows you to extend the Qlik built-in expression library with functionality from external calculation engines. You can use external calculation engines in both load scripts and charts. In Qlik Sense and QlikView, you connect to these server-side extensions (SSEs) by defining analytic connections.
    https://github.com/qlik-oss/server-side-extension
  • This repository provides a server-side extension (SSE) that allows you to extend the Qlik built-in expression library with functionality from R. You can use this in both load scripts and charts. In Qlik Sense and QlikView, you connect to this SSE R-plugin by defining an analytic connection.
    https://github.com/qlik-oss/sse-r-plugin
  • The AAI Advanced Analytics Expression Builder is a Qlik Sense extension used to create advanced analytics expressions as master items and wrap these in to a pre-built visualization. These visualizations use native chart types and can be edited either as a master item or un-linked and customized.
    http://branch.qlik.com/#!/project/596f87f186a5cf7ec72e90e9


  • Qlik Sense extension which allows you to create charts to perform advanced analytics by simple drag and drop without complex scripting. This extension works on the top of the Advanced Analytics Integration (AAI) functionality with R.
    http://branch.qlik.com/#!/project/5979da222ef8975d99132f88


Hope you find this information useful.


Regards,

Steven Pressland
Senior Solution Architect

banner_react.jpg

On the demo team we end up working with both the Viz API to create and embed native Qlik Sense charts in apps, as well as creating custom components powered by the Qlik Engine using enigma.js, and we do this in Angular, React, and plain html, as we try to demo all of the ways that Qlik can be used. So after my last blog post (Starter project for developing QAP-powered apps with React and enigma.js) we had an idea on the demo team: let's try to unify all of our different custom components and templates. So we've been hard at work accomplishing that.


You may have seen Yianni's last blog post, qdt-components - A Components Library that can be used in simple Html, Angular 5 and React, introducing this effort. The goal is to have the qdt-components library include custom components powered by Qlik Engine, as well as a way to create and embed native Qlik Sense charts. Right now, the qdt-components library contains a few components, but we're not totally ready to start talking about all of them yet, so we're just sticking to the component that allows you to create and embed native Qlik Sense charts by interfacing with the Viz API.


The big addition since Yianni's post is that we've added a React template, so now we have an Angular 5 template, a plain html template, and a React template, all which load the qdt-components, which is pretty cool. This means that the components only need to be built once, but can be used in a project with almost any frontend stack. I say "almost" because in order to use the component that interfaces with the Viz API there's no getting around loading Angular 1.5 and RequireJS into the global namespace, which means they still have the chance to create conflicts. But you can choose not to use the component that interfaces with the Viz API if you don't have a need for native Qlik charts, and it will avoid loading all of the Capability API stuff, but if you choose to use it, you don't have to worry about writing any of the boilerplate you usually do when connecting to the Capability API.


Documentation, examples, and custom components are coming (and oh yea, we plan on using https://picassojs.com/), but that's the update for now. You can check out the qdt-components library and the templates here - Qlik Demo Team · GitHub. And demos of each of the 3 templates below

 

Angular 5 with qdt-components

React with qdt-components

Simple html with qdt-components


And-the-winner-is-002.pngHey guys - it has been a little over a month since I introduced you to our first Qlik Community Twitter Contest within my 2017 year in review blog. I want to thank you for your contributions and was very pleased to see the number of awesome examples demonstrating Qlik in action. That being said, all contest submissions come to end and well, it's time to announce the winner...watch this brief video to learn who it is and what the winner's 2017 Qlik Highlight was!

 

 

 

 

Can't see the video? Access to YouTube blocked by your organization or region? Download the attached .mp4 file to view on your computer or mobile device.

Do you ever use inline tables in your Qlik Sense app?  I do, especially when I need to add a small amount of data to an app that does not already exist in an Excel file or some other data source.  With the November 2017 release of Qlik Sense, manual entry was added in the Data manager.  With manual entry, users have the option to either manually enter their data into the table editor or paste their data into the table editor to add it to the Data manager.  I like this new small feature because it makes it very easy to copy Excel data or a table from a web page and add it as a table in the Data manager.  Let’s look at how it works.

 

From the Navigation menu, click on Data manager to open it.

menu.png

Once the Data manager is open, click on the plus sign to add data.  On the left, there is an option for Manual entry as seen below.  Select Manual entry to open the Manual entry editor window.  Once the Manual entry editor window is open, users can enter a name for the table they would like to add as well as the field names and table entries.  To enter data, double-click on the cell and start typing.  You will find that as you enter data into the cells, additional rows and columns are added automatically.  Once you are done entering the data for the table, click the Add data button at the bottom right to add the table to the Data manager.  Users can also paste in rows from an Excel table or a webpage which is how I like to use it.  Simply, copy the rows you would like to add, select the entire data entry table by clicking a column or row until they turn orange (as seen below) and then paste the table/rows (Ctrl-P).

manual entry paste.png

After the data is added to the Data manager, it can be loaded and added to the data model.  Refer to Qlik Sense Help for shortcuts that can be used when using the table editor.  Now, if you are accustomed to creating inline tables via the script editor, you can still do that in the script editor using the syntax below:

 

inline.png

 

 

 

This script will add a Products table with 2 fields, Product and Sales.  Five rows of data will be added to the Products table.

 

 

 

 

 

Manual entry allows users to manually enter data into the Data manager in a few easy steps.  Users do not need to remember the inline load script and they can load just the rows of data they need.  Manual entry is ideal when you have a small amount of data to add to an app.  When you have a lot of data, loading directly from the source or an Excel file may be easier.

 

Thanks,

Jennell

Hi guys - in this edition of the Qlik Design Blog, I have a short video that briefly introduces you to some of the new features available in Qlik Sense February 2018. Some of the related features are already available in Qlik Sense Cloud and can be used immediately. (note: themes is not available in Qlik Sense Cloud). The software download is currently available to customers and partners who have signed up for the Technical Preview and will be made available for download in our customer downloads area this month.


Qlik Sense February 2018


 

Available shortly on the Qlik Help Channel - see more of these new features in action with our how-to tutorials.

 

Please let us know what you think by posting comments below.

 

 

What's New - Qlik Sense February 2018

 

Enjoy!

 

Michael Tarallo (@mtarallo) | Twitter

Qlik

 

Can't see the video? YouTube blocked by your Region or Company? Download the .mp4 to watch on your computer or mobile device.

banner-4.jpg

qdt-components (Qlik Demo Team Components) is a library of components that we have developed in the demo team and that have been used in most of our mashups found in webapps.qlik.com and demos.qlik.com. It's a collection of filters, tables, barcharts, selection toolbars, or even simple getting/creating object methods from the Visualization Api. You do not have to worry about connection strings, loading Requirejs, jQuery etc. Everything is taken care for you! The library can be used in a simple html page by loading the qdt-components.js or in React and Angular2+ via npm.

 

Today, I will show you how to load a simple object and create a session barchart, in simple html and Angular 5

 

Simple Html

  • In your Html add
<head>
<script type="text/javascript" src="qdt-components.js"></script>
</head>
<body>
<div id="qdt1"></div>
</body>












  • In your Javascript code, add
var qConfig = {
   "config": {
      "host": "your-sense-server.com",
      "secure": true,
      "port": 443,
      "prefix": "/",
      "appId": "133dab5d-8f56-4d40-b3e0-a6b401391bde"
   },
   "connections": {
      "vizApi": true,
      "engineApi": false
   }
}
var QdtComponent = new window.qdtComponents.default(qConfig.config, qConfig.connections);
var element = document.getElementById('qdt1');
QdtComponent.render('QdtViz', {id: 'a5e0f12c-38f5-4da9-8f3f-0e4566b28398', height:'300px'}, element);












 

Simple html template: GitHub - qlik-demo-team/qdt-html-template: A simple html template that uses qdt-components

Live Demo: Simple html with qdt-components


Angular 5

 

  • Install the package
npm install --save qdt-components







 

  • Create new component by typing in the command line
ng generate component components/qdt-components --style=less







 

  • In your qdt-component.component.ts import the library and import or set the qConfig with the connection details
import { Component, OnInit, ElementRef, Input } from '@angular/core';
// import * as qConfig from '../../../qConfig.json';
import QdtComponents from 'qdt-components';
let qConfig = {
   "config": {
      "host": "sense-demo.qlik.com",
      "secure": true,
      "port": 443,
      "prefix": "/",
      "appId": "133dab5d-8f56-4d40-b3e0-a6b401391bde"
   },
   "connections": {
      "vizApi": true,
      "engineApi": false
   }
}








 

  • Replace the class with
export class QdtComponentComponent implements OnInit {


   @Input() Component: Function;
   @Input() props: object;

   static QdtComponent = new QdtComponents(qConfig.config, qConfig.connections);

   constructor(private elementRef: ElementRef) { }

   ngOnInit() {
      QdtComponentComponent.QdtComponent.render(this.Component, this.props, this.elementRef.nativeElement);
   }
}








 

  • After this, you can start using it in any other component. In the html add
<qdt-component [Component]="'QdtViz'" [props]="{id: 'a5e0f12c-38f5-4da9-8f3f-0e4566b28398', height:'300px'}"></qdt-component>







 

Template: GitHub - qlik-demo-team/qdt-angular-template: An Angular 5 template that is using qdt-components for connecting to Qlik …

Live Demo Angular 5: https://webapps.qlik.com/qdt-components/angular5/index.html

Live Demo Angular 6: https://webapps.qlik.com/qdt-components/angular/index.html


React 16.3

Live Demo: https://webapps.qlik.com/qdt-components/react/index.html

Git Repo: https://github.com/qlik-demo-team/qdt-react-template


Vue 2.5

Live Demo: https://webapps.qlik.com/qdt-components/vue/index.html

Git Repo: https://github.com/qlik-demo-team/qdt-vue-template


qdt-components

Branch: Qlik Branch

Github: GitHub - qlik-demo-team/qdt-components: React Components to be used with Angular2+ and React. Connects with the Capabili…

Npm: qdt-components

 

Yianni

Filter Blog

By date:
By tag: