topic Re: Include vis.js in custom visual causes error in Developer

Include vis.js in custom visual causes error

AMsDeveloper — Thu, 18 Jan 2018 19:24:53 GMT

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

Re: Include vis.js in custom visual causes error

v-viig — Fri, 19 Jan 2018 07:48:19 GMT

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

Re: Include vis.js in custom visual causes error

AMsDeveloper — Fri, 19 Jan 2018 08:29:02 GMT

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

Re: Include vis.js in custom visual causes error

v-chuncz-msft — Sat, 20 Jan 2018 03:29:08 GMT

@AMsDeveloper,

You may use a similar way mentioned in this thread.

Re: Include vis.js in custom visual causes error

AMsDeveloper — Mon, 22 Jan 2018 12:05:53 GMT

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

Re: Include vis.js in custom visual causes error

v-chuncz-msft — Tue, 23 Jan 2018 09:05:57 GMT

@AMsDeveloper,

Make sure you've restarted the server.

Re: Include vis.js in custom visual causes error

v-viig — Tue, 23 Jan 2018 10:26:59 GMT

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

load chart library in latest powerbi custom visual

Anonymous — Mon, 03 Jan 2022 13:37:52 GMT

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