Download Set Analysis Primer

x

Picasso.JS – Butterfly Chart

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.

Step1: Load median weekly salary data by gender and age group, source: Bureau of Labor Statistics

 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.

Step 2: Add code from an example to the picassojs wizard

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.

Step3: Add a Legend with a title

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

Step4: Add bar labels

That’s all.

Picasso.js Butterfly Chart

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

If you enjoyed this article, get email updates (it’s free).

* indicates required
About the author

Leave a Reply