Pablo Picasso was the most dominant and influential artist of the first half of the twentieth century. Picasso’s ability to produce works in an astonishing range of styles made him well respected during his own lifetime. After his death in 1973 his value as an artist and inspiration to other artists has only grown and it seems has influenced also our Picasso.js creator.
What is picasso.js?
Picasso.js is a visualization library which works well with the Qliksense world and provides already out of the box features which facilitate the integration with Qliksense and its data structure.
Do you remember our LEGO time?
I think everybody of us in our childhood played with this fabolous game, which is great and is a very good educational game which develops problem solving and mathematical thinking. Following instructions to assemble Lego also has a lot of benefits for children’s problem solving, focus and attention to detail. Ideas of symmetry, balance, shapes and sizes are explored during play with Lego. And I would add not only for children but also for us adult :-). Picasso.js is very similar. It allows us to combine any shape in our own chart by simply defining custom components or re-using existing components in a simple and straight forward manner.
The Design Pattern
Picasso.js is using the component design pattern. Components are the visual building blocks that make up the chart, by combining them in various forms virtually any chart can be created. A bar chart, for example, consists of a bar layer, a continuous and a discrete axis. Add a line layer and you have a combo chart. It provides a plugin system that makes it easy to extend existing functionality – you can register and use custom components that play well with the existing ones, create a new theme, provide your own data parser or even register a custom renderer that outputs sketchy graphics.
The Picasso.js delivers a q plugin which registers a q dataset type that makes it a bit easier to extract data from a QIX hypercube. This dataset type understands the QIX hypercube format and its internals, making it a bit easier to traverse and extract values from an otherwise complex structure. Additionaly it also contains a brush helper that can be used to find appropriate selections in the underlying data engine.
My Personal Experience
Concerning to my personal experience we recently had a usecase in my company where we had the requirement to calculate some complex financial KPI’s on the fly, taking in account the selection applied by the end-user, and showing the desired output not only in a table chart but also using different other types of charts (e.g. bar chart and line chart).
To be able to meet the requirement we used some helper fields to pre-calculate some values in our hypercube and based on these values applied the necessary logic for our final measure.
Additionaly we had to filter our hypercube to show only the monthend results based on the data we had in our hypercube.
So I would say a perfect use case for Picasso.js and Qlik Advanced Expression feature:-). Picasso.js is extremly flexible and allows you also to create our own charts, extend it with custom components and use capabilities like Filtering to be able to exclude certain values in the returned QIX hypercube.
We developed an own extension, with the possibility to show and hide dimensions and measures by additional custom properties, as also adding a “Filter By” Custom Property on Dimension Level. This helped us when it comes to show only the desired data in our chart applying some custom filter on the returned QIX hypercube data. Furthermore we added some additional layout settings on the extension which allows the Qliksense Business Analyst to chose between different chart types, each of it with comes with own properties which are rendered on run-time based on the selection of the chart type. Finally the q-plugin of picasso helped us to implement the standard selection feature of Qlik. Overall great experience and big flexibility using the component approach when it comes to use this visualization library. Well done Picasso.js team! 😉
You can download a starter version of a Picasso Extension (including tooltip component, filter and selection capability) on my Github Profile:
For additional examples:
Picasso Extension in Action with some advanced features