Options
All
  • Public
  • Public/Protected
  • All
Menu

Hierarchy

Index

Constructors

  • Parameters

    • element: string | HTMLElement

      HTML element or string selector for example '#tree'

    • Optional options: options

      configuration options

    Returns OrgChart

Properties

config: options
editUI: editUI
element: HTMLElement
filterUI: filterUI
isVisible: boolean
menuUI: menuUI
nodeCircleMenuUI: circleMenuUI
nodeContextMenuUI: menuUI
nodeMenuUI: menuUI
nodes: {}

Type declaration

    searchUI: searchUI
    toolbarUI: toolbarUI
    visibleNodeIds: (string | number)[]
    ARRAY_FIELDS: string[]
    CSV_DELIMITER: string

    Csv import and export delimiter/separator

    EDITFORM_CLOSE_BTN: string
    ESCAPE_HTML: boolean

    Escape HTML to prevent Cross-site scripting (also known as XSS) attacks

    HIDE_EDIT_FORM_ON_PAN: boolean

    Hides the Edit Form when the chart is moved with pan

    LAZY_LOADING: boolean

    Can be used to instruct the browser to defer loading of OrgChart that are off-screen until the user scrolls near them. The init event listener will be called as soon as the OrgChart become visible.

    SEARCH_CLOSE_RESULT_ON_ESCAPE_OR_CLICKOUTSIDE: boolean

    Close search result list by click outside list and clean search input

    SEARCH_HELP_SYMBOL: string

    Search help symbol.

    SEARCH_PLACEHOLDER: string

    Search placeholder

    VERSION: string
    VERTICAL_CHILDREN_ASSISTANT: boolean

    Align children of assistant vertically

    attr: any
    clinkTemplates: {}

    Type declaration

    elements: any
    events: { on: any }

    Type declaration

    • on:function
      • on(type: "node-created" | "layout", listener: (args: any, args1: any, args2: any) => void): void
      • node-created and layout event listeners are obsolete use node-initialized or node-layout instead

        Parameters

        • type: "node-created" | "layout"
        • listener: (args: any, args1: any, args2: any) => void
            • (args: any, args1: any, args2: any): void
            • Parameters

              • args: any
              • args1: any
              • args2: any

              Returns void

        Returns void

    expcollOpenTag: any
    grCloseTag: any
    icon: { add: any; csv: any; details: any; edit: any; excel: any; happy: any; link: any; pdf: any; png: any; remove: any; sad: any; share: any; svg: any; user: any; xml: any }

    Type declaration

    • add:function
      • add(w: string | number, h: string | number, c: string | number): string
      • Parameters

        • w: string | number
        • h: string | number
        • c: string | number

        Returns string

    • csv:function
      • csv(w: string | number, h: string | number, c: string | number): string
      • Parameters

        • w: string | number
        • h: string | number
        • c: string | number

        Returns string

    • details:function
      • details(w: string | number, h: string | number, c: string | number): string
      • Parameters

        • w: string | number
        • h: string | number
        • c: string | number

        Returns string

    • edit:function
      • edit(w: string | number, h: string | number, c: string | number): string
      • Parameters

        • w: string | number
        • h: string | number
        • c: string | number

        Returns string

    • excel:function
      • excel(w: string | number, h: string | number, c: string | number): string
      • Parameters

        • w: string | number
        • h: string | number
        • c: string | number

        Returns string

    • happy:function
      • happy(w: string | number, h: string | number, c: string | number): string
      • Parameters

        • w: string | number
        • h: string | number
        • c: string | number

        Returns string

    • link:function
      • link(w: string | number, h: string | number, c: string | number): string
      • Parameters

        • w: string | number
        • h: string | number
        • c: string | number

        Returns string

    • pdf:function
      • pdf(w: string | number, h: string | number, c: string): string
      • Parameters

        • w: string | number
        • h: string | number
        • c: string

        Returns string

    • png:function
      • png(w: string | number, h: string | number, c: string): string
      • Parameters

        • w: string | number
        • h: string | number
        • c: string

        Returns string

    • remove:function
      • remove(w: string | number, h: string | number, c: string | number): string
      • Parameters

        • w: string | number
        • h: string | number
        • c: string | number

        Returns string

    • sad:function
      • sad(w: string | number, h: string | number, c: string | number): string
      • Parameters

        • w: string | number
        • h: string | number
        • c: string | number

        Returns string

    • share:function
      • share(w: string | number, h: string | number, c: string | number, x?: string | number, y?: string | number): string
      • Parameters

        • w: string | number
        • h: string | number
        • c: string | number
        • Optional x: string | number
        • Optional y: string | number

        Returns string

    • svg:function
      • svg(w: string | number, h: string | number, c: string | number): string
      • Parameters

        • w: string | number
        • h: string | number
        • c: string | number

        Returns string

    • user:function
      • user(w: string | number, h: string | number, c: string | number, x?: string | number, y?: string | number): string
      • Parameters

        • w: string | number
        • h: string | number
        • c: string | number
        • Optional x: string | number
        • Optional y: string | number

        Returns string

    • xml:function
      • xml(w: string | number, h: string | number, c: string | number): string
      • Parameters

        • w: string | number
        • h: string | number
        • c: string | number

        Returns string

    loading: { hide: any; show: any }

    Shows/hides lloading image. Usefull when export large data to pdf. You can override and show your own loading image.

    Type declaration

    scroll: { chrome?: { smooth?: number; speed?: number }; edge?: { smooth?: number; speed?: number }; firefox?: { smooth?: number; speed?: number }; opera?: { smooth?: number; speed?: number }; safari?: { smooth?: number; speed?: number }; smooth?: number; speed?: number; visible?: boolean }

    Type declaration

    • Optional chrome?: { smooth?: number; speed?: number }
      • Optional smooth?: number
      • Optional speed?: number
    • Optional edge?: { smooth?: number; speed?: number }
      • Optional smooth?: number
      • Optional speed?: number
    • Optional firefox?: { smooth?: number; speed?: number }
      • Optional smooth?: number
      • Optional speed?: number
    • Optional opera?: { smooth?: number; speed?: number }
      • Optional smooth?: number
      • Optional speed?: number
    • Optional safari?: { smooth?: number; speed?: number }
      • Optional smooth?: number
      • Optional speed?: number
    • Optional smooth?: number
    • Optional speed?: number
    • Optional visible?: boolean
    slinkTemplates: {}

    Type declaration

    state: { clear: any }

    Type declaration

    • clear:function
      • clear(stateName: string): void
      • Parameters

        • stateName: string

        Returns void

    templates: {}

    Type declaration

    upOpenTag: any

    Event Listeners Methods

    • on(type: "init" | "field" | "update" | "add" | "remove" | "renderbuttons" | "label" | "render-link" | "drag" | "drop" | "redraw" | "expcollclick" | "exportstart" | "exportend" | "click" | "dbclick" | "slink-click" | "clink-click" | "up-click" | "searchclick" | "import" | "adding" | "added" | "updated" | "key-down" | "visibility-change" | "renderdefs" | "render" | "prerender" | "screen-reader-text" | "removed" | "ready" | "ripple" | "node-initialized" | "nodes-initialized" | "node-layout", listener: (sender: OrgChart, args?: any, args1?: any, args2?: any) => boolean | void): OrgChart
    • The on() method of the OrgChart class sets up a function that will be called whenever the specified event is delivered to the target. *

      Parameters

      • type: "init" | "field" | "update" | "add" | "remove" | "renderbuttons" | "label" | "render-link" | "drag" | "drop" | "redraw" | "expcollclick" | "exportstart" | "exportend" | "click" | "dbclick" | "slink-click" | "clink-click" | "up-click" | "searchclick" | "import" | "adding" | "added" | "updated" | "key-down" | "visibility-change" | "renderdefs" | "render" | "prerender" | "screen-reader-text" | "removed" | "ready" | "ripple" | "node-initialized" | "nodes-initialized" | "node-layout"

        A case-sensitive string representing the event type to listen for.

      • listener: (sender: OrgChart, args?: any, args1?: any, args2?: any) => boolean | void

        The object that receives a notification when an event of the specified type occurs. This must be a JavaScript function.

          • (sender: OrgChart, args?: any, args1?: any, args2?: any): boolean | void
          • Parameters

            • sender: OrgChart
            • Optional args: any
            • Optional args1: any
            • Optional args2: any

            Returns boolean | void

      Returns OrgChart

    • onAddNode(listener: (args: { data: object }) => void): OrgChart
    • Occurs when a node has been added by addNode method.

      var chart = new OrgChart('#tree', {});
      chart.onAddNode((args) => {
      //return false; to cancel the operation
      });

      Parameters

      • listener: (args: { data: object }) => void
          • (args: { data: object }): void
          • Parameters

            • args: { data: object }
              • data: object

                new added data node

            Returns void

      Returns OrgChart

    • onDrag(listener: (args: { dragId: string | number; event: MouseEvent }) => void): OrgChart
    • The onDrag event occurs when a node is dragged. enableDragDrop option has to be turned on.

      var chart = new OrgChart('#tree', {});
      chart.onDrag(() => {
      //return false; to cancel the operation
      });

      Parameters

      • listener: (args: { dragId: string | number; event: MouseEvent }) => void
          • (args: { dragId: string | number; event: MouseEvent }): void
          • Parameters

            • args: { dragId: string | number; event: MouseEvent }
              • dragId: string | number

                dragged node id

              • event: MouseEvent

            Returns void

      Returns OrgChart

    • onDrop(listener: (args: { dragId: string | number; dragNodeElement: HTMLElement; dropId: string | number }) => void): OrgChart
    • The onDrop event occurs when a node is dropped. enableDragDrop option has to be turned on.

      var chart = new OrgChart('#tree', {});
      chart.onDrop(() => {
      //return false; to cancel the operation
      });

      Parameters

      • listener: (args: { dragId: string | number; dragNodeElement: HTMLElement; dropId: string | number }) => void
          • (args: { dragId: string | number; dragNodeElement: HTMLElement; dropId: string | number }): void
          • Parameters

            • args: { dragId: string | number; dragNodeElement: HTMLElement; dropId: string | number }
              • dragId: string | number

                dragged node id

              • dragNodeElement: HTMLElement

                draging element

              • dropId: string | number

                dropped node id

            Returns void

      Returns OrgChart

    • onExpandCollpaseButtonClick(listener: (args: { collapsing: boolean; id: string | number; ids: (string | number)[] }) => void): OrgChart
    • The onExpandCollpaseButtonClick event occurs when the chart is redrawed.

      var chart = new OrgChart('#tree', {});
      chart.onExpandCollpaseButtonClick(() => {
      //return false; to cancel the operation
      });
      chart.load(nodes);

      Parameters

      • listener: (args: { collapsing: boolean; id: string | number; ids: (string | number)[] }) => void
          • (args: { collapsing: boolean; id: string | number; ids: (string | number)[] }): void
          • Parameters

            • args: { collapsing: boolean; id: string | number; ids: (string | number)[] }
              • collapsing: boolean

                Indicates id the operation is collaps or expand

              • id: string | number

                the id of the clicked node

              • ids: (string | number)[]

                node ids that will be expanded or collapsed

            Returns void

      Returns OrgChart

    • onExportEnd(listener: (args: { ArrayBuffer: ArrayBuffer; content: string; ext: string; filename: string; nodes: object[]; options: exportOptions; styles: string }) => void): OrgChart
    • Occurs in the beginning of the export. Use this event listener to hide loading image or upload exported document to your server using ArrayBuffer argument.

      var chart = new OrgChart('#tree', {});
      chart.onExportEnd(() => {
      //return false; to cancel the operation for example id you prefer the exported document to not download
      });
      chart.load(nodes);

      Parameters

      • listener: (args: { ArrayBuffer: ArrayBuffer; content: string; ext: string; filename: string; nodes: object[]; options: exportOptions; styles: string }) => void
          • (args: { ArrayBuffer: ArrayBuffer; content: string; ext: string; filename: string; nodes: object[]; options: exportOptions; styles: string }): void
          • Parameters

            • args: { ArrayBuffer: ArrayBuffer; content: string; ext: string; filename: string; nodes: object[]; options: exportOptions; styles: string }
              • ArrayBuffer: ArrayBuffer

                the array buffer is the exported document, you can save it on a server or send it via email

                this property is initialized only for PDF/PNG exports

              • content: string

                csv ot xml string

                this property is initialized only for CSV/XML/SVG exports

              • ext: string

                extension

                this property is initialized only for CSV/XML exports

              • filename: string

                filename, you can change the filename here

                this property is initialized only for CSV/XML exports

              • nodes: object[]

                an array of node objects

                this property is initialized only for CSV/XML exports

              • options: exportOptions

                export options

                this property is initialized only for SVG exports

              • styles: string

                add extra styles

                this property is initialized only for SVG exports

            Returns void

      Returns OrgChart

    • onExportStart(listener: (args: { content: string; ext: string; filename: string; nodes: object[]; options: exportOptions; pages: any; styles: string }) => void): OrgChart
    • Occurs in the beginning of the export. Extra css styles can be added to the exported document using this event listener or show loading image.

      var chart = new OrgChart('#tree', {});
      chart.onExportStart(() => {
      args.styles += '<link href="https://fonts.googleapis.com/css?family=Gochi+Hand" rel="stylesheet">';
      //return false; to cancel the operation
      });
      chart.load(nodes);

      Parameters

      • listener: (args: { content: string; ext: string; filename: string; nodes: object[]; options: exportOptions; pages: any; styles: string }) => void
          • (args: { content: string; ext: string; filename: string; nodes: object[]; options: exportOptions; pages: any; styles: string }): void
          • Parameters

            • args: { content: string; ext: string; filename: string; nodes: object[]; options: exportOptions; pages: any; styles: string }
              • content: string

                the content to be exported

                this property is initialized only for PDF/PNG/SVG exports

              • ext: string

                extension

                this property is initialized only for CSV/XML

              • filename: string

                filename, you can change the filename here

                this property is initialized only for CSV/XML exports

              • nodes: object[]

                array of node objects

                this property is initialized only for CSV/XML exports

              • options: exportOptions

                export options

                this property is initialized only for PDF/PNG/SVG exports

              • pages: any

                an object that discribes pages to be exported

                this property is initialized only for PDF/PNG exports

              • styles: string

                add extra styles

                this property is initialized only for PDF/PNG/SVG exports

            Returns void

      Returns OrgChart

    • onField(listener: (args: { data: object; element: string; name: string; node: node; value: any }) => boolean | void): OrgChart
    • The onField() method of the OrgChart class sets up a function that will be called whenever the specified event is delivered to the target.

      var chart = new OrgChart('#tree', {});
      chart.onField((args) => {
      //return false; to cancel
      });
      chart.load(nodes);

      Parameters

      • listener: (args: { data: object; element: string; name: string; node: node; value: any }) => boolean | void
          • (args: { data: object; element: string; name: string; node: node; value: any }): boolean | void
          • Parameters

            • args: { data: object; element: string; name: string; node: node; value: any }
              • data: object

                node data json object

              • element: string

                svg or html element of the filed, can be changed in the event

              • name: string

                name of the field

              • node: node

                the node

              • value: any

                value of the filed, can be changed in the event

            Returns boolean | void

      Returns OrgChart

    • Occurs when the nodes in OrgChart has been created and loaded to the DOM.

      var chart = new OrgChart('#tree', {});
      chart.onInit(() => {
      });
      chart.load(nodes);

      Parameters

      • listener: () => void
          • (): void
          • Returns void

      Returns OrgChart

    • onNodeClick(listener: (args: { event: any; node: node }) => void): OrgChart
    • On node click event listener.

      var chart = new OrgChart('#tree', {});
      chart.onNodeClick(() => {
      //return false; to cancel the operation
      });
      chart.load(nodes);

      Parameters

      • listener: (args: { event: any; node: node }) => void
          • (args: { event: any; node: node }): void
          • Parameters

            • args: { event: any; node: node }
              • event: any

                the browser event

              • node: node

                node JSON object

            Returns void

      Returns OrgChart

    • onNodeDoubleClick(listener: (args: { data: object }) => void): OrgChart
    • On node double click event listener.

      var chart = new OrgChart('#tree', {});
      chart.onNodeDoubleClick(() => {
      //return false; to cancel the operation
      });
      chart.load(nodes);

      Parameters

      • listener: (args: { data: object }) => void
          • (args: { data: object }): void
          • Parameters

            • args: { data: object }
              • data: object

                clicked node data

            Returns void

      Returns OrgChart

    • onRedraw(listener: () => void): OrgChart
    • The onRedraw event occurs when the chart is redrawed.

      var chart = new OrgChart('#tree', {});
      chart.onRedraw(() => {
      });
      chart.load(nodes);

      Parameters

      • listener: () => void
          • (): void
          • Returns void

      Returns OrgChart

    • onRemoveNode(listener: (args: { id: string | number; newPidsAndStpidsForIds: { newPidsForIds: {}; newStpidsForIds: {} } }) => void): OrgChart
    • Occurs when a node has been removed by removeNode method.

      var chart = new OrgChart('#tree', {});
      chart.onRemoveNode((args) => {
      //return false; to cancel the operation
      });

      Parameters

      • listener: (args: { id: string | number; newPidsAndStpidsForIds: { newPidsForIds: {}; newStpidsForIds: {} } }) => void
          • (args: { id: string | number; newPidsAndStpidsForIds: { newPidsForIds: {}; newStpidsForIds: {} } }): void
          • Parameters

            • args: { id: string | number; newPidsAndStpidsForIds: { newPidsForIds: {}; newStpidsForIds: {} } }
              • id: string | number

                node id

              • newPidsAndStpidsForIds: { newPidsForIds: {}; newStpidsForIds: {} }

                parent ids and sub tree parents ids that needs to be updated on the server. For example if you remove a node that has children all chilren nodes will change their pid to the parent node id of the removed node.

                • newPidsForIds: {}
                  • newStpidsForIds: {}

                Returns void

          Returns OrgChart

        • onUpdateNode(listener: (args: { newData: object; oldData: object }) => void): OrgChart
        • Occurs when the node data has been updated by updateNode method.

          var chart = new OrgChart('#tree', {});
          chart.onUpdateNode((args) => {
          //return false; to cancel the operation
          });

          Parameters

          • listener: (args: { newData: object; oldData: object }) => void
              • (args: { newData: object; oldData: object }): void
              • Parameters

                • args: { newData: object; oldData: object }
                  • newData: object

                    new node data

                  • oldData: object

                    old node data

                Returns void

          Returns OrgChart

        Other Methods

        • Adds new node to the nodes collection

          Parameters

          • data: object

            node data

          Returns OrgChart

        • addClink(from: string | number, to: string | number, label?: string, template?: string): OrgChart
        • Adds curved link.

          Parameters

          • from: string | number

            from node with id

          • to: string | number

            to node with id

          • Optional label: string

            link label

          • Optional template: string

            link template, for example 'orange'

          Returns OrgChart

        • addNode(data: object, callback?: () => void, fireEvent?: boolean): void
        • Adds new node to the nodes collection, redraws the chart and fires remove event

          Parameters

          • data: object

            node data

          • Optional callback: () => void

            called at the end of animation

              • (): void
              • Returns void

          • Optional fireEvent: boolean

            indicates if the add event will be called or not

          Returns void

        • addSlink(from: string | number, to: string | number, label?: string, template?: string): OrgChart
        • Adds second link.

          Parameters

          • from: string | number

            from node with id

          • to: string | number

            to node with id

          • Optional label: string

            link label

          • Optional template: string

            link template, for example 'orange'

          Returns OrgChart

        • canRemove(id: string | number): boolean
        • If specified node has assistant/s or partner/s as children will return false.

          Parameters

          • id: string | number

            identification number of the node

          Returns boolean

        • canUpdateLink(id: string | number, pid: string | number): boolean
        • Can update link

          Parameters

          • id: string | number

            child id

          • pid: string | number

            parent id

          Returns boolean

        • center(nodeId: string | number, options?: null | { childrenState: any; horizontal: boolean; parentState: any; rippleId: string | number; vertical: boolean }, callback?: () => void): void
        • Centers specified node on the screen.

          Parameters

          • nodeId: string | number

            the id of the node

          • Optional options: null | { childrenState: any; horizontal: boolean; parentState: any; rippleId: string | number; vertical: boolean }

            parentState: OrgChart.COLLAPSE_PARENT_NEIGHBORS, childrenState: OrgChart.COLLAPSE_SUB_CHILDRENS, rippleId: rippleId, vertical: false, horizontal: false

          • Optional callback: () => void

            called when the animation completes

              • (): void
              • Returns void

          Returns void

        • changeRoots(id: string | number, roots: (string | number)[], callback?: () => void): void
        • Changes roots order.

          Parameters

          • id: string | number

            id of a node that will not change is position, can be null

          • roots: (string | number)[]

            roots id array in the required order

          • Optional callback: () => void

            called after the roots are changed and animation completes

              • (): void
              • Returns void

          Returns void

        • collapse(id: string | number, ids: (string | number)[], callback?: () => void): void
        • Collapses specified nodes.

          Parameters

          • id: string | number

            the id of the node that will not move

          • ids: (string | number)[]

            node ids that will be collapsed

          • Optional callback: () => void

            called after the animation completes

              • (): void
              • Returns void

          Returns void

        • destroy(): void
        • Destroys the object.

          Returns void

        • draw(action?: action, actionParams?: any, callback?: () => void): void
        • Draws the chart.

          Parameters

          • Optional action: action

            Action for example OrgChart.action.centerNode, default is OrgChart.action.update

          • Optional actionParams: any

            parameters for the action

          • Optional callback: () => void

            called when the animation completes

              • (): void
              • Returns void

          Returns void

        • expand(id: string | number, ids: (string | number)[], callback?: () => void): void
        • Expands specified nodes.

          Parameters

          • id: string | number

            the id of the node that will not move during the animation

          • ids: (string | number)[]

            node ids that will be expanded

          • Optional callback: () => void

            called after the animation completes

              • (): void
              • Returns void

          Returns void

        • expandCollapse(id: string | number, expandIds: (string | number)[], collapseIds: (string | number)[], callback?: () => void): void
        • Expand/Collapse lists of nodes.

          Parameters

          • id: string | number

            the id of the node that will not move

          • expandIds: (string | number)[]

            expand all nodes with ids

          • collapseIds: (string | number)[]

            collpase all nodes with ids

          • Optional callback: () => void

            called after the animation completes

              • (): void
              • Returns void

          Returns void

        • exportCSV(filename: string): void
        • Exports to CSV

          Parameters

          • filename: string

            The name of the exported file See doc...

          Returns void

        • exportJSON(filename: string): void
        • Exports to JSON

          Parameters

          • filename: string

            The name of the exported file See doc...

          Returns void

        • Exports to PDF document

          Parameters

          • Optional options: exportOptions

            export options

          • Optional callback: () => void

            called when the export completes See doc...

              • (): void
              • Returns void

          Returns void

        • exportPDFProfile(options: exportOptions, callback?: () => void): void
        • Exports the details form to PDF.

          Parameters

          • options: exportOptions

            export options

          • Optional callback: () => void

            called when the export completes See doc...

              • (): void
              • Returns void

          Returns void

        • Exports to PNG document

          Parameters

          • Optional options: exportOptions

            export options

          • Optional callback: () => void

            called when the export completes See doc...

              • (): void
              • Returns void

          Returns void

        • exportPNGProfile(options: exportOptions, callback?: () => void): void
        • Exports the details form to PDF.

          Parameters

          • options: exportOptions

            export options

          • Optional callback: () => void

            called when the export completes See doc...

              • (): void
              • Returns void

          Returns void

        • Exports to SVG document

          Parameters

          • Optional options: exportOptions

            export options

          • Optional callback: () => void

            called when the export completes See doc...

              • (): void
              • Returns void

          Returns void

        • exportXML(filename: string): void
        • Exports to XML

          Parameters

          • filename: string

            The name of the exported file See doc...

          Returns void

        • fit(callback?: () => void): void
        • Fits the content to the visible area.

          Parameters

          • Optional callback: () => void

            called when the animation completes

              • (): void
              • Returns void

          Returns void

        • generateId(): string
        • Genereates unique identification number that can be used for new nodes

          Returns string

        • get(id: string | number): node
        • Gets node data.

          Parameters

          • id: string | number

            identification number of the node

          Returns node

        • getCollapsedIds(node: node): (string | number)[]
        • Gets collpased node ids of the specifeid node

          Parameters

          Returns (string | number)[]

        • getMenuButton(): HTMLElement
        • Gets menu button html element

          Returns HTMLElement

        • getNode(nodeId: string | number): node
        • Gets the node as OrgChart.node object.

          Parameters

          • nodeId: string | number

          Returns node

        • getNodeElement(id: string | number): HTMLElement
        • Gets node html element

          Parameters

          • id: string | number

            node id

          Returns HTMLElement

        • getScale(viewBox?: number[]): number
        • Gets the current scale of the chart.

          Parameters

          • Optional viewBox: number[]

          Returns number

        • getSvg(): SVGAElement
        • Gets svg html element

          Returns SVGAElement

        • getViewBox(): number[]
        • Gets the view box attribute of the svg html element.

          Returns number[]

        • getXML(): string
        • Gets nodes as xml.

          Returns string

        • height(): number
        • Gets the height of the container.

          Returns number

        • importCSV(): void
        • importJSON(): void
        • importXML(): void
        • Load nodes data.

          Parameters

          • data: object[]

            node data array

          Returns OrgChart

        • Loads nodes from xml.

          Parameters

          • xml: string

            Xml with node structure

          Returns OrgChart

        • magnify(id: string | number, scale: number, front?: boolean, anim?: null | anim, callback?: () => void): void
        • Magnify(Zoom in) specific node in the chart.

          Parameters

          • id: string | number

            id of the node

          • scale: number

            scale to magnify

          • Optional front: boolean

            show on front or back

          • Optional anim: null | anim

            animation type

          • Optional callback: () => void
              • (): void
              • Returns void

          Returns void

        • maximize(id?: string | number, horizontalCenter?: boolean, verticalCenter?: boolean, callback?: () => void): void
        • Maximize the node. Without parameters maximize all nodes.

          Parameters

          • Optional id: string | number

            the id of the node, if id is null, undefined ot empty string will maximize all nodes

          • Optional horizontalCenter: boolean

            center horizontally

          • Optional verticalCenter: boolean

            center vertically

          • Optional callback: () => void

            called when the animation completes

              • (): void
              • Returns void

          Returns void

        • minimize(id?: string | number, callback?: () => void): void
        • Minimize the node. Without parameters minimize all nodes.

          Parameters

          • Optional id: string | number

            the id of the node, if id is null, undefined ot empty string will minimize all nodes

          • Optional callback: () => void

            called when the animation completes

              • (): void
              • Returns void

          Returns void

        • Removes specified node from nodes collection

          Parameters

          • id: string | number

            identification number of the node

          Returns OrgChart

        • removeClink(from: string | number, to: string | number): OrgChart
        • Removes curved link.

          Parameters

          • from: string | number

            from node with id

          • to: string | number

            to node with id

          Returns OrgChart

        • removeNode(id: string | number, callback?: () => void, fireEvent?: boolean): void
        • Removes specified node from nodes collection, redraws the chart and fires remove event.

          Parameters

          • id: string | number

            identification number of the node

          • Optional callback: () => void

            called at the end of animation

              • (): void
              • Returns void

          • Optional fireEvent: boolean

            indicates if the remove event will be called or not

          Returns void

        • removeSlink(from: string | number, to: string | number): OrgChart
        • Removes second link.

          Parameters

          • from: string | number

            from node with id

          • to: string | number

            to node with id

          Returns OrgChart

        • ripple(id: string | number, clientX?: number, clientY?: number): void
        • Animates specified node with ripple animation - highlight the node.

          Parameters

          • id: string | number

            the id of the node

          • Optional clientX: number

            x value of the ripple center in the node

          • Optional clientY: number

            y value of the ripple center in the node

          Returns void

        • search(value: string, searchInFields?: string[], retrieveFields?: string[]): { __score: number; __searchField: string; __searchMarks: string; id: string | number; name: string }[]
        • Search in the chart.

          Parameters

          • value: string

            search for value

          • Optional searchInFields: string[]

            search in field names

          • Optional retrieveFields: string[]

            retrive data for fields See doc...

          Returns { __score: number; __searchField: string; __searchMarks: string; id: string | number; name: string }[]

        • setLayout(layout: number | layout, lcn?: string): void
        • Parameters

          • layout: number | layout
          • Optional lcn: string

          Returns void

        • setOrientation(orientation: orientation, lcn?: string): void
        • Sets orientation.

          Parameters

          • orientation: orientation

            orientation type

          • Optional lcn: string

            lyout config name for the specified sub tree

          Returns void

        • setViewBox(viewBox: number[]): void
        • Sets the view box attribute of the svg html element.

          Parameters

          • viewBox: number[]

          Returns void

        • shareProfile(id: string | number): void
        • Shares node data, uses build-in device sharing functionallity.

          Parameters

          Returns void

        • stateToUrl(): string
        • toggleFullScreen(): void
        • Toggles full screen mode.

          Returns void

        • Updates the node data

          Parameters

          • newData: object

            node data

          Returns OrgChart

        • updateNode(data: object, callback?: () => void, fireEvent?: boolean): void
        • Updates the node data, redraws the chart and fires update event.

          Parameters

          • data: object

            node data

          • Optional callback: () => void

            function called when the animation completes

              • (): void
              • Returns void

          • Optional fireEvent: boolean

            if it set to true the update event is called

          Returns void

        • width(): number
        • Gets the width of the container.

          Returns number

        • zoom(delta: number | boolean, center?: number[], shouldAnimate?: boolean, callback?: () => void): void
        • Zoom out or zoom in the chart.

          Parameters

          • delta: number | boolean

            true for zoom in, false for zoom out or scale number, if scale is > 1 it will zoom in and scale < 1 zoom out.

          • Optional center: number[]

            array [x, y], where x is x percantege from the width and y is y percentage from the height.

          • Optional shouldAnimate: boolean

            should animate

          • Optional callback: () => void

            called when the animation completes

              • (): void
              • Returns void

          Returns void

        • animate(element: Object, attrStart?: Object, attrEnd?: Object, duration?: number, func?: anim, callback?: Function, tick?: boolean): void
        • Parameters

          • element: Object
          • Optional attrStart: Object
          • Optional attrEnd: Object
          • Optional duration: number
          • Optional func: anim
          • Optional callback: Function
          • Optional tick: boolean

          Returns void

        • Count all children nodes of the specified id.

          Parameters

          Returns number

        • collapsedChildrenTotalCount(chart: OrgChart, node: node): number
        • convertCsvToNodes(text: string): Object[]
        • Parameters

          • text: string

          Returns Object[]

        • convertNodesToCsv(nodes: Object[]): string
        • Parameters

          • nodes: Object[]

          Returns string

        • fileUploadDialog(scallback: (file: any) => void): void
        • Parameters

          • scallback: (file: any) => void
              • (file: any): void
              • Parameters

                • file: any

                Returns void

          Returns void

        • gradientCircleForDefs(id: string | number, colors: string | string[], r: number, strokeWidth: number): string
        • Parameters

          • id: string | number
          • colors: string | string[]
          • r: number
          • strokeWidth: number

          Returns string

        • isMobile(): boolean
        • Returns boolean

        • isNEU(val: any): boolean
        • is null, empty or undefined

          Parameters

          • val: any

          Returns boolean

        • isTrial(): boolean
        • Checks if the used libraris is licnsed or not

          Returns boolean

        • wrapText(text: string, field: Object): string
        • Parameters

          • text: string
          • field: Object

          Returns string

        Legend

        • Constructor
        • Property
        • Method
        • Static property
        • Static method
        • Inherited method

        Settings

        Theme

        Generated using TypeDoc