dabeng/orgchart

It's a simple and direct organization chart plugin. Anytime you want a tree-like chart, you can turn to OrgChart.

orgchart's Issues

ajaxURLS call back

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

we should remove the overuse of jquery Deferred object.

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

Broken lines css

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

one node support two more parent nodes?

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

we should provide a mehtod called getHierarchy that can return a json object to represent the nested hierarchy relationships

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

why my browser(IE 11) can not show some special effect?

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

Add to Structure

Hello, its hard to add something like that?

name: Kobayashi

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

stracure data like this

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' },

Aligning Children Vertical

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.

we should add the drag/drop feature

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

a

Another way to show the chart using pure DOM and CSS

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

Titles and Content in standard UL/LI

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?

ie11+? could support ie9+?

how?

Edit chart does not work with the latest jQuery

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,

Create a Chart with more than one root

Hello,
how can i create a multi root graph?

function that return the full data

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

Cancel the drop event

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

<br> in nodeContent?

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 !

Patch for jquery.orgcharts.css - Lines are not shown correct when 'float' is set by another CSS

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

is there plan to support IE8+ ?

Enhancement: Responsive design

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

multiple parent node

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

Extending the plugin

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

Custom code

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

How to add All siblings to Left Only or Right Only

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.

collapse siblings to right and left respectively..on the basis of an arrow

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....

deactivate collapse

Hi, is it possible without changing too much code?

Export to Image (Problem)

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

Waiting For Response
Thanks

Create bower package

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.

Broken layout when the page uses CSS resets

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.

Pan and Zoom

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?

need angularjs directive for the chart

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

[Bug Report] GetHierarchy method doesn't work properly when draggable option is on.

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

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

In the demo, siblings collapse into each other

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

Saving datasource

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

can we have multiple org charts ?

can we have multiple org charts ?

Add nodes from a container

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

IE 9/10/11 + Canvas + SVG + orgchart.js

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);

Exporting

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?

Orientation

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 I call my customized function after drop over?

Dear dabeng,

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

we should simplify the js source code line from 900 to 500 more or less

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

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

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

can please help me to write angular directive for Org Chart

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

when I delete child node Can't Add Child node Again

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

Export image problems when using l2r and zoom

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.

Error Uncaught TypeError: Cannot read property 'children' of undefined

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.

Namespace css correctly

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.

Error loading external JSON file in Firefox

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!