Forum Discussion

AMsDeveloper's avatar
AMsDeveloper
Frequent Visitor
8 years ago
Solved

Include vis.js in custom visual causes error

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 ...
Need Help
  • v-viig's avatar
    v-viig
    8 years ago

    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

    [email protected]

v-viig's avatar
v-viig
Community Champion
8 years ago

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

[email protected]

 

AMsDeveloper's avatar
AMsDeveloper
Frequent Visitor
8 years ago

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

 

 

    • AMsDeveloper's avatar
      AMsDeveloper
      Frequent Visitor
      8 years ago

      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