Qlik Community

Qlik GeoAnalytics Documents

Documents related to Qlik GeoAnalytics.

Adding a Sense chart into a Qlik GeoAnalytics map info bubble

Employee
Employee

Adding a Sense chart into a Qlik GeoAnalytics map info bubble

Sometimes it's neat to add a Sense chart into the popup of a layer, here's how to:

embedchart.png

1. Create a empty variable that will contain the id of the object that the diagram will be displayed for. This is done in the dialog that shows when you press the [x=] button at lower left in Sense.

Example: vCurrCity

2. Create the chart that will be displayed in the info bubble. Make the chart in the same app. The chart should use the variable to restrict the display to the object with the id that is in the variable.

Example expression: Sum({<City={'$(vCurrCity)'}>}[Sales Amount])

3. Find the id of the chart, using the Dev Hub->Single configurator (Object ID when right chart is selected )

4. In the layer that displays the objects that you want to present info for in the info bubble,  add script that sets the variable to the current id and that shows the chart in a div that should exist in the html.

Example html in info bubble:

'<div id="diagram1" style="background-color: white; position: relative; width: 400px; height: 400px;"></div>'&

'<script>var app = qlik.currApp(); app.variable.setStringValue("vCurrCity","'&City&'");app.getObject("diagram1","NQSFjMd",{noSelections: false});</script>'

1. Don't forget to uncheck "Format Numbers" in the Info Bubble properties, otherwise it might not work.

2. app.variable.setContent has been changed to :  app.variable.setStringValue in later versions.


Update

Check out isysdenis article on taking the concept one step further!

Extending features of GeoAnalytics map info bubble

Labels (1)
Comments
Partner
Partner

Just remember to add both fields "Latitude" and "Longtitude" under measures with no aggregation.

Without these 2 fields your bubbles will not show.

Under ID you will have for example "City" and together with Lat/Long and then have sum(sales) or any other aggregation you would like to show.

0 Likes
Employee
Employee

Thank you Patric. It's really great!

EmbeddedCharts.PNG

0 Likes
johannesbaer
Visitor II

Hi Patric! Thank you for sharing this nice Feature Is there a way to submit the values of multiple variables in the app.variable.setContent section of JavaScript?

I am using a line layer and my problem is that line A-B is directly above B-A and that results in filtering only objects that are situated on the above lying line A-B.

Now my idea is to give both lines A-B and B-A as variables in the calculating condition for the chart and JavaScript. How could this be achieved?

Alternatively, I would try to include 2 charts in the info bubble - but I would prefer to get the first idea working.

0 Likes
Employee
Employee

Hi Johannes,

I haven't tried but that sounds possible.

Btw, lines can be "curved" so that A-B and B-A don't overlap, should work in your case.

Line layer->Appearance->Line->Line curviness

Thanks,

Patric

0 Likes
fawazeez
Contributor II

Hi Patric,

I would like to add a button inside the bubble info which can call an WebApi and also take user to next sheet like navigation.nextSheet(). Navigation to next sheet is not happening. May be ng-click is not supported? Can you please provide some help on this.

'<script>qlik.navigation.nextSheet()</script>'

This works. I need this to happen on button click '<button id="btn" onclick="qlik.navigation.nextSheet()">Click me</button>'

Thanks

0 Likes
fawazeez
Contributor II

I got a way. we need to add Event listener to button from script

'<script type="text/javascript">' &

'var btnButton = document.getElementById("btnButton"); btnButton.addEventListener("click", function(e){qlik.navigation.nextSheet();});</script>'&

'<button id="btnButton" type="button" class="lui-button lui-button" >Acknowledge</button>  '&

crymarz1989
New Contributor

Love this! Thanks for sharing.

My chart shows when you hover over the area but the chart has a scroll bar and I can't work out a way to allow the user to scroll. Any suggestions welcome!

0 Likes
fawazeez
Contributor II

May be you can increase height of the div diagram1 :400px;

0 Likes
Employee
Employee

Hi Claire,

When hovering the user can't interact, but if the user makes a first click, the popup stays and selections and scrolling can be done.

Thanks,

Patric

0 Likes
crymarz1989
New Contributor

Brilliant! Thank you ☺

0 Likes
Version history
Revision #:
1 of 1
Last update:
‎2017-06-27 08:39 AM
Updated by: