Sentimentul Qlik creează o extensie folosind d3, date-zilnic

După ce ați citit, vă promit că în doar 10 minute veți putea crea propria extensie. Greu de învățat, ușor de luptat! În bătălie, prieteni!

Extinde QlikSense: 4 pași pentru crearea

1) Noi scriem o vizualizare d3.

2) Obțineți date de testare pentru lucru și descărcați în Qlik Sense.

3) Lansăm o nouă extensie și facem setările necesare pentru parametri.

4) Introduceți codul d3 în extensie și schimbați sursa de date de la extensie.

Ca rezultat, obținem următoarea vizualizare:

Deci, dragi! Să începem!

Graficul nostru este creat de două valori și culoarea este determinată pe baza măsurătorilor. Qlik Sense are o vizualizare încorporată cu o singură dimensiune, dar în mod implicit nu există o a doua dimensiune, care vă permite să grupați punctele după culori. Biblioteca de soluții d3 ne va ajuta în acest sens.

Când deschideți sursa de date, veți vedea două fișiere: fișierul html cu grafic și fișierul .tsv care conține datele. Vom folosi bucăți de cod din fișierul html și Qlik Sense, în loc de fișierul tsv.

Când suntem gata să folosim d3, vom reveni la acest pas. Acum mergem mai departe.

Obținem datele de testare și le încărcăm în QlikSense

Cele două valori ale mele sunt procentajul de obezitate și speranța de viață așteptată la vârsta de 60 de ani. Măsurarea va fi fiecare țară. Ca culoare, alegem grupul de dezvoltare a țării.

De asemenea, am șters rândurile în care s-au ignorat datele.

Salvați datele în directorul unde puteți descărca datele.

Crearea unei noi aplicații în QlikSense

Primul lucru pe care trebuie să-l facem este să creați o nouă aplicație QlikSense.

Deschideți Qlik Sense. Veți vedea un hub. Alegeți "Creați o nouă aplicație" în colțul din dreapta sus.

Dați aplicației dvs. un nume și apoi faceți clic pe acesta pentru al deschide.

Modificați scriptul de descărcare și încărcați datele

În partea stângă, veți vedea un panou care controlează încărcarea scriptului în diferite file. Fila principală este configurația variabilelor. Nu trebuie să le schimbăm. Faceți clic pe "+" pentru a crea o filă nouă. Denumiți fila.

Fila de scripting goală va fi acum vizibilă în partea dreaptă.

Pentru a genera scriptul de descărcare, trebuie să stabilim o conexiune la directorul unde vom descărca datele. În partea dreaptă a zonei de scripting, faceți clic pe "Creați conexiunea". Selectați directorul în care este salvat fișierul CSV (atribuiți un nume și faceți clic pe Salvați).

Acum putem încărca datele în aplicația noastră făcând clic pe butonul "Descărcați datele" din colțul din dreapta sus.

Porniți o extensie nouă și configurați setările

Acum avem date gata pentru testare și putem configura cadrul pentru extensia noastră. În loc să scriem codul, vom folosi soluția gata de utilizare Qlik Sense și vom schimba codul pentru scopurile noastre.

Mergem la directorul de extensii. Directorul implicit este localizat în calea My Documents \ Qlik \ Sense \ Extensions. Duplicați extensia "SimpleTable".

Rulați extensia

Duplicați extensia "SimpleTable" și numiți-o "TwoDimScatter". Apoi deschideți directorul. Veți vedea următoarele fișiere:

Actualizați toate numele de fișiere, cu excepția wbfolder.wbl la "twodimscatter". De exemplu, "com-qliktech-simpletable.js" va deveni "twodimscatter.js".

De asemenea, trebuie să adăugăm d3.min.js la acest director, care ne permite să folosim biblioteca D3. Ultima versiune este legată de secțiunea Resurse. Ca rezultat, obțineți următoarea structură de fișier:

Extensia de configurare a fișierelor

Configurați fișierul JS

caracteristicile

În prima linie, definit () determinant este scris, care atribuie ordinea de boot, și apoi pornește funcția după încărcare. Define () face parte din API-ul AMD și este disponibil pentru noi din extensia noastră, deoarece Qlik Sense utilizează RequireJS.

