Picasso.js is an open source charting library to build custom, interactive visualizations using components.
Components are visual building blocks to create custom charts. Two other important elements are scale and data.
picasso.js charts can also be interactive and extensible. You can find many useful examples on picassojs.studio
Butterfly Chart
I am going to walk you through the steps to create a Butterfly chart in Qlik Sense using picasso.js.
I stumbled upon picassojs widget component created by Konrad Mattheis.
This widget component is extremely helpful for beginners who want to get started learning picasso.js
We will use median weekly salary data by gender from US Bureau of labor statistics.
Steps:
Let’s start with a Qlik Sense app and load data. We have three fields in the data set: Age along with the median weekly salary for men and women.
picassojs.com has many examples so I chose Miralem Drek’s pyramid chart to create the butterfly chart.
The first step is to copy code from Observablehq to the picasso wizard in Qlik Sense.
Legend
In order to add legend, we need to a component with type = ‘legend-cat’
Since original code contained 0 for Male and 1 for Female, I had to make changes necessary to render Male/Female values.
You can clearly see how easy it is to use various components to improve picasso.js visualizations.
Labels
It’s time to add labels to bars. Again, we are going to use a callback function to retrieve median salary value by gender for each age group.
We will add a component using labels function and pass value for c as bars
That’s all.
One of the best ways to learn about various picasso.js scales, components, plugins is to go through the documentation on picassojs.com.
In addition, you can find many examples of interactive components on picassojs studio.
Try various charts by adding different scales, components and interactive elements such as various selection methods, tooltips and colors.
Not only you will live up to the standard of the legend Pablo Picasso but also learn and master Qlik’s amazing visualization library.
Shilpan
