Qlik Community

Qlik Sense Integration, Extensions, & APIs

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

Announcements
See why BI users voted Qlik #1 in 11 categories. GET REPORT
cancel
Showing results for 
Search instead for 
Did you mean: 
Highlighted
Contributor III
Contributor III

Loading d3.js as a dependency into my Extension

Hi

I'm simply trying to load d3 into a Qlik Sense extension and running into issues, hoping someone can help as I'm sure it's relatively simple.

My template.html looks like this:

<div qv-extension style="height: 100%; position: relative; overflow: auto;" class="ng-scope">

    {{ html }}

    <div class="mydiv">

    </div>

</div>


My javascript code looks like the below:

define( ["qlik",

        "jquery",

        "text!./style.css",

        "text!./template.html",

        "./d3/d3",

    ],

    function (qlik, $, cssContent, template ) {'use strict';

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

    return {

   template: template,

   initialProperties : {

            qHyperCubeDef : {

                qDimensions : [],

                qMeasures : [],

                qInitialDataFetch : [{

                    qWidth : 10,

                    qHeight : 500

                }]

            }

        },

        definition : {

            type : "items",

            component : "accordion",

            items : {

                dimensions : {

                    uses : "dimensions",

                    min : 0

                },

                measures : {

                    uses : "measures",

                    min : 0

                },

                sorting : {

                    uses : "sorting"

                },

                settings : {

                    uses : "settings",

                    items : {

                        initFetchRows : {

                            ref : "qHyperCubeDef.qInitialDataFetch.0.qHeight",

                            label : "Initial fetch rows",

                            type : "number",

                            defaultValue : 500

                        }

                    }

                }

            }

        },

        support : {

            snapshot: true,

            export: true,

            exportData : true

        },

        paint: function ( ) {

            console.log("painting...");


            var svg = d3.select(".mydiv")

            .append("svg")

            .attr("width", width)

            .attr("height", height);


        },

        controller: ['$scope', function (/*$scope*/) {

        }]

    };


} );

and the error i get in the dev tools look like this: [SEE ATTACHMENT]

My folder structure is: [SEE ATTACHMENT]

What am I doing wrong? Why can't it see the d3 file?

thanks,

James.

1 Solution

Accepted Solutions
Highlighted

Hi,

Try adding d3 as an argument to your function:

function (qlik, $, cssContent, template , d3)

Hope this helps

Erik Wetterberg

View solution in original post

2 Replies
Highlighted

Hi,

Try adding d3 as an argument to your function:

function (qlik, $, cssContent, template , d3)

Hope this helps

Erik Wetterberg

View solution in original post

Highlighted
Contributor III
Contributor III

Oh my word, thank you Erik for your sunday time! Fixed