0

I am trying to create an Org chart using Jquery like the below link in LWC

https://www.jqueryscript.net/demo/Create-An-Editable-Organization-Chart-with-jQuery-orgChart-Plugin/

I am able to get all the scripts loaded in LWC , but the chart is not visible

below is my

HTML

<template>
    <div class="orgChartContainer">
        Test
        <div class="orgChart"></div>
    </div>
</template>

JS

import { LightningElement } from 'lwc';
import { loadScript, loadStyle } from 'lightning/platformResourceLoader';
import orgChart from '@salesforce/resourceUrl/jOrgchart';
import orgChartss from '@salesforce/resourceUrl/JOrgCss';
import jOrgjs from '@salesforce/resourceUrl/jOrgjs';

export default class Dorgchart extends LightningElement {
    error;
    chart;
    initialized = false;

    connectedCallback() {
        Promise.all([loadScript(this, orgChart).then(() => {
            console.log("jQuery loaded."),
                loadStyle(this, orgChartss).then(() => {
                    console.log("Orgchart css loaded"),
                        loadScript(this, jOrgjs).then(() => {
                            console.log("jQuery Org loaded.")
                            this.callChart();
                        }).catch(b => {
                            console.log("jQuery Org  not loaded.")
                        })
                }).catch(a => {
                    console.log("JQuery was not loaded. error is " + a)
                })
        }).catch(a => {
            console.log("jQuery loading was failed.")
        })])
    }

    callChart() {

        var testData = [
            { id: 1, name: 'My Organization', parent: 0 },
            { id: 2, name: 'CEO Office', parent: 1 },
            { id: 3, name: 'Division 1', parent: 1 },
            { id: 4, name: 'Division 2', parent: 1 },
            { id: 6, name: 'Division 3', parent: 1 },
            { id: 7, name: 'Division 4', parent: 1 },
            { id: 8, name: 'Division 5', parent: 1 },
            { id: 5, name: 'Sub Division', parent: 3 },

        ];
        $(function () {
            var org_chart = $('#orgChart').orgChart({
                data: testData,
                showControls: true,
                allowEdit: true,
                onAddNode: function (node) {
                    log('Created new node on node ' + node.data.id);
                    org_chart.newNode(node.data.id);
                },
                onDeleteNode: function (node) {
                    log('Deleted node ' + node.data.id);
                    org_chart.deleteNode(node.data.id);
                },
                onClickNode: function (node) {
                    log('Clicked node ' + node.data.id);
                }

            });
        });
    }
}

enter image description here

8
  • did you inspect the page to make sure the chart is inserted in the DOM? could it be a height issue?
    – glls
    Jul 1 at 12:50
  • i have attached a screenshot .. i have tried increasing the height , but no luck . i am also seeing some css error in console Jul 1 at 12:55
  • please inspect the DOM
    – glls
    Jul 1 at 12:55
  • checked .. didnt find anything.. Jul 1 at 13:03
  • are you sure that $('#orgChart') is properly getting the element you are expecting it to?
    – glls
    Jul 1 at 13:17
0

There are several things you need to review in your code.

For starters, you need to Access Elements the Component Owns by using template.querySelector , secondly, you need to read how to Use Third-Party JavaScript Libraries and use the lwc:dom="manual" directive in order to be able to append dom to an element.

Additionally, I would recommend avoiding using Jquery to access the DOM.

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.