wesnolte / jorgchart Goto Github PK

Is there an interface allow user to insert or create a new tree?

I wish to add onclick or onmouseover events to chart items.

How to accomplish this? I'm totally stuck here. I've tried things like:

$('li').click() {
// do something
}

$('#org li').click() {
// do something
}

But nothing I am trying applies...

Hey, is there a way to create a family-tree structure, just like this?

http://stackoverflow.com/q/11528321/561610

i want to add some function , when click current node's image(like add), and add a child node which parent is current node. how to do that?

I've been trying to make nodes content editable using a number of jQuery plugins but no matter what I do, nodes are not responding. Any advice?

2 years of inactivity!

This is more of a feature request, but I'd like to be able to drag and drop nodes on the same level to rearrange them. In my app, order of the tree nodes left to right is important. Any tips or tricks on how to allow dragging and dropping to rearrange the order of nodes?

Hey Wes, Love the plugin. I think it would be cool if you could make expandable/contractble an option. I was able to do it on my copy locally but other users may find it useful as well.

Hello,

I need to limit by children on next level. How can I do it?

Hello,
I need to print the org. chart graphic, can I do that?

Regards.

When a node has only one child, the size of the line segments is not consistent with other lines. This causes the child (and subsequent children) to be out of vertical alignment with sibling nodes. The problem is visible in the Food example with the Granny Smith Apple.

Also, before reviewing the open issues, I modified the script to support the ignoreSpace parameter in a compatible fashion but using a separate function. My initial attempt incorporated styles as described in one of the other comments, but realised that the 'display: none' styling was being overwritten by the table styles.

The appended diffs resolve the layout and incorporate the ignoreSpace change. I have not used GitHub previously and would like to defer the change to someone who has the tools and more experience. There remain some similar problems in cases where the content of the node extends beyond the boundary of the text area.

Very impressive, easy to integrate plug-in. I needed to review a tree with some thousands of nodes and ended up using this with some Excel to generate the tree.

Comparing files CSS\jquery.jOrgChart.css and ORIGINAL\JQUERY.JORGCHART.CSS
***** CSS\jquery.jOrgChart.css
}
.jOrgChart .dot {
height : 23px;
}
.jOrgChart .left {
***** ORIGINAL\JQUERY.JORGCHART.CSS
}
.jOrgChart .left {

Comparing files jquery.jOrgChart.js and ORIGINAL\JQUERY.JORGCHART.JS
***** jquery.jOrgChart.js
chartClass : "jOrgChart",
ignoreSpace : false,
dragAndDrop: false
***** ORIGINAL\JQUERY.JORGCHART.JS
chartClass : "jOrgChart",
dragAndDrop: false

***** jquery.jOrgChart.js
};
function layout(row, state, opts) {
if(opts.ignoreSpace)
row.css('display', state ? '' : 'none');
else
row.css('visibility', state ? '' : 'hidden');
};
var nodeCount = 0;
***** ORIGINAL\JQUERY.JORGCHART.JS
};
var nodeCount = 0;

