Qlik Design Blog

[Yianni_Ververis]

Hopefully you all attended Qonnections 2018 and saw Jimmie on the bike !!!

Bike.qlik.com is the latest mashup build entirely with Qlik's open source libraries, Qlik Core, Enigma.js, Picasso.js,‌ Leonardo UI and the Demo Team's Qdt-components.

Here is briefly how we did it

• Sensors are sending data wireless to the Raspberry Pi
• Node.js reads and writes csv
• Qlik Core in Raspberry Pi is reading csv with a reload script and saves the data
• Enigma.js connects and gets the data from Qlik Core then, Picasso.js is displaying that data in a graphical format
• Node.js is uploading the qvds on Bike.qlik.com
• Bike.qlik.com is a Docker that runs 2 containers in an AWS EC2 instance. One for the Qlik Core / Engine and another for an apache server
• The htdocs and the Apps for the Qlik Core, are mounted outside of the 2 containers so there is no need to reload containers or recreate the Docker images, once the html code is changed or the qvf
• Once uploaded, a Node.js restful api endpoint is reloading the session app, reads the new data from the just uploaded qvds and saves the qvf with the new data
• React.js with Qdt-components is connecting to Qlik Core on the server and is getting the data
• Qdt-components is rendering 11 KPI components and one search component (Leonardo UI) on the Rider field
• Picasso.js is used to read the data and display a scatter plot and a line chart with tooltip and multiple selections

Expect more examples in the coming future with these combinations of our Open Source Software!!!!!

Yianni

[gmanoharan]

Hello Yianni,

Nice share and really helpful for exploring more.

Trying to read data using Enigma js from qvf and render the data in charts using picasso js as you did it in the bikers example  .

Could you please through some light on below queries on visualization rendering ?

1. Used picasso js to render visualization  (Simple Bar chart with one Dim & Measure) using hypercube created by enigma  . Below is our understanding ,

• Is that always the above flow to be created for each and every chart creation ? Ex : I’ve 2 bar charts to be created with different multy dimensions / measures. Do I need to create separately or is there a way to reuse the definition of the chart ?
• Are there any different hypercube definitions for different visualizations (Line, Bar , scatter …) ?
• What is the advantage of using Picasso q plug-in ?

2.Where does the QDT –Components fits in the above flow ? What is the advantage of using the components ?

• Our understanding is that qtd-components requires qlik.js to render visualization. But, per the below comments from you , refers QDT component doesn’t qlik.js.

https://community.qlik.com/blogs/qlikviewdesignblog/2018/04/24/introducing-qdt-theme#comment-67500

Can we use qlik.js as a open source component with QDT ?

• Is there any reference how to render charts with Picasso & QDT components ?

Kindly share any references for any of the topics above .

[Yianni_Ververis]

Hello gmanoharan‌.

You have set many questions and I will try to answer all

• That is the flow and you can have as many calls with the same definition
• No, it's only one HyperCube which you can use in as many picasso settings, https://github.com/qlik-demo-team/qdt-components/tree/master/src/picasso/settings,
• Q plugin has a better handle on selections and especially when you render canvas and drag and select multiple dimensions/measures, https://webapps.qlik.com/qdt-components/react/index.html#/picasso-horizontal-barchart
• Qdt-components is a pre-set library with some picasso settings. The advantage is that you can use it with every framework, like React, Angular 6, Vue etc. It takes care of the connection and the rendering
• Qlik.js is only called if you set in the config the VizApi to true and you want to embed object from a Qvf
• Qdt-theme is not connected to Qdt-components, at least not yet
• What do you mean "Can we use qlik.js as a open source component with QDT ?".

• Angular 6: https://webapps.qlik.com/qdt-components/angular/index.html
• React 16: https://webapps.qlik.com/qdt-components/react/index.html
• Vue 2.5: https://webapps.qlik.com/qdt-components/vue/index.html

Best,

Yianni

[luishus14]

Hello

Great post! I am sure will be very helpful for the community.

I have a question about, How can we load data from qvds using Qlik Core?

Could you give me more information?

Thanks in advance.

Best regards

[Yianni_Ververis]

I would have the qvf read qvds, then an endpoint in your rest api server that reloads and saves the app

[luishus14]

Thanks so much. I will try it!

[alan_grn]

This is great. Is the source code available? Is there any plan to make it available?

It would be a good starter guide.