Create a Pie Chart popup from an external source

Popups inside of QlikMaps should be thought of as web pages. Therefore, we can use an external charting engine to visualize data from inside of QlikView.

In the example below, Google's charting engine is used to produce a Pie Chart in a popup.

Create a Marker or Polygone/Line map

The popup is created inside of an existing map object. Create an object as normal.

Edit the Popup Content expression

The Google chart API has been depricated but there is no determined end of life for charts. However, the main editor from Google has been discontinued.

To avoid scripting a chart expression completely by hand, go to http://www.jonwinstanley.com/charts/ to generate the code for a given chart.

 

 

Edit the HTML Image Tag

The syntax of the HTML Image Tag must be updated so that Qlik Sense can insert data from the data model.

There are a few things to take notice of:

  • The opening and closing Single Quotes are necessary to have Sense interpret the expression as a string.
  • The two single quotes before the < and after the > are necessary to have Sense interpret the string as a complete expression and not many smaller expressions.
  • Anywhere a transition is made from hard coded string values to Sense expressions or field names, the transition must be made with an & similiarly to any other transition of the same kind in other other Sense objects.
'
''<img src="http://chart.apis.google.com/chart' &
'?chs=300x200' & // chart size = 300x200 pixels
'&cht=p' & // chart type = 2 dimensional pie chart
'&chds=0,' * max(Receipts) & // max
'&chco=FD8D3C,BAF5B8,08306B' &// Colors for Pie Charts slices
'&chtt=Receipts by Quarter' &
'&chd=t:' & // values for each pie slices
sum(Q1) & ',' &
sum(Q2) & ',' &
sum(Q3) & 
'&chl=Q1|Q2|Q3' & // labels for each pie slice
'&chdlp=b' &
'"/>''
'

The final result can be seen in the image below or by opening the QlikMaps Examples application on the download site.

 

&nbsp;