Set scaleInitial: BALKANGraph.match.boundary, but not working!
Test on https://jsfiddle.net/BALKANGraph/8p05cmf4/utm_source=website&utm_medium=embed&utm_campaign=8p05cmf4
Here is my data of nodes
[
{ "id": "01", "pid": "", "name": "01", "title": "" },
{ "id": "j001", "pid": "", "name": "ceo", "title": "asd" },
{ "id": "virtualnode!@#", "pid": "", "orgid": "", "name": "asd", "title": "" },
{ "id": "001", "pid": "j001", "name": "asd", "title": "asd" },
{ "id": "0011", "pid": "j002", "name": "asd", "title": "asd" },
{ "id": "003", "pid": "j001", "name": "asd", "title": "asd" },
{ "id": "004", "pid": "j001", "name": "asd", "title": "asd" },
{ "id": "10", "pid": "004", "name": "10", "title": "" },
{ "id": "107", "pid": "12", "name": "17", "title": "" },
{ "id": "12", "pid": "004", "name": "12", "title": "" },
{ "id": "121", "pid": "001", "name": "121", "title": "" },
{ "id": "131", "pid": "003", "name": "131", "title": "" }
]

If the "text-overflow" property in is set to 'multiline' then special chars will not be displayed properly. Please refer to the attached screenshots.

Hi,

Is there an option/method/property to specify nodeMenu to be visible only when the node has a child(s)? I would like to avoid this menu to be displayed into all child boxes, but only into the parent node. Like: when I have a team with a team lead and a couple of employees below him, the menu to be visible only into team lead's box.

Your api web page is not complete. Only 5 methods are described.

https://balkangraph.com/OrgChartJS/Docs/APIReference

Is there any way to export the file to a base64 or blob instead of a file itself for further use?

In my case, I want to build a print page and the chart needs to be shown in the middle with other data.

Multiline group labels are not rendering correct on IE (working fine in Chrome). The location if the second line seems to be wrong in IE.

Hi,
First off... I want to say that this is a great plugin! It's been working great and it has many features. So, thank you for keeping it updated and so useful!! Kudos!!

Now, this is more a request than an issue: Is there a way to customize the text block that pops up when you click on any node? I would love to be able to:

