dabeng / orgchart Goto Github PK
View Code? Open in Web Editor NEWIt's a simple and direct organization chart plugin. Anytime you want a tree-like chart, you can turn to OrgChart.
License: MIT License
It's a simple and direct organization chart plugin. Anytime you want a tree-like chart, you can turn to OrgChart.
License: MIT License
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 use lots of jquery deferred object in collapsing/expanding nodes.
hello, does this tool support one node could have two more parent node and have two more child node at same time? thx
It's a very useful method, especially after users' finishing the edit of the orgchart.
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
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' },
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.
Drag and drop feature allows users to edit the hierarchy of orgchart more conveniently
A couple of bits which don't seem straight forward and not really documented that I can see.
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?
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?
how?
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,
Hello,
how can i create a multi root 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
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
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 !
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
This plugin does a perfect job for the org chart. However, it would be really awesome if its responsive too.
Now a node can have only one parent, if supports multiple parent node would be great? Like the dependency graph
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
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
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.
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....
Hi, is it possible without changing too much code?
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 @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.
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?
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!
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:
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 ?
Hi, can I add nodes dragging and dropping from a external container?
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);
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?
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.
Dear dabeng,
Thanks for your great work. Can I call my customized function after drop over? How?
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!
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 you please help me to write angular directive for Org Chart
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
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.
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.
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.
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!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.