Qlik Community

Ask a Question

Integration, Extension & APIs

Discussion board where members can learn more about Integration, Extensions and API’s for Qlik Sense.

Announcements
LINKEDIN LIVE: Democratizing data to enhance customer-centricity. JULY 29TH REGISTER TODAY
cancel
Showing results for 
Search instead for 
Did you mean: 
ChrisSL
Partner
Partner

Qlik Sense Visualization API - KPI

Hi,

For proprietary reasons, I am trying to load KPI charts from an existing Qlik App, using the Visualization API and showing it in an Angular cli (11) application.   

The KPI loads properly. But for some reason, when I try to set options, they don't seem to work for most of them. 

Before going any further, loading the chart with the iframe embbed link works ok.  but that's not what I am looking for, as I need to implement custom behaviors on the parent div, and this way of loading Qlik objects hijacks the mouse events. On top of that I need to load and display like 12 of those, and would rather have one spinner than 12. 

Anyway;

Given the code below:

 

app.visualization.get('PWpCcm').then((vis) => {
   vis.setOptions({
       showTitles: false,
       showMeasureTitle: true,
       disableNavMenu: true,
       textAlign: "center",
       layoutBehavior: 'Responsive'
   })
   vis.show('QV01');
})

 

 

First, the chart type appears all the time ('KPI').  The measure title does not appear.  'No title' appear even though showTitles is false,  Text is not centered, and it is not responsive. 

The label for sheet navigation is always present also.  

I would have assumed that calling an existing object would have applied all the settings that this object have in the Qlik App.

Screen Shot 2021-03-30 at 12.26.17 PM.png

Notes: 

I have tried creating a KPI on the fly, with the measure, same result.

I have treated the setOptions like a promise, same result. 

 The KPI chart has a master measure applied to it ( in the Qlik app). 

 

Is there something I am not getting?   or am I doing something wrong?

Thanks.

Labels (3)
1 Solution

Accepted Solutions
ChrisSL
Partner
Partner
Author

I think I just answered myself. 

I needed to include the qlik-styles.css in the <head>

 

resources/autogenerated/qlik-styles.css

now I see what I expected.

 

 

View solution in original post

1 Reply
ChrisSL
Partner
Partner
Author

I think I just answered myself. 

I needed to include the qlik-styles.css in the <head>

 

resources/autogenerated/qlik-styles.css

now I see what I expected.

 

 

View solution in original post