In my previous blog post, I talked about how custom visualization extensions enable you to go beyond the default visualization capabilities of Qlik Sense and we took a look at how to create a custom Stream Chart using Qlik’s Nebula.js and Picasso.js. Sometimes however, you might find yourself wanting to build more complex charts that can be difficult to do using only what the Picasso.js library has to offer. In this blog post, we will do just that as we build a cool Racing Bar Chart visualization using D3.js that we will then package and upload to our Qlik Cloud tenant. First, let’s talk about what a Bar Chart Race visualization is and where you can use it to enhance your data storytelling: A bar chart race is a type of data visualization that displays changes in data over time using dynamic animated bars. It’s often used to show the ranking or position of different groups or categories over a period of time. In a bar chart race, the bars representing each group/category move horizontally or vertically to show the changes in their values over time. The length of the bars represents the magnitude of the data being visualized. This type of chart is particularly effective in visualizing data that is dynamic and changes frequently. It can be used to compare different categories or groups in terms of their performance, popularity, or other factors over time. Bar chart races are also visually engaging, making them a popular tool for sharing data on social media and other platforms. Some examples of usage include: Comparing sales data for different products or services Showing the distribution of income levels across a population Visualizing the frequency of different types of crimes in a city or region Monitoring the spread of a virus across countries Comparing the popularity of different social media platforms over time Project setup If you are new to creating visualization extensions in Qlik Sense, you might want to go through my previous blog post or check out these resources as I’m not going to cover all the details here. Run the following command to bootstrap the codebase (notice that we used the “—picasso none” to prevent the generation of a picasso.js template)'npx @nebula.js/cli create racing-bar-chart --picasso none Next, move into the newly created project directory and run the following commands (1st one to install D3.js, and 2nd one to run our project)npm i d3@6.0.0 --save npm run startThis will open the Nebula.js dev UI, follow the instructions to connect to your Qlik Cloud tenant: Enter the websocket URL which includes the “web integration id” and is formatted like this:wss://YOUR_TENANT.us.qlikcloud.com/&qlik-web-integration-id=YOUR_WEBINTEGRATION_IDP.S: to get your web integration id, go to your Qlik Management Console, click on “Web” on the left sidebar, then click on “Create new" Next, select the Qlik Sense App from the list (The QVF with data is attached to this post) Back to the code base, we need to edit the configuration files to define the data structure as follow: object-properties.js:const properties = { showTitles: true, title: "", subtitle: "", footnote: "", qHyperCubeDef: { qDimensions: [], qMeasures: [], qInitialDataFetch: [ { qWidth: 3, qHeight: 3300, }, ], }, }; export default properties;​ data.js:export default { targets: [ { path: "/qHyperCubeDef", dimensions: { min: 1, }, measures: { min: 1, }, }, ], }; Since we’re going to view Brand Value over time for Companies, we need 1 measure (sum(value)) and 2 dimensions (Date and Name). You can now select these 2 dimensions and 1 measure in the Nebula.js dev UI on your browser: Developing the visualization in Nebula.js and D3.js: For the purposes of keeping this post short, we’re not going to dive deep into the details of the D3.js code. You can visit this comprehensive post by the co-creator of Observable and main developer of this library, that explains in detail the implementation of this chart. index.js:This is the main entry of our extension and contains our Nebula.js code.Note that we’re using a few hooks from the imported @nebula.js/stardust package which should be familiar if you’re used to developing React.js applications.- useElement provides the HTML element where we attach our visualization.- useLayout is used to get the layout of our generic object (hypercube).- useEffect is used to run the callback function we pass it when certain values change.- useState helps keep track of state within the application. In this case we use it to replay the animation. vis.js:This is where all the magic happens and where the D3.js specific code lives.For brevity, I will highlight the important parts of this file: 1: constants needed in calculating d3 scales and positionning. 2: D3 scales with x being a linear scale and y being a band scale 3: Data derived from the source data (gets passed on index.js) 4: Helper functions including rank() function to compute brand ranks, and keyframes() to compute interpolate values within each year for a smooth animation. 5: D3 formatting functions 6: D3 drawing functions for the components that make up the visualization: Bars x-axis labels (on each bar) ticker (Date) 7: D3 animation that iterates over each keyframe and updates the components above. Finally, to build the extension, run: npm run build And in order to package the extension for Qlik Sense, run: (make sure to zip the folder in /dist before uploading it to your tenant) npm run sense ------------------------------- Source Code on Github:https://github.com/ouadie-limouni/Qlik-Nebula-Bar-Chart-Race-Viz-Extension Zipped Extension: Attached QVF: Attached ...View More

Check out the Do More with Qlik - Tips and Tricks Edition Playlist for all the things you should know about the Qlik Cloud Platform. New content added on a regular basis!

Do More with Qlik - Tips & Tricks Edition 

 

...View More

A review of a problem I had with varaibles that continued to revert to their previous values.

...View More

