A small quirk I have experienced while working with the Qlik Mashup API is that the selection toolbar “floats away” from its corresponding chart the further the page is scrolled down.This isn’t a problem if your page does not scroll, or if you position all of the charts with absolute positioning, the default positioning if you use the default mashup template, but if your page scrolls and you are not using absolute positioning on the charts, then you will likely run into this problem too when creating a mashup.An easy fix for this is to create a container div for all of the page content, set its height equal to the body height, and move the overflow property from the body tag to the container div tag. Let’s walk through this.First, let's wrap our content in a container div, remove any overflow styling that's on the body, and add overflow styling to the container div.
<body>
<div id="scroll-container" style="overflow:auto;">
<!-- YOUR CONTENT HERE -->
</div>
</body>
Then, we'll need to add some scripting so that the height of the container div is set correctly.
<body>
<div id="scroll-container" style="overflow:auto;">
<!-- YOUR CONTENT HERE -->
</div>
<script>
$(document).ready(function() {
// Sets the container div height correctly on page load
$("#scroll-container").height($("body").height());
// Will reset the container div height correctly if window size changes
$(window).resize(function() {
$("#scroll-container").height($("body").height());
});
});
</script>
</body>
And that should do it! Now when you scroll your page, if you click on a chart, the selection toolbar should be correctly positioned atop the chart.
...View More
When building business intelligence solutions one problem is that data usually contains errors, e.g. attributes are written in different ways so that data cannot be grouped correctly. The attribute could be written in upper case or not; it could be abbreviated or not; and sometimes several synonyms exist for the same thing.
For instance, ‘United Kingdom’ could be referred to as ‘UNITED KINGDOM’, ‘United Kingdom’, ‘Great Britain’, or just ‘UK’.
As a consequence, what the users really think of as the same instance will appear on several rows in a list box, or be displayed in several bars in a bar chart. This will cause problems in the data analysis, since selections and numbers displaying totals often will be incomplete.
But there are ways to solve this. The best way, is of course to correct it in the source data. But this is not always possible, so it may be that the correction must be made elsewhere.
In QlikView and Qlik Sense there are several ways to do this. The most obvious (but not the best), is to use a hard-coded, conditional expression in the script:
Similar constructions can be made using Replace() or Pick(). These all work and will do the job.
But they are not manageable.
Should you want to add more cases or change some previous ones, you will soon realize that this isn’t a good method. The expressions will become too long and they will be error-prone. So I strongly recommend not doing this.
There is however a solution which is both manageable and simple: Mapping Load. The first step is to create a mapping table with all changes you want to make:
Then you load this table using the Mapping prefix:
MapTable: Mapping Load ChangeFrom, ChangeTo From MapTable.xlsx (...) ;
Now you can use this table in the script to correct all field values. The simplest way to use the Map statement: Declare the mapping early in the script before any of the relevant fields are loaded, and the corrections will be made automatically:
Map Country, Department, Person Using MapTable ;
Alternatively, you can use either ApplyMap() or MapSubstring() when you load the field, which both will make a lookup in the mapping table and if necessary make the appropriate replacement, e.g.:
ApplyMap( 'MapTable', Country ) as Country ,
The mapping table will be discarded at the end of the script run and not use any memory in the final application.
Using a mapping table is by far the best way to manage this type of data cleansing in QlikView and Qlik Sense:
It is easy to add new corrections and to change the old ones
The mapping table can be stored separately from the script; in an Excel sheet or even in a database
Good Luck!
HIC
Further reading related to this topic:
Don't join - use Applymap instead
Mapping as an Alternative to Joining
...View More
One of my favorite features of Qlik Sense is the ability to create and reuse Master Items. Master Items (seen in the image on the left) are dimensions, measures and visualizations that have been saved in the Asset panel in a Qlik Sense app. During the development process, Master Items can be used to create visualizations and once the app is published, the Master Items are available in the Library panel (seen in the image on the right) for others to use. When creating apps, it is common to use the same dimensions and/or measure in more than one chart – that is why Master Items are so useful. I can create a Master Item measure such as Sales (Sum([Sales Amount])) and then use this measure in multiple charts. I do not need to copy and paste the measure every time I need to use it. All I need to do is drag it to my chart or select it from the list of measures. If I decide that I need to make a change to the measure, all I have to do is edit the measure in the Master Items and the change will be made anywhere the measure is used. This saves time and keeps the app/measures consistent. The same can be done with dimensions that are used often in an app. Create it once and use it wherever needed. The Asset panel also has an area for visualizations that can be created by the developer and saved giving users the ability to drag a pre-made visualization to their sheet. In this blog, I will focus on the dimensions and measures section of the Master Items.There are a few ways you can create a Master Item. Let’s first take a look at how you can create a dimension. There are three ways you can create a dimension.From the Fields section in the Asset panelFrom the Master Items section in the Asset panelFrom the Data Model ViewerFor a closer look at how to create dimension, check out this documentCreating Dimensions and Measures.Measure can be created in a similar way as the dimensions.From the Fields section in the Asset panelFrom the Master Items section in the Asset panelFrom the Data Model ViewerFor a closer look at how to create measures, check out this documentCreating Dimensions and Measures.Once the dimensions and measures are created, they can be used to create visualizations. When you are prompted to add a dimension or a measure to a chart, the dimensions and measures that were added to the Master Items will be listed first.Here is what you see when prompted to add a dimension:Here is what you see when prompted to add a measure:You can simply select the dimension/measure or you can drag the dimension/measure from the Master Items section to the chart.Dragging Customer dimension to a bar chart:Dragging Sales measure to a bar chart:If you find the need to edit or change a dimension and/or measure, you can make the change in the Edit window and save. This change will be applied to all charts using the dimension and/or measure. So no more copying and pasting a measure change to all charts using the measure. This also ensures that the dimension and/or measure is updated consistently throughout the app.Once the app is published, users can make use of the dimensions and measures in the Library to build their own visualizations or to edit existing visualizations. The user can drag and drop the dimensions and measures onto their charts and they do not need to worry about the expression or syntax because it is already done for them.As you can hopefully see, it is very easy to add dimensions and measures to the Master Items and by taking the time to do so before creating your charts will prove to be quite valuable. Not only will it save you time when developing because of the reuse capabilities, it will aid you in creating a clean app that is consistent and easy to maintain. Once the app is published, it provides users self-service capabilities to build their own visualizations. If you do not create Master Items, I recommend you start. It is a great feature that in the end makes your job as the developer easier.Thanks,Jennell
...View More
"Innovation - distinguishes between a leader and a follower." - Steve Jobs Steve Jobs said it best. Since April, #TeamQlik has been hard at work delivering innovative capabilities in our products and today we get to share it with the world. I am pleased to announce the general availability of Qlik Sense Enterprise 2.0, Qlik DataMarket and the Qlik Analytics Platform. (applause) By taking these solutions to market, we continue to meet our commitments to our customers and partners,and STILL challenge the norm by disrupting the business intelligence space. It should be no surprise that Qlik is in a unique position in this saturated BI pool. Between outdated BI stacks, and data visualization tools that don't tell the whole story, Qlik delivers a visual analytics platform that puts insight and data at the point where it adds most value, the point of decision. Our associative data indexing engine empowers users to see the whole story that lives in their data, unlike other, shall I say, tools. And it’s only Qlik that is proven in its ability to deliver true agility for the business user, along with governance, trust and scale for IT. Now enough tooting our horn, let me summarize what's new in Qlik Sense 2.0 by not just telling you but showing you with the power of video. (below videos requires YouTube access)To learn more about these great innovations and experience them for yourself, download Qlik Sense Desktop for free and visit our New to Qlik Sense Videos page on the Qlik Community forum, where you can learn how to use these new features, create apps, build visualizations and much more. Enjoy!Michael TaralloSenior Product Marketing ManagerQlik Follow me: @mtarallo-------------------------------------------------------------------------------------------------------------------------------------------------(NOTE: To increase resolution or size of the video, select the YouTube logo in the bottom right of the player. You will be brought directly to YouTube where you can increase the resolution and size of the player window. Look for the 'settings' gears icon in the lower right of the player once at YouTube.)Qlik Sense 2.0 - What's New in 90 seconds (Turn your speakers up and get pumped!)Qlik Sense 2.0 - What's New Presentation (3 min)Introduction to Qlik DataMarket (90 secs)Getting Started with Qlik Sense Webinar (50 mins)Additional How To Videos:Using Qlik DataMarketUsing Smart Data LoadUsing Smart Data Compression
...View More
From my previous blog Creating a webpage based on the Qlik Sense Desktop Mashup API, we've learned how to get the objects from our app and display them on our website with the Mashup API. These are individual objects though and most likely we would like to display them as we do in the app sheet.For this blog we will use the sheet from the "How European are you" app. So here is the sheet with objects.Make sure you add bootstrap css and js references in your html.
<!-- CSS -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://sense-demo.qlik.com/resources/autogenerated/qlikui.css">
<link rel="stylesheet" href="https://sense-demo.qlik.com/resources/assets/client/client.css" media="all">
<!-- Custom -->
<link rel="stylesheet" href="css/style.css">
<!-- JS -->
<!-- Latest compiled and minified JavaScript -->
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://sense-demo.qlik.com/resources/js/external/requirejs/require.js"></script>
<!-- Custom -->
<script src="js/index.js"></script>
In my previous blog in step 7, I used app.getObject(), to place the object into a specific div id. Now, we will go one step further and we will just use the object id from the app as our html data-qvid and we will let jquery handle the rest.So we start by laying out the grid for the above sheet. We need 3 columns and for the 3nd column we will need three rows.
<div class="container">
<div id="template">
<div class="row">
<!-- Left Column -->
<div class="col-md-2">
<article style="height: 600px" class="qvobject" data-qvid="ZZpXPE" id="filterCountry"></article>
</div>
<div class="col-md-2">
<article style="height: 600px" class="qvobject" data-qvid="TrjNJ" id="filterYear"></article>
</div>
<!-- Right Column -->
<div class="col-md-8">
<div class="row">
<article style="height: 300px" class="qvobject" data-qvid="KtCKy" id="lifeCostByCountry"></article>
</div>
<div class="row notification">
Select a category in the chart below to see individual product cost details
</div>
<div class="row">
<article style="height: 300px" class="qvobject" data-qvid="jsmEE" id="avgLifeCost"></article> </
</div>
</div>
</div>
We overwrite bootstrap's css for some elements that do not show up properly, like the icons below with:
.sel-toolbar-span-icon {
top: -10px;
}
and we make sure that all of the qlik sense objects are visible by setting their width to match bootstraps grid.
.qvobject {
width: 100%
}
Now we add in our js jquery's $.each method to display the objects in our grid.
$('#template').find('.qvobject').each(function() {
var qvid = $(this).data("qvid");
app.getObject(this, qvid);
})
Finally, we need to add a clear selection button to mimic the app. In our html we add the button.
<div class="row">
<div class="col-md-12">
<a id="clear" class="btn btn-default" href="#">Clear Selections</a>
</div>
</div>
and in our js catch the click event with jquery and use the app.clearAll() method.
$('#clear').on('click', function(event) {
event.preventDefault();
app.clearAll();
});
There are times that you will want to use many objects in your page and you just do not want to split them up in multiple pages. If you see that there is not scrolling on the page, you need to add the following in your css.
body {
overflow: auto !important;
}
Here is our final page that looks exactly like we have the objects in our Qlik Sense Desktop SheetThat's it! I Hope you have fun with your webpages!Project Files: yianni-ververis/how-european-are-you · GitHubWebsite: Qlik Demos: See Qlik Sense in Action | Sense-Demo.Qlik.Com
...View More
Patrik Lundblad wrote an interesting article in this blog called “Dissecting How to Choose the Right Chart”. It explains which chart best communicates what we want to convey with the data set we have. Taking this concept one step further, there are additional variables when considering what chart works best. What other variables? Things like screen size and type of interaction model are important factors that affect the suitability of a chart.Let’s pick a classic example: Sales by region by quarter. We should start by asking ourselves, “What would I like to show?” I want to compare between regions and dates. Secondly, ask “What data do I have?” I have one variable per item, Sales, and have a few categories. This will prompt me to choose a bar chart. A grouped bar chart will help me see exactly the information I need.Even if the grouped bar chart is a perfect legible data visualization in a desktop or laptop computer, would it be my first choice if the chart is going to be consumed on the screen of a 4” mobile device? The answer will probably be no. Instead, I might want to create a horizontal bar chart, or even perhaps change the chart type to a stacked bar chart in order to simplify the user experience.CPU, memory, and network connectivity responsive modelSince each device’s CPU and memory are two factors that may limit the amount of data a device can handle, it would be good to aggregate large data sets prior to sending it over to the device. This will minimize the in-device processing time but also generate a new dataset that might require a whole new visual representation. Ideally we should be able to display different levels of data aggregation and therefore different chart types based on the device’s processing power.The same rationale applies to mobile data connectivity. In order to optimize the user experience, we should be able to detect when a device is in a poor reception area or belongs to a slow network. This would allow us to dynamically choose the chart type that best fits the particular conditions.Responsive data visualization is still a challenge for developers and designers and in the years to come we need to develop new responsive data visualization principles similar to the “How to choose the right chart.” These principles would set guidelines on how to present data considering factors such as device screen dimensions, computational power, or wireless data connectivity. This new model will guide us through the decision making process on what chart type to choose but also on how the chart will morph and transform to effectively communicate data insights on different devices, from desktops and mobiles phones to tiny wearables screens.
...View More
Escape sequences are a general technique to represent characters that are not possible to represent directly. In QlikView the need is mainly for quotation marks, but in the general case it could also be strange characters, tabs, and newlines. How this is handled in QlikView is explained in this post.
Visualization extensions allow you to easily create charts in Qlik Sense other than those included out of the box. The Qlik developer community shares the visualization extensions they have created on Qlik Branch (along with some other really neat stuff!). Let’s step through installing and using the Qlik Sense visualization extension that allowed me to easily create the chart pictured here. Step 1 – Download Extension from Qlik BranchI will be installing the “deltaViz self service dashboard,” located at http://branch.qlik.com/projects/showthread.php?331-deltaViz-self-service-dashboard. There are two ways to download this extension. If you sign in to Qlik Branch, a download button will be visible on the extension’s Qlik Branch page. Simply click it to start the download. You can also visit the project website, which, in this case, is a Github repo, and click the “Download ZIP” button. Step 2a – Installing Extension into Qlik Sense ServerNow that the extension has been downloaded, it needs to be installed into Qlik Sense. Go to your QMC and, in the navigation menu on the left, under “Manage Resources,” click “Extensions.” Then, in the action bar at the bottom of the screen, click “Import.” Click “Choose File” in the popup and navigate to the folder that was downloaded in step 1, select it, then click “Import.” Step 2b – Installing Extension into Qlik Sense DesktopFind the .zip file that was downloaded, and unzip it. Open the unzipped folder to find another folder inside. Copy that folder and navigate to documents/qlik/sense/extensions and paste the folder there.Step 3 – Using the ExtensionOpen Qlik Sense Desktop, and open the “Executive Dashboard” demo app that comes preinstalled with all Qlik Sense Desktop installations. Create a new sheet, open it, and click edit. A new chart titled “deltaViz” should now be in the list of charts on the left. Drag the “deltaViz” chart onto the sheet. Add the dimension “Account”, add the measure “CY Sales” as the first measure, and add the measure “LY Sales” as the last measure. You should now see the extension visualization!If you’re seeing something similar to this, then it’s working! Check out Qlik Branch for more cool visualization extensions! To find the Qlik Sense visualization extensions available on Qlik Branch, navigate to http://branch.qlik.com/, click on “Browse Projects,” and then in the side navigation click “Visualization Extensions” under “Qlik Sense Projects,” or you can navigate directly to http://branch.qlik.com/projects/forumdisplay.php?22-Visualization-Extensions.
...View More
I was recently working on a project where I had several files that I needed to load in order to determine what data I needed and what data I did not need. I started by adding the files that I knew had data that I needed. Then I started to add the additional files to my data model one by one. Occasionally, I came across a file that had the same fields as a file I had already loaded. When I ran into this, I used the Qualify statement to load the new table so that I could compare the data to the data I already loaded. Using the Qualify statement adds the table name as a prefix to the field name. For me this was helpful because I did not want to create synthetic tables in my data model. I simply wanted to compare the data in the two tables to see if they were the same before I added it to my data model.I used Qualify * to turn on the qualification of the field names. I used the wildcard to qualify all fields loaded after the Qualify statement.I could have also listed the fields that I wanted to Qualify instead of using the wildcard by doing something like this:Whenever the qualify statement is used, it will qualify all of the fields loaded after the qualify statement until the end of the script is reached or until the script reaches an Unqualify statement. The Unqualify statement turns the field qualification off. The syntax is similar to the Qualify statement. I can use a wildcard or a list of field names.Once the fields are qualified, the field names will look like the image below and it will not be associated to the other tables in the data model since there are no matching field names.Notice that CustomerAddress which is the table name is the prefix for all the fields in that table. Now that I have this table loaded, I can take a look at the data in this table and the previously loaded customer table to determine if this is the same data set and if I need to load the CustomerAddress table at all. It is a quick way to spot check the data before connecting it to the data model.Now if I did not use the Qualify statement, my data model would have looked like the image below with a synthetic table because of the three field names that match (Address Number, Customer Address 1 and Zip Code) in the CustomerAddressMaster and CustomerAddress tables. Using Qualify prevented the synthetic table from being created.The Qualify and Unqualify statements can be used when building your data model and exploring your data sources. The qualification of the field names eliminates matching field names therefore loading each table as an island unassociated to the other tables in the data model. This provides an easy way to view the data sources before actually building the data model – utilizing Qlik Sense or QlikView to explore the data first. Hopefully, you will find these statements useful.Thanks,Jennell
...View More
Required: Qlik Sense Desktop, Helpdesk Management.qvfFiles Created: Index.html, index.jsOk, we created a beautiful visualization that everyone in the company is excited about. One day we are asked to publish this onto our website and we are thinking… is this possible? Yes it is! Qlik Sense comes with a built in API that we can get any object that we have created in our app and put it on our website. In this article I will give you step by step directions on how to do that.Make sure that you have your Qlik Sense Desktop open. This will start a local server on port 4848 that you will be able to access your apps from. Name your App "Helpdesk" and from the template drop down select "Basic Mashup ..." and hit "Create"Now we need to enter into the app, so click on "Helpdesk" that was just created and from the popup window click on "Edit".There are 4 panels. The far left is where we choose our app and the objects that we will use in our webpage. On the right you will see the "Layout" tab. This is the place the we will drag our objects to and the 2 pages that automatically are created for us, "Helpdesk.html" and "Helpdesk.js". The workbench will create the basic code for us to get the objects from the Qlik Sense Desktop and html that will display these objects.Now, lets select our app from the left. Click on "Please choose an app" and select the "Helpdesk Management.qvf". All of the objects will be displayed for us to use. Lets select one bar graph to use in our webpage. Click on "Avg Case Resolution Time (Days)" and drag it to the "Layout" panel, onto the first grayed rectangle.If you click on the "Helpdesk.html", you will see the included libraries. The css is needed for proper visualization and require.js to connect to the Qlik Sense Desktop and get the app.
<link rel="stylesheet" href="https://community.qlik.com/resources/autogenerated/qlikui.css">
<link rel="stylesheet" href="https://community.qlik.com/resources/assets/client/client.css" media="all"><script src="/resources/assets/external/requirejs/require.js"></script> our js file<script src="Helpdesk.js"></script>and our placeholder for our objects<div id="QV01" style="position: absolute; top: 50px; left: 20px; width: 200px; height: 200px;" class="qvobject"></div>Now, moving on to the JavaScript file generated. This is composed of two parts. The fist, is the configuration.var config = { host: window.location.hostname, prefix: "/", port: window.location.port, isSecure: window.location.protocol === "https:" };require.config( { baseUrl: ( config.isSecure ? "https://" : "http://" ) + config.host + (config.port ? ":" + config.port: "") + config.prefix + "resources" } );and then we have the actual connection code where we get the app and the specific object. require( ["js/qlik"], function ( qlik ) { var app = qlik.openApp('Helpdesk Management.qvf', config); app.getObject('QV01','a5e0f12c-38f5-4da9-8f3f-0e4566b28398'); } );The getObject method gets the specified object and displays it in the div with id="QV01"<div id="QV01" style="position: absolute; top: 50px; left: 20px; width: 200px; height: 200px;" class="qvobject"></divThat's it! We created our first Mashup. Make sure to click on "Save All" and preview by clicking on the "View" button.The files are located under:C:\Users\<username>\Documents\Qlik\Sense\Extensions\HelpdeskI hope this was helpful enough to get you started with displaying your visualizations on a webpage. If you have this app published on your QMC, change in the JavaScript the host (step#6) of your server and the id of the app (step#7) to something likevar app = qlik.openApp('bb4a797c-b483-462b-84d4-53238ce1eeb1', config);---More Info regarding the Qlik Desktop WorkbenchQlik Sense Workbench. The visualization and Mash-Up Editor
...View More
.png "Former Employee"){kind=icon}
