Now a node can have only one parent, if supports multiple parent node would be great? Like the dependency graph

Hello,
the getHierarchy($chart) return me somthing like this:
{ "id": "01", "children": [ { "id": "02" }, { "id": "03" }, { "id": "04" } ] }

but I want to get the full data with the name and relationship:

'name': 'Ball game', 'relationship': '001', 'id':'01', 'children': [ { 'name': 'Football', 'relationship': '110','id':'02' }, { 'name': 'Basketball', 'relationship': '110' ,'id':'03'}, { 'name': 'Volleyball', 'relationship': '110' ,'id':'04'} ]

is there a function that return JSON data like the above?

my main goal is to save that data into variable after I edit the chart so when I load it again all changes I made will be remained.

I'll appreciate any help on the matter

Hello, its hard to add something like that?

name: Kobayashi

simple if its org chart and one employee is assistant to another.

Hi, can I add nodes dragging and dropping from a external container?

In other words, finally, we'd better generate a less than 5k jquery.orgchart.min.js file

When the data is requested by a ajax request and when the down arrow of a child node is pressed and there is no parent for it, the orgchart generates error when its trying to retrieve a node that doens't exist and keep a loading image on the screen.

hi @dabeng ,
i am trying your plugin, everything run good,
but i found a bug in ajaxURL function
when i call children function, server side return json data,
but the plugin cannot parse the json data on line 541
if (data.children.length),
if will return
jquery.orgchart.js:541 Uncaught TypeError: Cannot read property 'length' of undefined
and my solution is add dataType: "JSON" on line 538
like this : $.ajax({ 'url': opts.ajaxURL.children + nodeId + '/',dataType: "JSON" })

hope help :D

Drag and drop feature allows users to edit the hierarchy of orgchart more conveniently

Several issues when using the latest jQuery (3.1.4) and the edit chart functionalities.
For example when adding a sibling the chart gets messed up.

I changed to the latest 2.x jQuery (2.2.4) and now everything seems to be working fine,

It's possible to set the orgchart orientation? I need to put it in the horizontal orientation, instead of the vertical default orientation. I don't found anything about that in the docs, then I'm asking here.

can you please help me to write angular directive for Org Chart

when i am viewing my siblings,
right now my current node is positioning to center.
But I would like to view all my siblings to right side or left side according to the need.

Hi, is it possible without changing too much code?

In the demo located at http://dabeng.github.io/OrgChart/drag-drop/ clicking the infacing arrows on either side of an element will collapse all of that elements siblings into the clicked element.

It seems that this is intended behaviour as if meant to focus on the selected node and its children but it strikes me counter-intuitive. This behaviour makes it seem like the hidden elements are children of the clicked element not its siblings which is not the case.

I feel like this will cause confusion with my users. I would need to make one of the following changes in order to use this:

1. Hide the left and right arrow using CSS to eliminate confusion
2. Change the left and right icons from an arrow to something that more intuitively suggests a focusing action, like a magnifying glass perhaps

We have downloaded 'html2canvas', and turned on the 'Export' button.

It does generate and download a png image .... but the image is always cropped.

Our Org Chart, can be quite long, so ends up having scroll bars (often both x and y axis)... is this the reason the image gets cut? ... if so is there a way to 'Force it' to be the whole area?

When I select Basketball node that add child node TEST1 .
But if I make a wrong add child node (TEST1),
I want to delete that, then do it.
after all , I want to select Basketball this node and add any child node Again ，
but NOW I can't add any child node

how?

It's a very useful method, especially after users' finishing the edit of the orgchart.

This plugin does a perfect job for the org chart. However, it would be really awesome if its responsive too.

Thanks for your great work about Jorgchart. But with using this plugin ,the result of mine is not so good.When I move the mouse into a node, some special effect can not come out.The following is a comparison chart . In my result, the sign "up"、“down”、“right”、“left” can not come out.
the right one
the wrong one

I would like to use this plugin convieniently using rails-assets. Therefore, I would really like the issuing of a bower package for this plugin.

Hi, I have used OrgChart library for a complex chart and works great. Kudos for the great work :).

