Qlik Community

Qlik Sense Integration, Extensions, & APIs

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

Announcements
Customers, Partners & Luminaries only: You're invited to a Data Analytics Roadmap session. Read More
cancel
Showing results for 
Search instead for 
Did you mean: 
Highlighted
Partner
Partner

Extension D3.js - Loading js files

Hi,

I'm working in an extension called "the slider" and it seems like I'm not being able to import the js files I want to use.

I want to work with a D3.js visualization that has this header:

  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.4/lodash.min.js"></script>
  <script src="https://unpkg.com/d3-simple-slider@0.1.2/build/d3-simple-slider.js"></script

If I download those three files and I place them in C:\Users\MyUser\Documents\Qlik\Sense\Extensions\theslider

How should my define look? It thought it would be

define(["jquery",

"text!./theslider.css",

"text!./d3.v4.min.js",

'text!./d3-simple-slider.js",

"text!./lodash.min.js"

],

function($, cssContent) {

'use strict';

$("<style>").html(cssContent).appendTo("head");

My code later fails when doing

     var slider = d3Slider.sliderHorizontal()

Seems to me that I'm not being able to load the resources correctly? Do you know why?

Thanks

3 Replies
Highlighted

‌Hi,

You should not use the text plugin for js files, and drop the file extension, so it should be ’./d3.v4.min’ etc.

You might also need to return the modules to your extension, so:

function($,cssContent,d3,d3slider)

Do you really need lodash?

Erik Wetterberg

https://extendingqlik.upper88.com/

Highlighted
Partner
Partner

Hi Erik,

Thanks for your response. I've tried what you said, but I still have errors (screenshot attached).

This is how my code starts:

define(["jquery",

"text!./theslider.css",

"./d3.v4.min",

"./d3-simple-slider",

"./d3"

],

function($, cssContent, d3, d3slider) {

'use strict';

$("<style>").html(cssContent).appendTo("head");

return {

initialProperties : {

version: 1.0,

qHyperCubeDef : {

qDimensions : [],

qMeasures : [],

qInitialDataFetch : [{

qWidth : 1,

qHeight : 1000

}]

}

},

Do you know what the errors mean by any chance?

Thanks muchScreenshot_d3js_errors.png

Highlighted

Hi,

Perhaps you should take a look at another extension that also uses d3, for example the WordCloud extension. It loads d3 plus an addon module in this file:

https://github.com/cleveranjos/br.com.clever.wordcloud/blob/master/extension/br.com.clever.wordcloud...

The relevant lines are:

define([
   "qlik",
   "jquery",
   "./d3.min",
   "./d3.layout.cloud",
   "./br.com.clever.wordcloud.support",
   "css!./styles.css"
], function (qlik, $, d3) {

It might depend on how the d3 addon is written if you can use the same solution in your extension.

Erik Wetterberg

https://extendingqlik.upper88.com/