• Show fields on the nodes but hide them on the text block. Or viceversa (How does the script knows which fields to show on the nodes? maybe I haven't figured that out)
• To be able to see all the text when you scroll down (I have many fields, so right now the last items get cut off and I don't see them)
• To change the CSS of the text. I would love it if it is more compact and the user doesn't have to scroll down too much.

Anyway, let me know if you have any ideas on how I can accomplish those things. Let me know in case you are interested in seeing my implementation of your plugin, so I can give you access to my system.

Best regards,

Ivan

I m using Org chart Js for Assign , Add , update ,Delete employee Hierarchy Using Handlers Event ,

Now i want to add Drop and Drag functionality in Orgchart js but i could not find a specific event For Handling Drop and Drag Event .

So Please help me for this .

May I know is there a limit to number of levels of nodes?
Currently it stuck at Level 101.

when it reached its maximum level it will show the link to nowhere.

Thanks.

I want to have a loading at the beginning of the export and hide the loading at the end of the export, but no exportStart and exportEnd events.

I hope you can provide some information about such events.

thx.

Hi, I'm having a bug when I bind some specific attr. See "JobGrade". If I change to another attr (integer) to test, it works fine.

https://jsfiddle.net/phelippem/pf8hLtkd/1/

Hi,

In our application we allow users to be members of multiple groups. For example, a user could be a member of a department group, a job function group, and a team group.

It would be great to be able to display these multiple group memberships for a user visually in OrgChartJS.

To accomplish this in OrgChartJS, I suggest that a user's node would be replicated in each group that the user is a member of.

Dear sir,

• I put 15k+ users in BALKANGraph but can't view and browser also hanging.
• I checked JS fiddle also put my data 15k+ users but can't view properly so kindly please check my problem give me solution

Thanking you

We can collapse nodes by using

sender.collapse(id, ids)

However, when GROUPS are open they stay open, even when the nodes are collapsed.

Could you add an API method to close groups?

On a very large chart, the bouncing effect when you drag a chart off screen can be unpleasant because the chart returns too far to the center. Please add an option to deactivate the bounce.

I’m testing the library on my mobile and the scroll bars don’t show.. they work but I cannot see them.
Any ideas?

Thanks

I'm testing this library for building organization charts. I would like to create an horizontal chart from left to right instead of vertical.
Does anybody knows how to do that?
Best regards.

I look at the source code:

var OrgChart = function(b, a) { 
  // ...
}

Only declare the OrgChart function, but there is no export.So I can only in HTML file for reference.

Hi,

Is there an option to order the nodes on the same level by multiple criteria, like:

orderBy: "name, position"

in order to specify the ordering when the names (or any other common property) are equal?

when "<a" ( "<" and any letter ) included in the text, the node will be empty!

Right now, every node has the same height. Is it possible to have a dynamic height of each node based on the content?

...I am evaluating OrgChartJS and am trying to use the 2nd Parent like this "spids: [12983]". It works fine, How can I change the line-type from the orange line used by default to a dottet line?

I appreciate your help,
Dirk

4PLANOrgChart.html.zip
I have a problem with grouping. Please use the attached file, open "Haeger, Max" and then "Müller, Bruno". You will see a lot of "Azubi". Drag "Azubi, Axel" (very bottom) over "Azubi, Andreas" (right side above Axel). The Menu appears. Choose "Add in Group" -> nothing happens. Choose "Add as Child" -> a Group is created. Then drag "Azubi, Andrea" (at the left) over "Azubi, Andreas", the same Menu Problem. When you choose "Add as Child" after trying "Add in Group" the Group and its content disappears.

having a minimap over the expanded tree would be great

In google chrome the zoom is very slow, in firefox works well.

With few nodes it works fine, but with 500 the zoom is very slow

When I load my org chart with nodes in a state of BALKANGraph.COLLAPSE it causes the graph behavior to be weird. If you drag too far past the bounds of the graph it will force it to recenter instead of pulling back to the boundary.

orgchart = new OrgChart(document.getElementById("tree"), {
    scaleInitial: 1,
    scaleMax: 2,
    template: "mila",
    nodeBinding: {
        field_0: "name"
    },
    onClick: function (sender, node) {
        nodeClicked(sender, node);
        return false; //cancel nodeMouseClickBehaviour action
    },
    nodes: treeData,
    orientation: BALKANGraph.orientation.top,
    mouseScroolBehaviour: BALKANGraph.action.zoom,
    tags: {
        "hidePanel": {
            state: BALKANGraph.COLLAPSE
        },
        "user": {
            template: "ana"
        }
    }
});

Removing the state from the "hidePanel" tag will cause the graph to behave normally.

With the latest version, node rendering gets corrupted on certain zoom levels:

Tested on Google Chrome.

There seems to be a bug in OrgChart.prototype.ripple

this error comes up when using chart.addNode(new_node); or chart.add(new_node);

updating r.ripple to r.node works

• Font not respected (uses the standard Times New Roman)
• Images missing in the PNG

Is it possible that the organization chart can be controlled by pan zoom from a mobile device ?. In the previous version of GetOrgChat if possible, but not in this new version.

I created a first Orgchart using OrgChartJS. There seems to be a problem with PDF Export. Please use the attached HTML File, open the Node "Ebbi, Stefan" and the nodes below. Then use "PDF Export".

On my computer (Macbook Mojave, Chrome Browser) nothing will be exported. CSV works fine and sometimes I get PDF exports, but it seems not to be working every time.

4PLANOrgChart.html.zip

Hello!
Friday I was testing the Number of Children OrgChart, and it was working nicely, but today, when I was using it again, this specific OrgChart was not working. So I entered in your website to check if I was doing something wrong and it was not working on your website either. Are you changing some code or it is a problem with my browser/i don't know?

Here is the message I'm getting in Chrome's console:

Thank you in advance

Within the latest release 3.7.4, nodes with the same pid which don't have child nodes are displayed vertically instead of horizontally on the same level:

template: "rony", scaleInitial: BALKANGraph.match.boundary, layout: BALKANGraph.mixed, nodes: [{ id: 1, name: "Denny Curtis", title: "CEO", img: "https://balkangraph.com/js/img/2.jpg" }, { id: 2, pid: 1, name: "Ashley Barnett", title: "Sales Manager", img: "https://balkangraph.com/js/img/3.jpg" }, { id: 3, pid: 1, name: "Caden Ellison", title: "Dev Manager", img: "https://balkangraph.com/js/img/4.jpg" }, { id: 4, pid: 2, name: "Elliot Patel", title: "Sales", img: "https://balkangraph.com/js/img/5.jpg" }, { id: 5, pid: 2, name: "Lynn Hussain", title: "Sales", img: "https://balkangraph.com/js/img/6.jpg" }, { id: 6, pid: 3, name: "Tanner May", title: "Developer", img: "https://balkangraph.com/js/img/7.jpg" }, { id: 7, pid: 3, name: "Fran Parsons", title: "Developer", img: "https://balkangraph.com/js/img/8.jpg" }, { id: 8, pid: 1, name: "John Doe", title: "L1 Developer", img: "" }, { id: 9, pid: 1, name: "Frank Black", title: "L1 Developer", img: "" }, { id: 10, pid: 1, name: "Billy Idol", title: "L1 Developer", img: "" }, { id: 11, pid: 1, name: "Jim Fox", title: "L1 Developer", img: "" }, { id: 12, pid: 8, name: "Michael Bolton", title: "L2 Developer", img: "" } ]

3.5.0 release:

3.7.4 release:

I am trying to add a new Element under "Tanner May" on your demo website https://balkangraph.com/OrgChartJS/Demos/BasicUsage

I an add a new Element, but cant save any data using the "Edit" menu.

I also tried to upload an image for the new element which did not work either, may be same problem...

I also tried to change the Name of Mr. Tanner using the "Edit" Menu, didn't work either.

MacOS Mojave, Chrome

https://jsfiddle.net/gh/get/library/pure/BALKANGraph/Demos/tree/master/OrgChart/Events

Hi,
I'm trying to integrate your library in our enterprise appllication. This application is written in Angular and we want to use custom angular components as nodes in the graph. Is there a way to do this?

I am trying to use Balkangraph to create a family tree - I see the Royal family example, however I am looking to not have to hard code the connections (for marriage or multiple parents, etc). Is there an easier way to do this?

The chart can be dragged on the screen by clicking on the background and dragging the chart around. However, this does not work when you start dragging on a box instead of on the background. This can be very disturbing when you are zoomed in on a chart.

Hello, I would like to know how I can change the orientation of the OrgChart dynamically with a select. Can you help me, please? I have the following script, but it does not work correctly.

document.getElementById("selectOrientation").addEventListener("change", function () {
chart.config.orientation = this.value;
chart.draw();
});

Hi,
I am having an issue with exporting charts with foreignobject data.

https://jsfiddle.net/aaron_dunleavy/7qmkztb2/7/

Thanks,

I'm using:
onExpCollClick: function (sender, action, id) {chart.center(id);}

but the chart does not move when a node is clicked... it stays where it is and doesn't center.

The latest OrgChartJS Version offers a new button that expands all nodes (at least I did not recognize it earlier).

This is cool, but within a large Orgchart the user needs to close a lot of nodes after (inadvertently) clicking the button. Is there a chance to go back to the state prior to the click, for example by clicking again?

Open the example on https://balkangraph.com/OrgChartJS/Demos/Grouping

Look at "HR team". I'd like to replace that label with "Human Resources team" but that won't work since that line is too long to fit.

Please add the possibility to have group titles that can span multiple lines.

The nodeMouseClickBehaviour option seems only support predefined methods. Can I do something like when clicking the node and console.log the node info or something?

We only have 28 nodes, but nothing happens when we export the PDF.

And It also takes some time to export a node.

Roadmap | BALKANGraph

The following represents BALKANGraph‘s current view of its product development cycle and future directions.

[New feature] - Different fields according to the zoom level

When the chart is zoomed out the text becomes unreadable, with this enhancement developers will be able to define less text fields for zoomed out charts. See beta https://jsfiddle.net/BALKANGraph/gjdLz056/

[New feature] - Organization Unit Views

Use case:

1. On initial load the user will see “Companies” view
2. When user clicks Company node will see all “Departments” from the clicked company and “Companies” view will disappear
3. When the user clicks Department node the user will see all “Employees” from clicked department and “Departments” will disappear
4. Etc..

The views will be configurable.

[New product] - OrgChart Cloud for developers

1. OrgChart Cloud can be used as serverless service and/or deployed on-premise.
2. OrgChart Cloud will have an option to be shared and embedded in blogs.
3. OrgChart Cloud API will be used for CRUD operations such as add node, remove node etc.
4. The integration of OrgChart Cloud into client’s application will be for less than a minute.

[New Sub Products] JavaScript Wrappers

1. Angular wrapper
2. React wrapper

[New product] - GetOrgChart for HRs

Shutting down the current GetOrgChart library and create HRM system based on OrgChart Cloud, hosted under http://GetOrgChart.com

If you have idea how we could improve our product and service please write a comment

Hi,

In 4.1.2 you have introduced zoom in/out animation. How this animation can be controlled as of speed or ultimately disabled at all?

I need to communicate with the server after drag, but there were no drag event.
Hope to be able to provide drag event, and drag method.
thx.