Schimbați fișierul: jQuery, css și fișierul nostru d3.min.js.

Acum, codul de extensie va descărca mai întâi aceste fișiere înainte de a face orice altceva.

PENTRU NOTIFICARE! Qlik Sense funcționează cu jQuery, deci nu este necesar să salvăm copii locale ale extensiei.

Setări și definiții

După ce am lucrat cu toate fișierele de care avem nevoie, modificăm setările și definițiile extensiei noastre. Ele determină cantitatea de date primite și determină câte dimensiuni și expresii aveți nevoie pentru a rula extensia.

În acest fișier, de la început veți vedea acest cod:

Funcția de desenare

Ultima dintre setările noastre funcționează cu funcția desen. Această funcție este conectată de fiecare dată când vizualizarea se modifică. De exemplu, filtrarea datelor în Qlik Sense numește funcția de redirecționare a vizualizării. În scopurile noastre, facem astfel de schimbări:

1) modificați funcția în două moduri: $ și layout

3) desemnați aceste două elemente pentru a le putea vedea conținutul

Să facem o pauză de la codificarea expansiunii și să vedem cum funcționează. De asemenea, ne putem uita la obiectele pe care le-am adus la consola.

Dați foii un nume și deschideți-l. Acesta va fi inițial gol. În colțul din dreapta sus, faceți clic pe butonul "Editați" pentru a intra în modul de editare. În partea stângă a paginii, există un panou în care puteți selecta graficele pe care le vom adăuga. Mergeți la diagrama de dispersie bidimensională și trageți-o în tabloul de bord.

După adăugarea unei diagrame, Qlik vă va oferi posibilitatea de a adăuga măsurătorile și măsurile. Adăugați "Nivel de dezvoltare" ca prima dimensiune și "Țară" ca a doua dimensiune. Pentru măsuri, va trebui să selectăm un câmp pentru a determina ce va fi calculat în acesta.

Alegeți "Obezitatea%" și "Speranța de viață la vârsta de 60 de ani" pentru măsuri. Pentru funcții, se pot utiliza "Sum" sau "AVG". Deoarece aceste valori sunt scrise la nivel de țară, vom însuma valorile unitare. Vă sugerăm să utilizați funcția AVG pentru a reveni la valoarea corectă dacă aceasta merge mai adânc în date.

După ce dimensiunile și măsurile sunt adăugate, putem personaliza etichetele și etichetele. În panoul din partea dreaptă, dați clic pe titlul dimensiunii pentru a extinde panoul. Fiecare măsură trebuie indicată.

Deschideți Instrumentele pentru dezvoltatori (îl puteți deschide prin Ctrl + Shift + faceți clic dreapta pe pagină) și selectați "Afișați unelte pentru dezvoltatori".

Introduceți și modificați codul D3

Lucrăm cu datele și blocul div

Primul lucru pe care trebuie să-l facem este să extrageți informații utile din extensia noastră. Avem nevoie de date pentru a specifica lățimea și înălțimea obiectului și id-ul unic al diagramei noastre. Un identificator unic este util atunci când creăm un element DOM nou.

var qMatrix = layout.qHyperCube.qDataPages [0]; qMatrix;

// creați un nou tablou care conține etichetele măsurate

var measureLabels = layout.qHyperCube.qMeasureInfo.map (funcția (d)

// Creați o nouă matrice pentru extensia noastră cu un rând pentru fiecare rând din qMatrix

var data = qMatrix.map (funcția (d)

// pentru fiecare element din matrice, creați un obiect nou care are o proprietate

// pentru dimensiunea grupării, prima valoare și a doua valoare

// Latimea obiectului grafic

var lățime = $ element.width ();

// Înălțimea obiectului diagramă

var înălțime = $ element.height ();

// Identificarea obiectului diagramă

var id = "container_" + layout.qInfo.qId;

// Verificați dacă elementul grafic a fost deja creat

// dacă a fost creat, goliți-i conținutul, astfel încât să îl putem reprograma

// dacă nu a fost creat, creați-l cu id-ul și mărimea corespunzătoare

$ element.append ($ ('