The ObjectID and InObject functions are system functions that can only be used in chart expressions. The ObjectID function has one optional parameter and is used to return the object ID of the object the expression is in or of the object type that is included in the parameter. A text & image object with ObjectID() in the expression returns the ID of the text & image object. ObjectID('text-image') also returns the ID of the text & image object. To determine the ID of the sheet the object is on, use the expression ObjectID('sheet'). This will return the ID of the sheet just as you see it in the URL of an app. In the example below, there are 4 sheets and a button from the master items is on each sheet. An expression is used to color the background of the button based on the sheet it is on. In this expression, the ObjectID function is used to check the sheet ID before assigning the button color. Here are the results: The InObject function takes one parameter, which is the ID of an object, and is used to determine if the current object, (where the expression is written), is contained in another object. In the text & image expression below, the InObject function is used to see if the text & image object is in the sheet with ID '040e64b6-4a93-4962-a833-aed253db4ac1'. In this case, the expression returned true (-1) because the text & image object is in the identified sheet. If the expression was false, 0 would have been returned. The InObject function can also be used to color buttons as done in the previous example. In this example, there are three sheets – a navigation sheet, a blue sheet, and a green sheet. On the navigation sheet there are two master buttons that will navigation the user to the respective sheet. In the background color expression for the blue sheet, the InObject function is used to determine if the blue sheet button is in the blue sheet. If it is, then the button is colored blue, otherwise it is colored light gray. The parameter used in the InObject function is the sheet ID for the blue sheet. A similar expression is used for the background color expression of the green sheet button except in this expression, the parameter is the sheet ID for the green sheet. When the blue sheet button is clicked, the user is directed to the blue sheet and the buttons looks like this: When the green sheet button is clicked, the user is directed to the green sheet and the buttons looks like this: Below is another example of the InObject function with a few levels. There is a text & image object in a container object on a sheet. The first three expressions below use the ObjectID function to get the object IDs for the sheet, container, and text & image objects. The last three expressions use the InObject function to confirm that the text & image object is in the container, that the text & image object is in the sheet, and that the text & image object is not in the next sheet. I would love to hear how you use the ObjectID and InObject functions – share in the comments. Thanks, Jennell ...View More

Give your Qlik Sense Apps some style. Make them stand out in the Qlik Cloud Hub with eye catching and visually pleasing thumbnails. See how I use Adobe Express to quickly and easily give my Qlik Sense Apps some polish.Full Video:https://youtu.be/n8y0GINxDu0Full Playlist:https://www.youtube.com/playlist?list=PLW1uf5CQ_gSqF5bcmbBrk1q7Q4-h899V1 ...View More

What is Time Series Analysis? Time series analysis helps us understand and learn about the changes in our data over time. It involves collecting data points at consistent intervals over a set period of time, and using statistical methods to identify trends, patterns, and relationships in the data. Time series analysis can also be used for forecasting future data based on historical trends and patterns as we will see later in this post. Qlik Demo showing UK Crime trends: Explore demo here Where can it be used? Time series is used in a variety of industries, including finance, economics, retail, and meteorology, to help understand trends/patterns or make predictions and forecasts based on historical data, or simply to develop insights into how things change over time. For instance Retailers can use time series data in a number of ways to support their decision making and improve business performance, including: Sales forecasting to project sales trends in the future and predict demand, plan for inventory, and optimize supply chain to avoid overstocking or shortages. Customer behavior analysis to understand how their customers’ habits change over time and identify spending habits and purchasing patterns which can help optimize marketing targeting efforts. Pricing analysis to understand how prices change over time affect sales and customer behavior. Inventory management to identify demand for specific products. Ways to visualize Time Series data: When it comes to looking at time-based data, we usually tend to use a Line Chart as it offers a simple and quick way to view changes related to a measure (Y-axis) over the course of time (X-axis). Avg Temp over time comparison between 3 countries Other charts however can help visualize the information better, here are some examples: - A heatmap chart as seen on Github’s commit history shows a darker colored squares when more commits are made during a day and lighter color for less commits allowing us to easily notice the more productive days. -A simple slope chart can be used when the time interval is limited and we want to see direct transitions over time, for instance comparing total sales data by industry between two years. Check out my other post to learn more about how this slope chart was created using Qlik's open source libraries. Time Series Forecasting in Qlik Sense Time series forecasting allows us to predict where a particular metric is going to be in the future based on historical data. Qlik Sense makes it easy to do this on the Line chart. Let’s build a chart with forecast that looks at average temperatures in the US (The QVF for this example is downloadable at the end of the post) Create a filter pane and select United States to limit data to one country. Create a Line Chart using: Dimension: MonthYear Measure: Sum(AverageTemperature) Expand the Measure field and turn ON the “Forecast” setting Move to the Dimension field and you can see that 2 new settings have appeared: Forecast steps: the number of data points to be forecasted (we choose 12). Keep in mind that the further we go out in time, the broader the confidence becomes due to the increased uncertainty. Step size: the granularity of the forecast steps (we choose Month to forecast for the upcoming year) You can also change the method used for the forecast (SSA or OLS) and the appearance of the trend line Confidence level describes the probabilistic range of the forecast and can be adjusted from 0 to 1. If 0.9 is selected, that means that 90% of the time, we will be within the blue range. Using Insight Advisor: Qlik has recently added the “Trend with Forecast” analysis type to Insight advisor. You can simply use the suggested measure and dimension and generate the chart:       To learn more about time series forecasting, check out this help article. Thank you! ...View More

This selection of videos in this playlist is great for new and trial Qlik Cloud users.

...View More

A look at line charts and how they can be used to represent data.

...View More

Kick off the New Year with Qlik Cloud, as I will explain exactly what makes Qlik Sense the next-generation data exploration and visualization software. Register here

...View More

It's #Fridaythe13th - so here are some quick fun facts about the iconic movie franchise that I discovered using #QlikSense, and some I did not know about until now, so spoilers ahead - enjoy!

...View More