1

I'm trying to display a basic visualization in LWC using vis-network.js.

The example I'm trying is here

Here is my code.

Component.html:

<template>
  <lightning-card title="Sand Samples" icon-name="utility:start">
    <div class="slds-grid slds-wrap slds-grid--pull-padded">
      <div class="myTestClass" lwc:dom="manual"></div>
    </div>
  </lightning-card>
</template>

Component.js

import {
    LightningElement,
    track
} from 'lwc';
import SL from '@salesforce/resourceUrl/vis';
import {
    loadStyle,
    loadScript
} from 'lightning/platformResourceLoader';
import {
    ShowToastEvent
} from 'lightning/platformShowToastEvent';


export default class TestLoadGraphics extends LightningElement {
    network;

    renderedCallback() {

        Promise.all([
            loadScript(this, SL + '/vis-network.min.js'),
            loadStyle(this, SL + '/vis-network.min.css')
        ]).then(success => {
            var container = this.template.querySelector('.myTestClass');
            // create an array with nodes

            var nodes = new vis.DataSet([{
                    id: 1,
                    label: 'Node 1'
                },
                {
                    id: 2,
                    label: 'Node 2'
                },
                {
                    id: 3,
                    label: 'Node 3'
                },
                {
                    id: 4,
                    label: 'Node 4'
                },
                {
                    id: 5,
                    label: 'Node 5'
                }
            ]);

            // create an array with edges
            var edges = new vis.DataSet([{
                    from: 1,
                    to: 3
                },
                {
                    from: 1,
                    to: 2
                },
                {
                    from: 2,
                    to: 4
                },
                {
                    from: 2,
                    to: 5
                },
                {
                    from: 3,
                    to: 3
                }
            ]);
            var data = {
                nodes: nodes,
                edges: edges
            };
            var options = {};


            this.network = new vis.Network(container, data, options);
            // console.log(network);


        }).catch(error => {
            console.log(error);
            this.dispatchEvent(
                new ShowToastEvent({
                    title: 'Error loading ChartJS',
                    message: 'error.message',
                    variant: 'error',
                }),
            );
        })
    }

}

when I run this I get the output as

enter image description here

Though I have the same code used here, I am unable to show the nodes. It's pretty confusing. Please let me know where am I going wrong.

Thanks

1

Unfortunately, most third-party libraries aren't 'Lightning Locker' compatible, and will need some modification before you can use them.

There used to be a non-exhaustive list of compatible libraries knocking around, but I'm failing to find it. This page has a few examples though, such as jQuery, moment, Chart.js etc.

2
  • Hey Dan thanks for the quick response. I was wondering, if the issue is with Locker service restrictions. Even the edges should not be loading but here in this case, only the nodes seem missing. – user3872094 Mar 2 '20 at 14:56
  • I believe this might be because libraries aren't accepted/ rejected in a boolean manner. Some parts might be behaving as Salesforce likes, and others might be 'misbehaving'. Sorry that I can't provide greater detail - I'm far from an accomplished JS dev and don't fully understand all this 'shadow DOM', must be 'strict' stuff that applies here. – Dan Wareing Mar 2 '20 at 17:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.