But when chart gets bigger it becomes useless pretty soon, because of horizontal display of children. I could not find an option in plugin to align children vertical, under the parent.

Please see the attached image, I don't want the connecting lines for children, just alignment will fulfill my requirements.

If there is no option currently in the library, can you please guide me on how can I modify the library to achieve the effect. Thanks.

Hi @dabeng!

I've got a layout problem when the container page includes a CSS reset (e.g. yui).

The line layout got broken when the CSS reset adds this css property:
table{ border-collapse: collapse }

I solved this issue adding this style in jquery.orgchart.css:
.orgchart table { border-collapse: separate }

I don't know if this is the best approach to solve the issue.
What do you think?

Thanks in advance.

I did not thoroughly check yet but I think this has something to do with normalize.css

Hi there,

I'm loading my Json string with my hierarchy but after modifying the hierarchy, I want to save it so I can reopen the changes. How can I get the modified datasource from the chart?

Regards,
Jordi

I cant import complete image of my Chart.
It crops my chart.

Waiting For Response
Thanks

very thanks for orgchart , do it work in bellow structure data ??

 { id: '1', parent: '' },
 { id: '2', parent: '1' },
 { id: '3', parent: '1' },
 { id: '4', parent: '2' },
 { id: '5', parent: '3' },

When I drag a node with hidden siblings, the chart breaks!

1、click left or right arrow to hide siblings
2、drag&drop the node you just operated

then you can see the chart break

hello, does this tool support one node could have two more parent node and have two more child node at same time? thx

I am getting problems when using Export Image with a chart in l2r direction.
I also get similar problems when exporting image after I have zoomed the chart (which also happens in t2b direction mode).

The edges (lines) between the nodes gets messed up.

I have modified the chart script quite a lot so I am not sure that the problems is because of this. Maybe someone else can try to see if they also get these problems.

Hi
Firstly ,Great work on your project.
Secondly , i have picked up an issue where when using the addnode function and providing
an SVG ( i have checked the formatting all correct and the function works perfectly in chrome) it will not display any thing in the bound canvas objects.

when using the Canvas and SVG without the orgchart.js it seems to work fine in both ie and chrome,
but it has come down to i really want to use your orgchart.js as it handles so nicely.

Here is a snippet that works in chrome ( i have a loop around this code to produce more levels)

var data = '<svg width="400px" height="200px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">' +
'<title> designation</title>' +
'<g id="columnGroup">' +
'<rect x="65" y="10" width="75" height="110" fill="gainsboro"/>' +
' <text x="0" y="30" font-size="18px" font-weight="bold" fill="crimson">' +
'<tspan x="0" dy="1.5em"> test 0 </tspan>' +
'<tspan x="0" dy="1em"> test 1 </tspan>' +
'<tspan x="0" dy="1em"> test 2</tspan>' +
'</text>' +
'<text x="250" y="30" font-size="18px" text-anchor="middle">' +
'<tspan x="250" font-weight="bold" fill="crimson">Actual</tspan>' +
'<tspan x="250" dy="1.5em"> 7 </tspan>' +
'<tspan x="250" dy="1em"> 8 </tspan>' +
'<tspan x="250" dy="1em"> 3 </tspan>' +
'</text>' +
'<text x="350" y="30" font-size="18px" text-anchor="middle">' +
'<tspan x="350" font-weight="bold" fill="crimson">Plan</tspan>' +
'<tspan x="350" dy="1.5em"> 8 </tspan>' +
'<tspan x="350" dy="1em"> 8 </tspan>' +
 '<tspan x="350" dy="1em"> 2 </tspan>' +
'</text>' +
'</g>' +
'</svg>';


var img = new Image();
var DOMURL = window.URL || window.webkitURL || self;
var svg = new Blob([data], { type: 'image/svg+xml;charset=utf-8' });
var url = DOMURL.createObjectURL(svg);

o.addNode(Id, reportingid, 'u', '', '', '', '', '', '', url, 'C');
o.drawChart('canvas1', 'c', true);

