Kartobjekt för scatter plot med bilder i Qlik Sense

I Qlik Sense SaaS har precis möjligheten kommit att visa bilder i ett kartobjekt och detta är något som också kan användas för att skapa en enkel scatter plot med bilder. Genom att använda sig av olika lager kan grafen byggas upp. I detta inlägg går vi igenom hur man kan göra. Observera att i skrivande stund fungerar detta inte i on-prem-installationer.


Exempeldata

I denna guide ska vi använda oss av ett enkelt data set. Vi har 10 länder med två mätvärden, X och Y, som vi vill visa i en scatter plot. Hämta ner Excel-fil med data här.



Bilderna på flaggor som vi ska använda hämtar vi från GitHub där det finns en samling. Genom att byta ut landskoden i url:n kan vi styra vilken bild vi visar. Adressen till varje bild ser ut så här (det är "SE" på slutet som ska bytas till respektive landskod):

https://raw.githubusercontent.com/cristiroma/countries/master/data/flags/PNG-32/SE-32.png


För att det ska fungera att länka till externa bilder behöver vi lägga till domänen i godkända källor för media. Detta görs genom att lägga till domän i Content Security Policy inne Qlik Management Console (QMC). Detta steg kan bara utföras av någon som är administratör i miljön.


Gå till QMC och välj Content Security Policy. Klicka på Add-knappen och fyll i ett namn, domän och välj imc-src (bildkälla) i Directive. Klicka på spara-knappen.





Skapa en ny app

Börja med att skapa en ny app och läs in Excel-filen ovan på valfritt sätt. Den kan exempelvis läsas in genom att man drar och släpper filen på Qlik Sense-fönstret.


Kartobjekt

Qlik har en standardgraf för scatter plots där man kan skapa upp en sådan graf på några sekunder. Dock vill i detta fall använda ländernas flaggor som punkter i grafen och detta stödjs inte i standardobjektet. Istället ska vi använda ett kartobjekt och själv placera ut kartor, axlar, stödlinjer och annat.


Ett kartobjekt visar normalt en geografisk karta över världen eller en region. Qlik tolkar själv data som stadsnamn och länder för att placera ut lager med punkter, områden, linjer och liknande. Man kan också välja att använda sig av koordinater med latitud och longitud. Genom att använda ett kartobjekt där vi väljer att inte visa någon bakgrundskarta får vi en canvas att rita upp en graf på.


Dra ut ett kartobjekt på ett nytt ark. Gör följande inställningar:

  • Appearance, Legend, Show legend: Slå av

  • Appearance, Presentation, Scale bar: Slå av

  • Map Settings, Base Map: None (den helt vita)

  • Map Settings, Projection: User defined (meters)



Lager Y-axel

Vi börjar med ett lager för att visa ett rakt streck uppåt för Y-axeln. Generellt kommer vi att arbeta med koordinater utifrån ett origo i nedre vänstra hörnet. Koordinater anger vi som (3,5) där första värdet är X-värdet och det andra värdet är Y-värdet (X,Y). Y-värdet kommer i kartobjektet motsvara Latitude och X-värdet motsvarar Longitude.


Vår Y-axel ska börja i (0,0), men hur lång ska den vara? Vi vill att båda våra axlar blir lika långa och därför vill vi att den går till det högsta möjliga värdet av X och Y för alla länder.


Om det högsta värdet är till exempel 39 vill vi dock att grafen ska gå till 40. Därför gör vi en liten uträkning som avrundar axelns längd till närmsta över 10-tal. Om man har mycket höga värden blir dock 10-tal inte så bra. Då får man anpassa skalan alternativet använda antalet siffror i talet för att välja en lämplig avrundning. Vi kan titta på det mer i ett kommande inlägg.


Formeln för att räkna ut axelns höjd blir: ceil(rangemax(max(X),max(Y)),10)

Max() kommer att titta efter det högsta värdet av X respektive Y som finns i data för det aktuella urvalet. Rangemax() kommer att ta det högsta värdet av max(X) och max(Y). Ceil-funktionen avrundar upp talet till närmsta 10-tal.



Lägg till ett linjelager på kartobjektet och sätt följande inställningar:

  • Layers, Add layer

  • Select a layer type: Line layer

  • Data, Dimensions, Add: =1 (tryck sedan enter)

  • Data, Dimensions, Label: Y-axel (detta visas som namn på lagret i inställningarna)

  • Location, Start point: Latitude and longitude fields

  • Location, Start point, Latitude: 0

  • Location, Start point, Longitude: 0

  • Location, End point: Latitude and longitude fields

  • Location, End point, Latitude: ceil(rangemax(max(X),max(Y)),10)

  • Location, End point, Longitude: 0

  • Width & Style: Sätt två steg från minsta

  • Colors: Byt till mörkgrå


Om alla inställningar gjorts korrekt borde du nu se en vertikal linje mitt i objektet.


X-axel

Upprepa nu föregående steg med att skapa ett nytt linjelager och gör samma inställningar. Den enda skillnaden blir att koordinaterna denna gång ska motsvara en liggande linje.

  • Start Longitude: 0

  • Start Latitiude: 0

  • End Longitude: ceil(rangemax(max(X),max(Y)),10)

  • End Latitude: 0

Nu ska det finnas två axlar i objektet.



Flaggor

I detta lager ska vi placera ut kartorna med hjälp av deras X och Y-värden. Vi gör detta genom att skapa ett punktlager och