Include vis.js in custom visual causes error

[AMsDeveloper]

Hi,

I created an empty custom visualization and added vis.js but as soon as I add the line

console.log(vis); 

The visualization does not work. The vis objects causes an error.  

Created project and added vis.js

- pbiviz new visualizationWithVis

- npm install vis --save

- npm install @types/vis --save

tsconfig.json:

"files": [

".api/v1.10.0/PowerBI-visuals.d.ts",

"node_modules/powerbi-visuals-utils-dataviewutils/lib/index.d.ts",

"node_modules/@types/vis/index.d.ts",

"src/settings.ts",

"src/visual.ts"

]

pbiviz.json:

"externalJS": [

"node_modules/powerbi-visuals-utils-dataviewutils/lib/index.js",

"node_modules/vis/dist/vis.min.js"

],

visual.ts

...

constructor(options: VisualConstructorOptions) {

console.log('Visual constructor', options);

console.log('Vis Object');

console.log(vis);              // Without this line the code runs. With this line I get an error. See screenshots

...

PS: I followed this tutorial: https://www.youtube.com/watch?v=fMDxGopxpjs&list=PL6z9i4iVbl8C2mtjFlH3ECb3q00eFDLAG&index=1 

[waseemabbas19]

I want to call the nivo react chart library in the powerbi react visual. I also have seen the documentation. there, they said, you can't call the external js file in the powerbi api 3.0. or above. Any of the way to use react chart library with the latest powerbi library. Thanks

[v-viig]

Looks like vis doesn't exist in the root scope.

Could you please share vis.min.js or entire project for futher debugging?

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

[AMsDeveloper]

Hello Ignat,

please find below the project in a zip file (I created it with npm, pbiviz new ... ). 

Thank you for you support.

Kind regards

Thomas 

Edit:

The first Screenshot is from Chrome

The last two are from Internet Explorer (dev tools looks different)

Project:

https://1drv.ms/f/s!AvUXU0wyp-zVoBOkkbzo42Sv8YbG

[v-chuncz-msft]

@AMsDeveloper,

You may use a similar way mentioned in this thread.

[AMsDeveloper]

Hello Ignat,

either the d3 v4 approach does not work with vis.js or I don’t understand it.

I added a separate file: initVendorLibraries.js (included it in pbiviz after the vis library) with the code:

var vis = window.vis;

but it did not work. The object is still undefined.

According to https://github.com/almende/vis/blob/master/package.json vis contains other libraries (which are also visible under node_modules in my project):

    "emitter-component": "^1.1.1",

    "moment": "^2.18.1",

    "propagating-hammerjs": "^1.4.6",

    "hammerjs": "^2.0.8",

    "keycharm": "^0.2.0"

do I have to use the approach on the other libraries as well?

Is there a Power BI visual that included already vis.js successfully? If yes, do you have a link?

Kind regards

[v-chuncz-msft]

@AMsDeveloper,

Make sure you've restarted the server.

[v-viig · Accepted solution]

Please follow these steps to make vis.js working:

• Create a new JS file in src folder
• Put the folllowing code in the new JS file

• var vis = window.vis || window.window.vis;

  Include the new file into externalJs property of pbiviz.json right after node_modules/vis/dist/vis.js.

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com