Is there a way to 'turn off' the Zoom but still be able to pan?

We want to be able to drag about, but not zoom in if possible?

A couple of bits which don't seem straight forward and not really documented that I can see.

1. We are using just the 'standard' UL/LI list .... In the LI's how do you define the TITLE and CONTENT? I know you can add 'nodeContent' into the jquery options ... but what value does it need and what is the structure of the LI's?

2. Changing the WIDTHS ... we want to make the titles longer so you get to see more content .... do we then have to go through the CSS and change all the widths / margins?

First of all great work guys.

I just have a question about collapsing and expanding the siblings on the basis of arrow.
Currently clicking on any horizontal arrow results into collapsing all siblings.
Can we make this collapsing more appropriate by considering the arrow's direction.
For example., collapse/hide only right side nodes when right side arrow is clicked and and same for left and expanding/showing up the nodes.

Please share your thoughts on this.

Thanks....

Trying to load a valid JSON external file. Works fine in IE11, but latest version of Firefox returns this error:
SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data

It shouldn't need to JSON.parse a file that already contains valid JSON, right? Seems like an extra step. Google search reveals that this is exactly the error returned when trying to parse already-valid JSON.

Thanks for an excellent library!

Hi.

I was wondering if it is possible to cancel the drag & drop event if some criteria are not met. For example, I do not want an employee to be under a specific department under no circumstance.

I have already found a way to check if the dropZone should be valid or not but I have not found a way to return the dragged node to its previous position.

Is what I am asking even possible?

Thanks

Please, do not use css which is not namespaced correctly. For example: I see that you define a .hidden class with a display: none; In my projects, I could also have used a hidden class and this will interfere with the hidden class you use for this plugin...

Also .node, .slide-up, .slide-down are also not namespaced. If you agree, I could make a PR.

hi @dabeng,
after few week ago, i got another question,
can i know, nodeContent only support single line?

example:
nodeContent: 'title';
and
title:'a<br>b'

it only show
a ini chart...
if you need image support please let me know, thanks !

we use lots of jquery deferred object in collapsing/expanding nodes.

can we have multiple org charts ?

Hello,
how can i create a multi root graph?

Example:

Current:
.orgchart td.left {
border-left: 1px solid rgba(217, 83, 79, 0.8);
}

New:
.orgchart td.left {
border-left: 1px solid rgba(217, 83, 79, 0.8);
float: none;
}

If 'float' for a "td" is be set by another css, lines will not shown correctly.

You can reproduce the error by simply adding style:

.left {
float: left;
}

to the page.

cheers
kbg

Hi dabeng,
I'd like to add new factory functions without doing a fork. (Will be more than happy to share them with the community).
Found this approach:
http://stackoverflow.com/questions/2050985/best-way-to-extend-a-jquery-plugin/4414356#4414356

(function($) {
/**
 *  Namespace: the namespace the plugin is located under
 *  pluginName: the name of the plugin
 */
    var extensionMethods = {
        /*
         * retrieve the id of the element
         * this is some context within the existing plugin
         */
        showId: function(){
            return this.element[0].id;
        }
    };

    $.extend(true, $[ Namespace ][ pluginName ].prototype, extensionMethods);


})(jQuery);

To make it work I would need to provide the 'namespace' and 'pluginName'. Looks to me that these concepts are used ambiguously in literature. Tried several combinations to get the extension pattern to work, without success.

Any thoughts on this?

kbg

Dear dabeng,

Thanks for your great work. Can I call my customized function after drop over? How?

Hello @dabeng
I'm wondering whether it's possible to use custom html instead of default title and name? In jOrgChart there was a possibility to use any code except ul and li inside the node and the plugin was just connecting the blocks into a tree - I'm looking for such a solution, do you think that I can do that in your plugin without tons of extra coding?
Regards

Refer to
http://thecodeplayer.com/walkthrough/css3-family-tree

Hi, Thanks for nice chart. do you have any plan to release angularjs directive for this chart?

GetHierarchy method display following error message when draggable option is on.

Error: Nodes of orghcart to be exported must have id attribute!