Adding a static js script to a custom visualization

[AF]

Hi,

I have followed the instructions on this page: https://github.com/Microsoft/PowerBI-visuals/blob/master/Tutorial/ExternalLibraries.md, i.e.:

* Created a folder external in the viz. folder (same level as e.g. src and style).

* Copied my wanted library to this new folder (./external/d3.v4.min.js).

* Added the corresponding line to tsconfig.json, resulting in

{
  "compilerOptions": {
    "allowJs": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "ES5",
    "sourceMap": true,
    "out": "./.tmp/build/visual.js"
  },
  "files": [
    ".api/v1.3.0/PowerBI-visuals.d.ts",
    "src/visual.ts",
    "external/d3.v4.min.js"
  ]
}

However, I still get the compilation error "Cannot find name `d3`".

I don't want to use npm or typings (and as I understand from  https://github.com/Microsoft/PowerBI-visuals/blob/master/Tutorial/ExternalLibraries.md that should not be necessary for loading external libraries).

What am I missing? Do I have to load it explicitly in src/visual.ts in some way?

Thanks!

[Anonymous]

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-chuncz-msft · Accepted solution]

@AF,

Based on my test, you could add a let statement as shown below.

let d3 = (<any>window).d3;

[AF]

Thanks, that worked perfectly!

[tylersbrown01]

Update (12.27.2017) you now declare external libraries in "externalJS" section of pbiviz.json

[v-viig]

Yeah, that's correct.

JavaScript code must be included into externalJS property of pbiviz.json.

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

[email protected]