Embedding Charts from Qlik app to a React Website using : Enigma JS & Nebula JS ( works for Qlik Client-managed )

[vishal_ravi]

Hey everyone, I figured out how to display charts and insights from a Qlik app on my React website using Enigma JS & Nebula JS. 

This will come in handy, especially if you're working with a client-managed setup, as embedded links and the Capability API support might be a bit lacking.

Now, here's the catch - this method works like a charm for Qlik's stack charts, but if you're jazzing up your charts with extensions like VizLib, you might hit a roadblock. Check out the supported chart types here.

First up, let's connect to your app with Enigma JS

1. Install Enigma JS:

   npm install enigma.js
   

2. Bring it into your file:

   import enigma from "enigma.js";
   import schema from "enigma.js/schemas/12.612.0.json";
   

3. Time to connect to your Qlik App:

   const session = enigma.create({
     schema,
     createSocket: (url) => {
       const socket = new WebSocket(url);
       socket.addEventListener("error", (event) => {
         setError(new Error("WebSocket error"));
         console.error("WebSocket error:", event);
       });
       return socket;
     },
     url: "<ADD THE APP URL HERE>",
   });
   
   const global = await session.open();
   const app = await global.openDoc("<ADD THE DOC ID HERE>");
   

Moving on to Nebula JS for chart renderings:

1. Install Nebula JS:

   npm install @nebula.js/stardust
   

2. Bring in the "embed" function:

   import { embed } from "@nebula.js/stardust";
   

3. Let's dive into a Pie Chart:

   a. Get the sn-pie-chart:

   npm i @nebula.js/sn-pie-chart
   

   b. Import it:

   import snPieChart from "@nebula.js/sn-pie-chart";
   

   c. Now, time to put that pie chart on display:

   const pieChartNebula = embed(app, {
     types: [
       {
         name: "piechart",
         load: () => Promise.resolve(snPieChart),
       },
     ],
   });
   
   pieChartNebula.render({
     element: document.getElementById("pie-chart"),
     id: "<ADD THE PIE CHART'S OBJECT ID>",
   });
   

I wouldn't exactly call this the top-notch method. If you happen to have any other ideas that might work better, I'd be super grateful if you could share them with me!

To know more about Nebula JS APIs - https://qlik.dev/apis/javascript/nebula-js/ 

Connect with Me
  

[alex_colombo]

Hey @vishal_ravi , I'm not understanding what is the issue, but if you are embedding Qlik charts from Qlik SaaS, please have a look to qlik-embed where you can embed all the native charts.

[vishal_ravi]

Hey @alex_colombo , indeed, qlik-embed is a solid choice. You can also access its dedicated documentation for client management ( here ). However, I encountered a hurdle with qlik-embed due to insufficient information—I couldn't locate the data-host and data-login-uri.

Additionally, when I attempted to integrate it into my React.js website and ran it on localhost, I encountered an error stating, 'Third-party cookie will be blocked. Learn more in the Issues tab.'

If anyone plans to explore this further, feel free to check out the docs that I referred:
Connect qlik-embed web components to Qlik | Qlik Developer Portal 
Discovering qlik-embed: Qlik’s new library for Emb... - Qlik Community - 2141202   ( This one shows how you can implement it with react JS )

If anyone has managed to successfully implement qlik-embed on a client-managed setup using React JS, please share your experience in the comments below.

[alex_colombo]

Hey @vishal_ravi we know there are issues with qlik-embed an CM version. I also know that we have released some fixes on qlik-embed on the latest CM release (May 2024). Please have a look and if you see any issues please file a support case on our support portal.

[jroc26]

Hi - I am trying to get the same thing working and haven't had any luck.  Were you able to get this working?