***** jquery.jOrgChart.js
var $tr = $this.closest("tr");
$this.css('cursor','n-resize');
if($tr.hasClass('contracted')){
$tr.removeClass('contracted').addClass('expanded');
layout($tr.nextAll("tr"), true, opts);
// Update the

When a page with an org chart is opened with IE9, the chart is not shown in the page. Refreshing the page does not help. If you view source, the HTML structure is there, but the chart just does not show. The strange thing is, if you open the developer tools (F12) and refresh the page, the chart will show. The problem can be reproduced by closing and restarting IE9.

http://jsfiddle.net/aamir/QeAff/2/

The simplest way to support all the requests to be able to save modified charts, is to provide a callback function as one of the parameters that gets called when the drop is complete. I tried to add it but ran into an issue that is beyond me. I added the following at the end of the // Drop event handler for nodes section:

// handle callback after drop
if (opts.dropHandler) {
    var a = opts.dropHandler;
    window[a](this);
}

where dropHandler is the new options I added. This works to call the function, but it happens too quickly because the new node positions aren't all drawn yet and if I loop through $('.node').each() ... it finds one more than necessary (the original nodes plus the new temporary dragged node). If someone can tell me how to ensure that the drop and subsequent update of the div is complete before calling my function, I'd appreciate it.

Hi,

I'm interested in using your jQuery plugin for a project, but that project is going to be under the GPL, which is incompatible with the CC-BY-SA license. The same purpose would be accomplished by both, but CC-BY-SA is not meant to be used for code at all. Can you, at the very least, dual-license the code? Failing that, could you give me license to use the code under the GPL?

Thanks!

Is there currently any way to export a chart's structure to JSON? I'd like to allow users to dynamically rearrange their flow, add nodes as desired and have a way to export out the current state into json, while "somehow" maintaining the left/right ordering of child nodes, etc..

Also, is there any way each parent node can restrict the number of child nodes?

I'd like to use this to display an upsell flow of products during an order checkout process. In my application, each main product (respective parent node) would have accept/reject decision based logic to redirect to "the next upsell" based on 2 child nodes assigned under the respective parent. (Product A -> Accepts to Product B, and Rejects to Product C)

I'd need to limit 2 child nodes per parent node, and assign them as an "accept" or "reject" stage of the flow.

This is an awesome application! I look forward to using it in my app.
Thanks!
Chris

When using jquery 1.8.3 and jqueryui 1.9.2 you'll get this error when you try to drag:

Uncaught Error: cannot call methods on droppable prior to initialization; attempted to call method 'disable'

I have requirement to display a large tree with 100s of nodes. Is it possible to child nodes using AJAX request?

Hi

I'm not much of a programmer, but it would be very helpfull if the graph were to be redrawn on collapse, in order to make a better use of the available space on the container.

For example, my initial tree is very wide, but if the user collapses a few nodes the diagram should redraw to use less space

Thanks!

Will I be able to print the whole chart which i have dynamically made.??

thanks in advance

Hello All,

We are running in to major issues when loading very large trees (Nodes=6,000; Depth=10). It kills the browser and runs in to "JavaScript running slow" issues. We have tried class='collapsed' on nodes, but it doesn't work.

Is there a way we can overcome this problem. Can we load using AJAX? How can I optimize my code?

Our team would really appreciate any help.

Regards,
Vishal

I get organization data from database and save to an array like below:

Array ( 
[0] => Array ( [hierarchy_id] => 1 [layer] => 1 [parent_id] => [manage_flag] => 1 [pschool_id] => 1 [pschool_name] => Organization ) 
[1] => Array ( [hierarchy_id] => 4 [layer] => 2 [parent_id] => 1 [manage_flag] => 1 [pschool_id] => 9 [pschool_name] => Headerquarter ) 
[2] => Array ( [hierarchy_id] => 6 [layer] => 3 [parent_id] => 4 [manage_flag] => 1 [pschool_id] => 11 [pschool_name] => Kantou branch ) 
[3] => Array ( [hierarchy_id] => 7 [layer] => 3 [parent_id] => 4 [manage_flag] => 1 [pschool_id] => 12 [pschool_name] => Kansai branch ) 
[4] => Array ( [hierarchy_id] => 8 [layer] => 3 [parent_id] => 4 [manage_flag] => 1 [pschool_id] => 13 [pschool_name] => Kyushu branch ) 
[5] => Array ( [hierarchy_id] => 9 [layer] => 4 [parent_id] => 7 [manage_flag] => 1 [pschool_id] => 14 [pschool_name] => Osaka branch ) 
[6] => Array ( [hierarchy_id] => 10 [layer] => 4 [parent_id] => 7 [manage_flag] => 1 [pschool_id] => 15 [pschool_name] => Kyoto branch ) 
[7] => Array ( [hierarchy_id] => 12 [layer] => 5 [parent_id] => 9 [manage_flag] => 0 [pschool_id] => 17 [pschool_name] => osaka shop 1 ) 
[8] => Array ( [hierarchy_id] => 11 [layer] => 5 [parent_id] => 9 [manage_flag] => 0 [pschool_id] => 16 [pschool_name] => Osaka shop 2 ) 
)

How can i render OrgChart from hierarchy data like that?

view genealogy more than 32 member is not display in genealogy tree structure why ?

When displaying a large tree (i.e. many nodes) the usefulness of the app slips a bit. A user has to use the scroll bars to move left/right and up/down.

Currently I have the following set up locally:

1. Every node is collapsed by default.
2. IgnoreWhite space is the default (@gdott9, Issue #35, Pull Request pending).
3. I'm pulling in data via json feed via dataObject (@goldenhooves, Issue #24, Pull Request pending). This json was a little funky at first but I have it working.

The 3 steps above have help considerably but how can I improve the user experience if I have many nodes? I think the easiest solution would be to only allow the nodes of the current branch to be expanded. All other nodes will collapse. It's not perfect but I think at the very least, having the ability to only display the current branch is a nice feature.

The latest version on github is not compatible with the latest JQuery libraries. In particular, I am using 1.11.2 and the jOrgChart works only with 1.7.1

I have added fade In and Out effect on some of the command to make the plug-in looks better, however, it is only working when I refresh the page. Will you have any suggestion for this new add-on function for me. Thank you so much !!

Doing it with CSS alone it's a little bit tricky, it would be great to support chart in the other 2D axis.

In the example provided, if any block is dropped into the chocolate block, it simply disappears

It's possible to Show/Hide branches that are not in use?

For example, I have 3 main branches, but if the user clicks in the 2nd branch the 1st and 3rd branches will hide allowing the user only can see the nodes of the 2nd branch.

How can I do that?

Thanks for you help

How about making it work with 10.000 nodes.

Is it possible to swap the root of the chart with a child? I notice in the demo that you can't replace "Food" with another element.

This list of documents for use in the vertical'll print. But are listed horizontally.

[email protected]

I believe this is an unwanted behaviour of the plug-int that somehow got unnoticed.

If I add an HTML link into a node that has child nodes, by clicking on the HTML link inside the node, it opens/closes it (toggles that node). I really don’t want it to open/close (toggle) if I click on an link within the node… Is there an easy fix for this? Thank you in advance!

p.s. this behaviour is NOT noticeable in your demo as the node with HTML link does not have any children in it, so it does not do the 'toggle behaviour' on link click.

NC

Hello! Of course this is a great thing you've done, thank you. I'm having some issues with how the lines between nodes are appearing. Basically it's adding extra lines in some instances and bunching them all up to one side in other instances. I'm not sure what the issue is, but I'm hoping you can help me out. If you can reach out to me I can give you a URL to see what's happening.

Hi,

is it possible to merge a splitted part? I didn't find a way for this.

Perhaps this example image is better to understand: http://www.imagebanana.com/view/1olu7p09/example.jpg

Jan

I had a tree with a few nodes set as class="collapsed" which made them display initially contracted but that could be expanded/contracted at will.

After downloading the new version (the one with the new License terms) I noticed that those nodes with class="collapsed' still show up contracted as expected but clicking on them does not allow them to expand anymore.

When trying to trace back the issue I found that in the new version the following line had been removed when compared to the previous one in the "Expand and contract nodes" section of the code:

$tr.nextAll("tr").fadeToggle("fast");

By adding that line back to the new version the initially collapsed nodes can now be expanded/contracted as before.

The final section of code looks like this:

// Expand and contract nodes
if ($childNodes.length > 0) {
  $nodeDiv.click(function() {
      var $this = $(this);
      var $tr = $this.closest("tr");
      // Added line below to fix issue when node initially collapsed cannot be expanded!
      //            (copied from former version of the library)
      $tr.nextAll("tr").fadeToggle("fast");

      if($tr.hasClass('contracted')){
        $this.css('cursor','n-resize');
        $tr.removeClass('contracted').addClass('expanded');
        $tr.nextAll("tr").css('visibility', '');
      }else{
        $this.css('cursor','s-resize');
        $tr.removeClass('expanded').addClass('contracted');
        $tr.nextAll("tr").css('visibility', 'hidden');
      }
    });
}

I tested this on Internet Explorer 8.0.7601.17514 on Windows 7.

Awesome work on the library by the way! The functionality is great!

Hi,

OrgChart is not themable at the moment. The idea is to do it themable in order to use it with jQuery ThemeRoller http://jqueryui.com/themeroller/

Would you accept my pull request if I would try to make the organigram theme aware?

Thanks in advance.

Just curious if you've thought about it, plan to implement it, or don't care about the feature.
Was curious about opening up a tree branch and all other sibling branches would close, so that way there wouldn't be a slew of open branches if you have a large tree?

I insert in the organization chart an assistant. A assistant is connected to the branch and not the node.

How can I do?

Thank .s

I've tried everything I am capable of to get the chart always centered in the browser window. Right now it is aligned to left, so if I only have a few items in my chart it looks rather ugly due to the left align.

It should be possible to center align it.

I inserted modal box from bootstrap inside the node parent and when the modal box button clicked, the child node from the parent still collapsed. I have spend many hours to fix it but nothing happened. Can anyone fix it?

Really need help,
Thanks

It have to show 11 items but shows only 9, last two childnodes are not loading, kindly help me out.

Is there an easy way to turn on/off the drag and drop option without having to reload the entire tree structure?

var new_node_id = $node.attr("id");
if (typeof new_node_id !== 'undefined' && new_node_id !== false) {
$nodeDiv = $("

I am trying to represent a company organisation chart using this plugin.
However, this company has several employees that report to 2 managers.
Anyway that this can be achieved without duplicating employees on the chart?

it would be very nice if we could register a callback triggered when a node is moved from one branch to another; for instance to sync the back-end application

Please see the image
Thank you much!

Hi,

This is brilliant pice of work, Thans for this. It would be nice if it can be responsive. I mean chart resizes /changes layout depending on the screen size. this will enable us to view big orgchart on phones in a nice way.

-Ravindra