Qlik Community

Ask a Question

Qlik Design Blog

All about product and Qlik solutions: scripting, data modeling, visual design, extensions, best practices, etc.

Announcements
Qlik Highlights 2020 Giveaway! Watch, reply and have a chance to win a $200 Amazon Gift Card! Watch Video
Employee
Employee

If you are new to this community and you are interested in putting together web pages that will serve as dashboards based on your Qlik Sense charts, then let me start with a brief introduction.

If you are aware of the library and have read my previous post “Using Nebula.js with React.js or in Simple html pages”, then you can skip it and go straight to the framework of your choice.

 

Introduction

Nebula.js is an open source “collection of JavaScript libraries, visualizations, and CLIs that helps developers build and integrate visualizations on top of Qlik's Associative Engine”.

It connects to all of our available Qlik Sense products, including the Qlik hosted, Qlik Sense Business and Qlik Sense Enterprise for SaaS.

 

You can find documentation and how to get started here

https://qlik.dev/libraries-and-tools/nebulajs.

 

There are also some tutorials like

- https://qlik.dev/tutorials/build-a-helloworld-extension-using-nebulajs

- https://qlik.dev/tutorials/build-a-simple-mashup-using-nebulajs

- https://qlik.dev/tutorials/build-a-simple-web-app

 

Angular

Today I will show you a template that I put together that uses the Angular 10 framework and some of the available Picasso charts.

The template can be found here https://github.com/yianni-ververis/nebula-angular.

 

From bash, powershell or any other cli interface start by

- Downloading the repository 

 

git clone git@github.com:yianni-ververis/nebula-angular.git

 

 

- Add your Qlik Sense url, appId and/or the webIntegrationId if you are building against the Qlik Hosted, Qlik Sense Business and Qlik Sense Enterprise for SaaS, in the src/app/globals.ts

- Install the appropriate packages by running 

 

npm install

 

 

- Change the dimensions and measures in the charts. You can start by changing the dimension and measure fields in the Barchart at scr/app/barchart/barchart.component.ts, Lines 25 and 28. The ones in the template are from the Helpdesk app.

 

Svelte

Here, is a Svelte.js starter repo with of the available Nebula charts

The template can be found here https://github.com/yianni-ververis/nebula-svelte

 

From bash, powershell or any other cli interface start by

- Downloading the repository 

 

git clone git@github.com:yianni-ververis/nebula-svelte.git

 

 

- Add your Qlik Sense url, appId and/or the webIntegrationId if you are building against the Qlik Hosted, Qlik Sense Business and Qlik Sense Enterprise for SaaS, in the src/components/stores.js

- Install the appropriate packages by running

 

npm install

 

 

- Change the dimensions and measures in the charts. You can start by changing the dimension and measure fields in the Barchart at scr/containers/BarChart.svelte, Lines 15 and 18. The ones in the template are from the Helpdesk app.

 

barchart.pngfunnelchart.pnglinechart.pngmekkochart.pngpiechart.pngsankeychart.png

1 Comment
Contributor II
Contributor II

Hi Yianni, 

Great to see svelte on the list!

Ryan Arpe 

408 Views