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
What’s Qlik Sense Workbench and what’s for?Qlik Sense Workbench is a development toolbox used for building solutions with Qlik Sense. It includes JavaScript API libraries used for building Qlik Sense visualizations or for building mashup websites with Qlik Sense content.Qlik Sense Workbench provides developers with a quick start for creating custom visualizations and mashup websites, including code samples and templates for creating different types of visualizations as well as templates for creating basic mashup websites. Those templates constitute in fact the perfect starting point for your next mashup project.Qlik Sense Workbench provides three JavaScript APIs for building extensions and mashups. The Extensions API for building visualizations, the Mashups API for building mashups websites, and the Backend API for communicating with the Qlik Sense engine.How can I access to Workbench?The good news is Workbench doesn't have a separate installation package, so if you already have Qlik Sense Server or Desktop you have Workbench working.To launch Qlik Sense Workbench open a web browser and type in the URL https://ServerName/workbench/ . If you are a Qlik Sense Desktop user, make sure it is running and do the following, open a web browser and type in the URL http://localhost:4848/workbench/ et voila!How does Workbench work?To reply to that question I leave you with a 5 min video that will walk you through the mashup creation process.Enjoy!AMZPS: Remember you can find lots of useful videos, howtos and tutorials at the Qlik Youtube channelCheck out a step by step tutorial here: Creating a webpage based on the Qlik Sense Desktop Mashup API
...View More
I was recently working on a Qlik Sense app where the developer wanted to show some profile data based on the user’s selection. The user was prompted to make a single selection in a field and once they did specific data for that selection would be displayed. When I first looked at the image below, I thought that it may be confusing to the user if there is data in the profile before they have made a vendor selection. As you can see in the image below, no selections have been made yet but there is data in most of the objects.In some objects like the Spend Development line chart and the Contracts and Spend Radar tables, the data makes sense without a vendor selection – we are viewing the spend and contracts for all vendors. But in some objects like the Last Transaction field, this does not make sense. The last transaction date being displayed is across all vendors so it is just the latest transaction date among all the vendors. You can also see that the Vendor Profile is null since one has not been selected yet. So my thought to get around this was to modify the expressions being used for some of the objects. For instance, for the Vendor Profile, instead of simply having the field name for the vendor name:I modified the expression to use the GetSelectedCount() function to first determine if one selection has been made from the Vendor filter pane. If one vendor has been selected, then I display the vendor name. Otherwise, I display an empty string. GetSelectedCount() is a chart function that returns the number of selected (green) values in a field.So here is what the sheet looks like now without any selections. The vendor fields like profile, entities, last transaction, spend development and office address are all blank since a single vendor has not been selected. If multiple vendors were selected, these fields will remain blank since we only want to display that data for one vendor at a time.Once a vendor is selected, the sheet looks like this:The related data is displayed and it is clear to the user that they are viewing data for the selected vendor. To me, it made more sense to show no data in these fields when a vendor had not been selected versus showing misleading or confusing data.In this example, GetSelectedCount() was one way I could help prompt the user to make a selection. Even though we have text on the page asking the user to select 1 vendor, we all know that sometimes users do not read the text on a page. By removing the data that is displayed in some of the fields, it brings to the user’s attention that something is missing and that they may need to do something to view the data. The GetSelectedCount() function works with the red text to prompt the user to do something. There may be other ways of handling this in Qlik Sense – I would be curious to hear what techniques you have used.Thanks,Jennell
...View More
Deciding what resolution to design for is a common question. For the last several years the general recommendation had been to design for 1024 x 768, which had been the dominant resolution on the web. Now things have shifted. The dominant resolution for the past few years has been (and is) 1366 x 768. This is largely because more and more people are using laptops. So the simple answer is to just say "design for 1366 x 768." That said it's a bit more complicated than that.Go wideThe trend over the past few years has definitely been to take advantage of the larger resolutions and to start designing wider going beyond the pixel dimensions of the 960 grid system used to design for 1024 x 768. As an example of this trend we can examine the web traffic coming to Qlik.com. I know that the top 8 resolutions are all wider than 1024 which accounted for 78.01 % of our traffic last year. Of those resolutions 1366 x 768 was number 1 with 25.92% of traffic and the narrowest resolution of the top 8 was 1280 x 800. Now there could be certain biases in these numbers, that the people interested in a BI product might be more technologically savvy so they may have higher resolutions than the average internet user, but if you are looking to design apps for BI users then it's a good measurement of your potential user base.So why consider 1024 x 768While 1024 is going away it's aspect ratio is still valuable. 1024 x 768 is the same aspect ratio as 2048 x 1536, the resolution of the ipad. The ipad is by far the dominant device in the tablet market. So designing for 1024 means you are going to produce something that the majority of your users can see (since most people are on even wider desktop computers) but also you will have a good idea of what your users will experience when using your design on an ipad in landscape orientation. Designing for 1024 means you can create something once and deploy it on desktops as well as tablets knowing it will be accessible on the devices most people want to explore BI on. This saves you time & resources from having to build things twice, once for wider desktops and again for tablets. Responsive Design & Dynamic GridsIf you are creating a mashup app, using HTML & Qlik together, then the best approach is in using a dynamic grid that is responsive to the available resolution. It can still be a 12 column grid system but it will adapt based on the device you are using. This approach takes more work but it is the best recommendation for designing for today's web and the realities of people using multiple devices to access the same content. In addition, Google recently announced that "mobile-friendliness" will be used as a ranking signal when they deliver search results. In other words, if your content isn't optimized for mobile devices you may be further down the search results than before. Something to consider if you want your content to be found online.Listen to your usersUltimately you are designing for your users. If you are creating an app for an environment where most users are at a certain resolution size, then design for that size. If you are designing an app where tablet usage is likely, consider designing for 1024 or using a dynamic grid if the app is a mashup. If not start thinking about going wide.
...View More
It is known as the Skittles effect. It happens when a developer creates a scatter plot and decides to color the plotted values by the dimension. This practice not only does nothing to tell the data story, it actually distracts the user from understanding what the data is actually saying. Have no fear; there are a couple of solutions to this problem. In this blog, I will discuss one: coloring the dimension by an expression.Using an expression to color your plotted valuesBoth QlikView and Qlik Sense allow users to color the plotted values using an expression. In Qlik View, this is achieved by going to the expressions tab. Under the expression simply select Background color and enter the color expression.This expression is telling QlikView to color all plotted values greater than zero as green, else color them red.By coloring the plotted values using green and red, I can now identify which shots were made vs missed.In Qlik Sense, this is accomplished by navigating to the properties panel on the right and selecting Colors and Legends. Switch the radio button off of the default setting of single color. Then select By expression, enter the color expression and make sure to check the box for This expression is a color code.The expression defined here tells Qlik Sense to color all players from Army as gold, else color the players as blue.Here is how Qlik Sense will render the chart once the color expression has been defined. I can easily identify the players from Army versus the players from Duke.One word of caution, coloring by expression is best suited for small groups of colors. I would say 3-4 colors maximum. Otherwise you start to create your own controlled Skittles effect. It is also best practice to let the user know what the colors represent. Here I utilized Qlik Sense’s subtitle field to define the colors for the users.Happy Qliking!
...View More
.png "Former Employee"){kind=icon}
