Picasso.js is a powerful charting library that plays really well within the Qlik Sense ecosystem to build simple or very complex visualization.By leveraging its component-based nature, you can combine the building blocks to create virtually any type of chart.To learn more about Picasso.js, I recommend the following resources:Creating Picasso chart with data from Qlik: https://community.qlik.com/t5/Qlik-Design-Blog/Qlik-Engine-and-Picasso-js/ba-p/1706241What makes Picasso unique: https://community.qlik.com/t5/Qlik-Design-Blog/Picasso-js-What-separates-it-from-other-visualization-libraries/ba-p/1829951An advanced chart using Picasso: https://community.qlik.com/t5/Qlik-Design-Blog/Create-a-Slope-chart-with-tooltips-and-brushing-using-Nebula-js/ba-p/1827168The full documentation of the library can be found on qlik.dev at https://qlik.dev/libraries-and-tools/picassojs. Navigating the documentation is easy, you can dig deeper into the main concepts, learn more about the different types of supported scales, but more importantly discover the different components that you can mix and match to create unique visualizations.A feature of Picasso that I really like but is not very clear from the docs is Theming.Picasso.js is themeable meaning that you can easily control the look and feel across all visualizations by creating a theme and changing a few base variables.To do that, you simply pass in a theme object when instantiating Picasso js as follows:…
Import picassojs from ‘picasso.js’;
…
const picasso = picassojs({
style: {
'$font-color': '#FF00FF',
'$font-size': '10px',
'$font-family': 'Arial',
'$font-size--l': '16px',
'$guide-color': '#00FF00',
'$shape': { // for use with type point component
fill: '#00FF00',
strokeWidth: 1,
stroke: 'rgba(255, 255, 255, 0.2)',
shape: 'star',
},
},
palettes: [{
key: 'categorical',
colors: [
chroma.bezier(['#00FF00', '#0000FF']).scale().colors(5),
],
}, {
key: 'sequential',
colors: [
['#00FF00', '#0000FF'],
],
}],
});Notice that you can change the labels’ font styling, colors, and even shapes of points (star, triangle, etc..) on the style object, and also pass in a color palette for categorical and sequential color scales.The result looks like this (the ugly colors are for demo purposes only!)Below is the complete code of the settings file and attached is the full project to run and edit./* eslint-disable no-unused-vars */
import {
useElement,
useState,
useStaleLayout,
useRect,
useEffect,
} from '@nebula.js/stardust';
import picassojs from 'picasso.js';
import picassoQ from 'picasso-plugin-q';
import chroma from 'chroma-js';
export default function supernova() {
const picasso = picassojs({
style: {
'$font-color': '#FF00FF',
'$font-size': '10px',
'$font-family': 'Arial',
'$font-size--l': '16px',
'$guide-color': '#00FF00',
// $shape: { // for use with type point component
// fill: '#00FF00',
// strokeWidth: 1,
// stroke: 'rgba(255, 255, 255, 0.2)',
// shape: 'box',
// },
},
palettes: [{
key: 'categorical',
colors: [
chroma.bezier(['#00FF00', '#0000FF']).scale().colors(5),
],
}, {
key: 'sequential',
colors: [
['#00FF00', '#0000FF'],
],
}],
});
picasso.use(picassoQ);
return {
qae: {
properties: {
qHyperCubeDef: {
qDimensions: [],
qMeasures: [],
qInitialDataFetch: [{ qWidth: 2, qHeight: 5000 }],
qSuppressZero: false,
qSuppressMissing: true,
},
showTitles: true,
title: '',
subtitle: '',
footnote: '',
},
data: {
targets: [
{
path: '/qHyperCubeDef',
dimensions: {
min: 1,
max: 1,
},
measures: {
min: 1,
max: 1,
},
},
],
},
},
component() {
const element = useElement();
const layout = useStaleLayout();
const rect = useRect();
const [instance, setInstance] = useState();
useEffect(() => {
const p = picasso.chart({
element,
data: [],
settings: {},
});
setInstance(p);
return () => {
p.destroy();
};
}, []);
useEffect(() => {
if (!instance) {
return;
}
instance.update({
data: [
{
type: 'q',
key: 'qHyperCube',
data: layout.qHyperCube,
},
],
settings: {
scales: {
x: {
data: {
extract: {
field: 'qDimensionInfo/0',
},
},
},
y: {
data: { field: 'qMeasureInfo/0' },
invert: true,
expand: 0.1,
},
c: {
data: { field: 'qMeasureInfo/0' },
type: 'color',
},
},
components: [
{
type: 'axis',
dock: 'left',
scale: 'y',
},
{
type: 'axis',
dock: 'bottom',
scale: 'x',
settings: {
line: {
show: true,
},
},
},
{
type: 'grid-line',
x: 'x',
y: 'y',
},
{
key: 'bars',
type: 'box',
data: {
extract: {
field: 'qDimensionInfo/0',
props: {
start: 0,
end: { field: 'qMeasureInfo/0' },
},
},
},
settings: {
major: { scale: 'x' },
minor: { scale: 'y' },
box: {
fill: { scale: 'c', ref: 'end' },
},
},
},
],
},
});
}, [layout, instance]);
useEffect(() => {
if (!instance) {
return;
}
instance.update();
}, [rect.width, rect.height, instance]);
},
};
}
...View More
Today our Leigh Kennedy, Principal Enterprise Architect, will walk you through Systems Development lifecycle concepts used with the Qlik Active Intelligence platform. This is a 2 part series, this entry covers Part 2. Part 1 can be viewed here.
What is a regression line? In simple terms, it is a line that best describes the behavior of a set of data. They are often used for forecasting to illustrate the relationship between the dependent y variable and the independent x variables when there is linear pattern. Using a regression line can show future behavior of the dependent variable using different inputs for the independent x variables. Scatter plots now support regression lines and provide many options to choose from. In the properties pane of the scatter plot chart under Add-ons, is an option for Regression Lines.Click the Add Regression Line button to add a regression line to your chart. There are many types to choose from depending on your data and what you would like to show. According the Qlik Help, here are the regression line types available to add to a scatter plot chart.Average: Shows the average value of the data.Linear: Shows a linear increase or decrease of values.Second Degree Polynomial: Shows a curved line to represent fluctuating data with one hill or valley.Third Degree Polynomial: Shows a curved line to represent fluctuating data with up to two hills or valleys.Fourth Degree Polynomial: Shows a curved line to represent fluctuating data with up to three hills or valleys.Exponential: Shows a curved line. Use when data values rise or fall at increasingly higher rates.Logarithmic: Shows a curved line. Use when the rate of change in data increases or decreases quickly, then levels out.Power: Shows a curved line. Use with data sets that compare measurements that increase at specific rates.Here are some regression line examples:AverageLinearSecond Degree PolynomialFourth Degree PolynomialThere are some additional properties that can be set for a regression line. The color of the line and label can be set, and the line can be displayed as solid or dashed. The direction of fit can also be set to either minimize vertically or minimize horizontally. A scatter plot can also have more than one regression as seen in the chart below.Regression lines are helpful for analysis because it allows us to see patterns in our data. They allow us to see the relationships between two or more variables and examine which variables may have an impact. Check them out - Qlik Sense makes it easy to use them in your scatter plots charts.Thanks,Jennell
...View More
For those of us who want to go beyond the out-of-the-box capabilities of Qlik Sense and want to leverage the full potential of the platform to create complex visualizations or satisfy custom development needs, understanding the Engine API is fundamental to taking advantage of what Qlik Sense hides under the hood.The Qlik Engine API is a websocket protocol that uses JSON RPC 2.0 to communicate between the Qlik Associative Engine and clients. It works independently of any platform and programming language as long as it supports WebSockets and can parse JSON.A great place to get your feet wet with trying out the Engine API is through Qixplorer (You might remember this as the Engine API Explorer on Qlik Managed). The tool that you can access at https://qixplorer.qlik.dev features a newly reimagined user interface and additional updates for a better experience.Right off the bat, you can see that the format is divided into 4 main sections:Left: This is where you configure your connection to the tenant, pick the app, and browse through methods made available for your selected object.Middle: This is where you can see your requests and responsesBottom: This area is where you can construct and modify your requests and execute themRight: This is a neat feature that shows you inline documentation as you explore API methodsOther settings include a Light/Dark mode toggle at the top left, as well as a Layout toggle that lets you switch between the Original Layout (side by side request and response sections) or, my favorite, the Chat Layout.How to use Qixplorer?The first thing you would need to create a new connection to your Qlik Cloud tenant is a Web Integration ID. You can grab that by going to your tenant’s Management Console, under Web, Create a new integration and add https://qixplorer.qlik.devas an origin.Once you have the generated ID in hand, create a new connection on Qixplorer as shown below:The next step is to choose the app you want to connect to from the second dropdown.Once you select that, you will see that a first request and response have been made automatically. That’s the “OpenDoc” method, it is responsible for opening an app. More about it here.Notice that a few items are now highlighted on the Left panel that you can start using - including the Doc and Global classes that can be expanded to reveal all the methods you can execute. You can also use the pre-defined Macros to list sheets, dimensions etc...⚠️Before we continue, keep in mind that when using Qixplorer, you are performing changes directly on your apps, so when executing API methods to update or delete within Qixplorer, it will affect the objects in your apps.Examples of using QixplorerUsing Macros to list sheets in our appFrom the Macros dropdown, click on “ListSheets”.Notice that the Request section at the bottom has our generated JSON with the methods needed to list sheets.Click on Execute and view the JSON returned in the Response section.P.S: notice that two separate requests have been made by our Macro: CreateSessionObject and GetLayout.Using a method from GlobalLet’s create an App in our tenant directly from Qixplorer.First, select the “CreateApp” method from the Global dropdown.Notice that the right panel has been populated with the inline documentation for our method. This makes it really convenient to view the definition and parameters at a glance.Within the Request section that now contains the editable JSON, enter a name for the app we’re creating in the “qAppName” property.Our request and response look like this:{
"handle": -1,
"method": "CreateApp",
"params": {
"qLocale": "",
"qLocalizedScriptMainSection": "",
"qAppName": "test-qixplorer"
}
}You can check your tenant to view the newly created app:Using a method from Doc and GenericObjectLet’s retrieve the calculated data from a Table object in our app.First, we need to get the object. Under ”Doc”, scroll down to GetObject and change the “qId” property to our Table's object id.Now that we got the object, you can go to ”GenericObject”, then “Select Object” and click on table.Next, scroll down to the “GetHyperCubeData” method under “GenericObject” and modify the JSON as follows to set the qHeight (number of rows to retrieve) and qWidth (number of columns){
"handle": 2,
"method": "GetHyperCubeData",
"params": {
"qPages": [
{
"qHeight": 1000,
"qWidth": 5,
"qTop": 0,
"qLeft": 0
}
],
"qPath": "/qHyperCubeDef"
}
}Click on execute and examine the response:The Engine API is without a doubt very powerful as it exposes methods that can be used to tap directly into the associative engine and manipulate complex data structures. Having a tool like Qixplorer is a great way to try out the API and learn more about all the methods available in a single place.Let me know in the comments how you use Qixplorer on you end!
...View More
This week, Insight Advisor got even better with the new analysis type experience. Now when you click on the Insight Advisor button from within an app, you have 3 options for insights.You are probably familiar with the first two options. Explore your data allows you to select fields and/or measures from a list that Insight Advisor will use to generate analyses.The second option, Ask a question, allows you to use natural language to ask a question.The third option, Create an analysis, allows you to select from a long list of analysis types such as ranking, trend over time, and correlation to gain insight. The image below shows just some of the analysis types available. You can find all available analysis types here in Qlik Help.The analysis types are helpful to users who know what type of analysis they are looking for but may not have the skill set to create it. Users can select the analysis type they are looking for and get the best data and option. Let’s look at a few examples. If I select the breakdown analysis type, I am prompted with suggested measures and dimensions I can use, as well as the number of measures and dimensions I need to select to perform a breakdown analysis.I can select the measures and dimensions as seen above and then analyses are auto generated as seen in the images below. These visualizations can be edited in the analysis properties pane or added to a sheet in the app. Selections can also be made from the analysis.Here is another example using the clustering analysis type. In this example, we get a scatterplot as well as some information about the insights found.There are many analysis types to choose from and they are all easy to produce and get insights from without having to take the time to create them manually, which in some cases can be complex. The analysis types are best practice within organizations and methodologies that are used by many. Try it out yourself to see how easy it is to perform complex analyses in your apps. To learn more, read the Qlik Product Innovation Blog and check out Michael Tarallo’s SaaS in 60 video and demonstration walk-through.Can't see the videos? YouTube blocked by your region or organization? Check out this link on our video site:https://videos.qlik.com/watch/vK3S8eoBAoXNjzJzwfJErV.Thanks,Jennell
...View More
Mike Tarallo from Qlik, walks you through a brief example of Section Access in the Qlik Cloud Platform and introduces new Section Access support in Insight Advisor Chat.
Hi Everyone,As more & more developers integrate & embed Qlik Sense into various 3rd party platforms, the need to simplify the development process is paramount. With that in mind, today I am excited to announce the new Qlik Platform SDK.What is this new SDK?The Platform SDK is a suite of tools, libraries, and documentation that simplifies building high-quality and performant applications on top of the Qlik Sense Platform. The idea is to let developers extend solutions without the need to develop them from scratch.What can we do using it?As of now the Platform SDK is in its nascent phase. We have introduced amodule called 'Auth' whichis responsible for implementing authentication & authorization in browsers and web apps. So, you can use it to:construct a websocket URL easily using a predefined method.get login info about users.create/delete apps.connect to the Engine.What programming languages does it support?The best part of this SDK is that it comes in twoflavors - TypeScript & Python. So, you have a lot of flexibility with TypeScript definitions and it also opens up scope for the Python developer community.Please note that the Platform SDK packages are early development releases. So, please expect breaking changes as it updates andstabilize.Here's anintroductory video from the Qlik Developer series that explains what this is all about.Let us know what you think about this new SDK and reach out for any questions.~Dipankar, Qlik R&D
...View More
It's been a while since I posted a tip about creating charts. I say roll up your sleeves and let's hack one of the standard charts to create a chart type that doesn’t exist in our chart library. Who's in?We will be making a lollipop chart and something extra, because, well, why not.First, let's describe what a lollipop chart is and why it can be useful.What is a lollipop chart?A lollipop chart is a variation of a bar chart. It differs from a traditional bar chart in two ways: bars are reduced to a line, and the bar tips are oversized in the shape of a circle. If you're a sweet tooth, it'll remind you of a lollipop.One of the main benefits of a lollipop chart is that it can be used to represent a large set of tall bars in a less intimidating way. However, it is pertinent to emphasize that this chart is less accurate than a regular bar chart. This is mainly because the center of the circle at the end of the lollipop marks the value. In comparison to the straight edge of a bar, it is difficult to determine where the center is located.Hands onWe will use a combo chart and some of its not-so-new features to create a lollipop chart. Remember a bar chart needs at least one dimension and one measure.Drag a combo chart and add a dimension and one measureNothing wrong with this chartNext, let’s start messing with the chart settings. Go to Appearance, Presentation, and then Advance Styling. There you will be presented with a bunch of configuration options. What we want is to make the bar width really thin. Anything around 0.1 usually works well.Now our combo chart should look something like the one below.Next, is the time to add the candy on top of those lines. Since we are using a combo chart we can quickly add another measure to it and pick a marker as its representation. Simply add the same measurement you used for the bars again. It will be added as a line and the label will say height of line. Don’t panic, no yet. Next expand the new measure panel and scroll down to click on “More properties” button and pick “Marker” from the options displayed.Your chart should be looking something like thisThe next step is to get the colors of the bars and the marker in sync. Simply select the appropriate color in the menu option under the measure “More properties” panel.If you want your circle markers in sync with your bars, and you are using something more sophisticated than single color you can go a long way with colors by using expression instead of single color in the panel.As a final step, make sure that neither the legend nor the tooltip ruin our little hack by showing both metrics. To do that just scroll to the very bottom of the combo chart Presentation properties panel deactivate the legend and change the tooltip properties from basic to custom to make sure you have control over it.EXTRA TIP:After learning how to make a fancy lollipop chart using the combo chart, we can spend some time creating a bar chart with rounded corners as in the picture below.The process is simple, just adjust the bar width until it matches the circle diameter size and voila, your rounded corner bar chart is ready. There are some colors that work better than others at dissimulating marker borders (darker colors), keep that in mind if you are looking for perfection.Thank you for reading this post I hope you enjoyed it.Arturo
...View More
Qlik AutoML is a powerful tool that makes it easy for analytics teams to easily generate models, make predictions, and test business scenarios using a code-free experience.In a previous introductory blog post by Dipankar, you can learn more about how to get started with AutoML and find out just how easy it is to navigate the interface and start training and evaluating ML models in a few steps.Today, we will leverage the power of Qlik Server-Side Extension (SSE) to build a simple Scenario Analysis dashboard right into Qlik Sense.“What-if scenarios” are a great way to plan for decisions and actions by testing different parameters while capitalizing on AutoML’s prediction API.So what is SSE?Server-side Extension protocol allows us to extend the Qlik built-in expression library with functionality from external calculation engines. In our case, we will use AutoML’s re-calculation of the prediction based on changes on variables to show the result in a KPI chart.Let’s go through the process in a practical example. We will look at Employee Turnover Risk (dataset attached at the end of the post)Create your AutoML project and load the dataset making sure to select the “left” field as the target. After successfully completing the training process, go ahead and deploy your model and enable API Access. Take note of the Access URL and Token, we will need them to make the connection in Qlik Sense.On our QS tenant, we need to create a new Data Connection via the "Qlik AutoML" Analytics source connector. If you don’t see it, make sure to enable Machine learning Endpoints in the Management Console. Now, let’s move on to building our Scenario analysis sheet on the Qlik Sense app (find the qvf attached at the end of the post).First, we create multiple variables to be used in our “Variable Input” objects. We concentrate on the features that are more important according to the Feature Importance chart.Next, we create our objects:The KPI that shows the Likelihood for Employees to leave is based on a measure that uses the SSE expression as follows, where some of the features are passed in as variables.P.S: note the first argument of the ScriptEvalEx matches the field types of our features in order - with N being number and S being string. Also, the features passed as the third argument need to map 1 to 1 with autoML, missing features will result in an error.=endpoints.ScriptEvalEx('NNNNNNNSS','{"RequestType":"endpoint", "endpoint":{"connectionname":"Qlik_AutoML_Employee_Turnover","column":"probability_yes"}}',
vSatisfactionLevel AS satisfaction_level,
last_evaluation,
vNumberOfProjects AS number_project,
vAvgMonthlyHoursWorked AS average_montly_hours,
vTimeSpent AS time_spend_company,
Work_accident,
promotion_last_5years,
vDepartment AS sales,
vSalary AS salary)Next. we build our variable inputs using the “Variable Input” chart under Custom Objects > Qlik Dashboard Bundle. Adjust the “Show as” type as needed. And that’s all! You can now adjust the variables to trigger AutoML which automatically redistributes the data and re-predicts the outcome in order to understand the implication of any potential action.Below, notice that Employee #2 has a high turnover %. Upon adjusting the “Avg Monthly Hours Worked”, “Number of Projects”, and “Salary” or a combination of these parameters, the % drops drastically.Attached is the dataset used as well as the qvf.I hope you found this post helpful!
...View More
In this blog post, I will discuss some of the color enhancements that have been added to the KPI chart and the Map chart in Qlik Sense SaaS. Both allow you to further customize the visualizations in an app. Let’s begin with the KPI chart. A KPI is a key performance indicator and is often used to highlight an important metric. In Qlik Sense SaaS, you can now change the background color of a KPI. In the past, KPIs always had a white background and users had the ability to change the color of the metric.Now, users can also change the background color of the KPI. In the Presentation section of the Properties Panel, in Styling, the background color can be set. The background can be set to a single color, or an expression can be used to set the color. This is nice if you want to make the KPI stand out on the sheet based on a condition or an expression.Here is what the KPI looks like with a background color.Notice that the label of the KPI color cannot be changed so make sure you select a background color that does not hide the label. In the KPIs above, the label of the KPI on the right is easier to read than the one on the left. Also keep in mind that you have the option to hide the KPI label. I would recommend doing this only if the KPI metric being displayed is clear to the user without the label.Another new color related feature added to Qlik Sense SaaS is the color of the labels used in a Map. Users can now change the label coloring to Light or Dark or they keep it set to Auto. This setting is found in the Presentation section of the Properties Panel. To use this feature, the map must be showing the labels.When set to Auto, the labels will change depending on the base map being used. If the base map is darker, then a light label tends to be used and if the base map is lighter, a dark label color tends to be used. Users now have the option to set this regardless of the base map color. So depending on the map and the coloring you are using in the map; you may prefer a light label even if the background is light like in the map below. The key is to go with the option that is best read by the user. Usually that is this the option with the most contrast.This is just a few of the visualization enhancements that have been made in Qlik Sense SaaS. Learn more about the KPI background color enhancements as well as other KPI improvements in Michael Tarallo’s SaaS in 60 video. You can check out the entire SaaS in 60 video series here to learn more about new product features.Thanks,Jennell
...View More
