fperucic / treant-js Goto Github PK

How to refresh chart without page refresh?

Thank you

I could not do it from the examples shown
if its possible an example would really help.

thanks

I want to be able to show multiple parent relationship.
It does not necessarily mean that every element of the tree has multiple parents, but it would be an interesting feature to add secondary connections to the tree, i.e. Employee X has a functional boos Y and an administrative boss Z

           N
         /   \
       Z      Y
     /       /
    X-------

I didn't see anything in the documentation about support for multiple parent nodes. Is this currently possible?

Please add the license for the product use, and a way to contact the author.
Thanks!

I am using treant within Angular, and am having a time getting an event handler on a node.

can you add a onClick, onExpand, and onCollapse callback function? even just an onCLick so I can examine the nodes expanded state would do the trick.

I would like to add the functionality to edit/add/delete nodes and to do that I need to be able to capture the "id" of the node. I can capture Treant's id, but I need the primary key of the record I am updating.

Great library, but I came for one thing. If you add an image in the form of "data: image / png ....." then you need minor adjustments in ImageLoader

if (image.src.indexOf('data:image/') === -1) {
image.src += "?" + new Date().getTime();
}

I have a very large chart. Is there a way to search for a specific person or department? Thanks!

This bug occurs only when the height of the container <div> element is set to a percentual value like 100%.

Every time the tree.redraw function is called, it increases the height of the contained <svg> element by 5px. The reload function doesn't suffer from this bug, moreover, it reverts the tree to its minimal height.

I tried to insert a staff group as the image, but I have not had success. I need the red connectors to be fixed (do not adjust).

They have some example of how to do what we need

Thank you!!!!

Hi,

If dynamic image is used instead of static one, generated url is wrong. You can fix this with something like:

// load event is not fired for cached images, force the load event
if (image.src.indexOf('?')>0)
image.src += "&" + new Date().getTime();
else
image.src += "?" + new Date().getTime();
`

I wonder if you can point me to a direction of where these might come from.

They happen with this config :

var config = {
                container: "#OrganiseChart8",
                /*levelSeparation:    70,
                siblingSeparation:  60,*/
                nodeAlign: "CENTER",
                animateOnInit: true,
                animateOnInitDelay: 500,
                node: {
                    collapsable: true
                },
                animation: {
                    nodeAnimation: "easeOutQuad",
                    nodeSpeed: 250,
                    connectorsAnimation: "bounce",
                    connectorsSpeed: 700
                },
                connectors: {
                    type: "step",
                    style: {
                        "stroke-width": 2,
                        "stroke": "#ccc",
                        "stroke-dasharray": "-", //"", "-", ".", "-.", "-..", ". ", "- ", "--", "- .", "--.", "--.."
                        "arrow-end": "classic-wide-long"
                    }
                }
            },

First of all, thanks for this amazing js, its really useful.
Hi, I have this problem:
My COLLAPSABLE tree has many nodes and one parent can have more than 100 children, so I would love to add some arrows next to each parent that would cycle trough his children (for example display next 10 children, lets say I have a class that will deliver next 10 chilren on Click of an Arrow).
However, I dont know how to remove children from existing tree, do I have to delete the whole tree and create new one which has new children to display?
Also I found function in tree called addNode(parentID,nodeDefinition);
var nodeDefinition = { parent: malory, text:{ name: "New Child", } }
can be the new node but how do I get parentID? How is it defined?

Hi, I've installed Treant using npm to use in my node application and it is now stored as a node module. I'm using angular for the front-end of my application and i'm just wondering could someone tell me how to use Treant with Angular?

I was able to get Treant working fine through javascript and html outside my application but when i try to use it with Angular in my app nothing gets displayed in the browser. I'm not sure if i'm requiring the library correctly or if i need to create a controller to display the tree's etc. If someone could tell me the general way of using this library with angular that would be great. Thank you.

Hi,

I'm getting this error at line 177 of Treant.js. I'm guessing one of the dependencies hasn't wired itself up correctly. Could you possibly let me know what I'm missing?

Thanks!
r.

First of all, I would like to say, this is an amazing library. I went through alot of org-chart libraries, and this is the best one by a mile. Now, onto my question.

I want the node to get the focus, as soon as it is collapsed or expanded.

I have a large chart with scrollbars, and would love to get the expanded/collapsed node to get the focus/centered. I think it can be achieved by 'scroll to' method in jquery, but I couldn't find a solution.

How can this be achieved?

I have used this library. it is simply perfet, what i want is to assign different path color for each child node.
please help.

I installed the package via npm, version is 1.0.1.
First thing i tried is to replicate a simple case in the example, but then part of the graph at the top are hidden. I have tried a lot of solutions like removing all other custom html and css etc, but still no luck at all. Please refer to the attached screenshot.

I want to center a node in the tree on screen, so that in the center of the screen is the node. Basically I'm trying to bring a node into the center of the screen if it's off the page so that I can see it instead of having to drag it myself. Is there some way of doing this? Thanks

Thanks for this awesome library, it does exactly what I needed. I'll soon contribute some improvements. (new connector style)

I have one feature request though. Have you tried movement of nodes with mouse / touch? (repositioning on x,y coordinates)

If not, I'll try to implement it myself. Any thoughts on how would you like to be implemented? (if at all)
I'll be glad for any ideas or instructions.

Two questions . Is there any way to print a large graphic that is generating a scroll ?

How to start a small graphic at the top of the div

how can i add data dynamically fromdatabase??

Currently Treant requires that users specify a container as a CSS ID selector (eg. #basic-example). However, because you can only have a single element with a given ID on the page, IDs can become problematic in dynamic applications where charts are created "on the fly".

Would it be possible, given that you're already taking a CSS selector, to also accept a CSS class selector (ie. .basic-example)?

Hi,

is it possible to repaint the graph?

I've have a switch for hiding/showing elements, which resizes the nodes. But the lines between are recalculated.

Is there any way to collapse all nodes at once via public method or a config to let only one node collapse at a time?

i added a caret icon to the switch via:
$("a.collapse-switch").html('< span class='glyphicon glyphicon-triangle-bottom' style='color:#fff'></span>') .on('click',function (e) { if($(this).find('span').hasClass('glyphicon-triangle-bottom')){ $(this).find('span').removeClass('glyphicon-triangle-bottom').addClass('glyphicon-triangle-top'); }else{ $(this).find('span').removeClass('glyphicon-triangle-top').addClass('glyphicon-triangle-bottom'); } });

so, the idea is to hide all other collapsed branches, when one collapse.
i also tried calling the click event on other uncollapsed branches, but doesn't work.

this would be an interesting option to implement.

Hello,
would firstly like to say the treant library is brilliant,
and secondly would like to ask if there is a utility to allow generation of trees with discontinuous scope? i.e What's in the image below, in particular figs c and e.
Thanks for your time, and best regards,
Colm.

The "Basic HTML Template" on http://fperucic.github.io/treant-js/ instructs to use Treant.min.js, yet a minified version isn't actually included in the Download zip file or the repository.

Thanks for the great library.

I'm creating an organizational chart. In the description, I want to put a lot of information there. But in order to make a node look neat, I need to make a new line content. How to write a newline character so that treant.js can interpret as a new line?

Is there way or can you support to draw multiple trees?
My data structure is like a hierarchy, but it has more than one root points. It cannot work.

To put it simply, window.Raphael is so 1999 ;)

In all seriousness, module systems are an established part of Javascript development in 2016 ... so much so that there are three different competing standards (AMD, CommonJS, and ES6). Luckily, even if you have no interest in using any of these systems yourself, you can still support users who do just by adding a bit of boilerplate to your library.

The UMD project specifies several ways of doing this, but most likely you'd want to adopt the "CommonJS Strict" pattern, which supports both AMD and CommonJS. This pattern can be found at: https://github.com/umdjs/umd/blob/master/templates/commonjsStrict.js (simply replace 'b' in that example with 'raphael'). If you adopt this pattern module-less users who provide window.Raphael will still be able to use Treant as if nothing changed, but AMD/CommonJS users will be able to use their packaging system, instead of the window global, to provide Raphael.

(As a side note, you don't need to worry about ES6 because it's not implemented anywhere yet. This means anyone using it is using a tool like Webpack, and those tools are perfectly capable of translating AMD/CommonJS in to ES6.)

Hi.
When collapsing nodes and when switch back (uncollapse) the shape of node gets different from the past. It gets higher in shape.
Can you tell what's the problem. I need very urgently

Is is possible to add multiple parents relations?

Hi,

I am having an issue when loading alot of nodes on screen. I will not get any errors but some of the nodes will not show up on screen. I am passing the nodes in a php array. I am wondering if it is a memory issue because I am loading of 75, 000 nodes.

Thanks

Hello. There is such an issue with those charts.
It's shown in div very well but printing is impossible. Because instead of printing whole chart, it just prints the are that fits the page and no more.(just a single page is printed)

I could not find an example on this. Is it possible to support multiple parent nodes for a child node?

A node with both a collapse/expand button, and a link currently seems to have the following behavior: when you click the collapse/expand button, the tree is redrawn, and afterwards the link is followed. Correct behavior (according to me) should be that the collapse button allows no click-through to the link. When you click next to the collapse button, the link is followed

Raphael JS shouldn't add custom CSS Properties to the svg-Element. Caused me some troubles with unexpected behaviour (especially the overflow:hidden; one).
Wrong behaviour was: suddenly vanishing connectors between nodes or these connections not even being drawn.

Hi there. First off, thanks for this great resource, Treant-js is a great looking library.
Could you please could you clearly define the license it is open sourced as (e.g. lgpl/MIT), not all open source licenses are compatible with one another.

if I used the "destroy" method, and then I have one tree in re-creating the chart growing tree_id a new tree is not created correctly even if the data structure is fine and the same data when you first load the page displays fine ... I tried to destroy methods add ( this.store = [];) which prevents increase tree_id but the tree is still not created correctly ... I just see the root item only
I do not know what the cause yet.
2)
If I used "destroy" and not change data only do I change the settings for the tree then it can display correctly only if I removed and re-created DIV element into which the tree forms ... the reason is that it does not reset the starting position and the tree will be displayed outside of the image

Seems like JSONconfig.getID() does not "reset" after completing a diagram. This led to problems when I tried to generate a second diagram in the same page (that is, create another Treant instance).

Actually, I modified this method to solve the issue -

Hi @fperucic,

Please, add your lib to bower repository.

Hi, Is there any way if i do collapse parent then close all its childs ( and one more level childs as well) if i open parent so all its child close.

Any example or solution?

i means to say if i collapse "Become best in class on commercial excellence" it must close all its childs in the next level and next after next level in colors, then it must remain close of its child if i open again "Become best in class on commercial excellence" means level by level i need to open.

Hello, thanks for the library!

Is there any way to avoid having all nodes being emitted to the DOM even when they are collapsed?
I'd like to try some easy strategy to minize CPU/browser time (such as only creating nodes when they are expanded).

Not related to my question here, but for some reason, to avoid invalid path errors I'm using a workarond in setConnectionToParent:

if(hidePoint && isNaN(hidePoint.x)) {
return;
}

thanks!

I get a href error, when my children nodes are bigger then 14 per parent note. Is there a known limit for children nodes?

Very useful library but does not support loop back, please see attached image.

I have an issue trying to animate custom nodes (filled with innerHTML property)
lines does animate correctly, but not the same for nodes. they just appear or dissapear.

i have seted this config:
animation: {
nodeAnimation: "bounce",
nodeSpeed: 700,
connectorsAnimation: "bounce",
connectorsSpeed: 700
},

but nothing...
i look into the Treant.js code. and in the show method, there is a ( $) condition, but it is not entering.

var oData = $oNode.data('treenode');

console.log(oData.parentId);  // ----------->  return 1 or another value;

Is a way to get a node by id or similar?

var otherNode = this.getNodeByID(1);

var oDataOtherNode = otherNode.data('treenode');

can draw a depency diagram like this ?
http://i.stack.imgur.com/coH9J.jpg