Center orgchart

[cargie]

I have an issue on a very large chart. How will I put the chart to center or fit to screen so it will be easy to zoomout/in? Thank you

[clickstudio]

I would also love this. Very painful to have to scroll to the middle every time it loads.

[dabeng]

What's your favorite vertical-horizontal alignment ? top-center or middle-center ?

[dabeng]

Another thing, does it make sense to scale a huge orgchart to make it fit to screen? It will be a mass.

[clickstudio]

Here is the issue I'm facing with chart charts

https://www.awesomescreenshot.com/image/2573365/91eb33cb2f7fd4740a516f854f3ca765

See the top person in the chart is always off page and a long way to the right. It would be great to have a way to center the chart and even have a way to set the initial zoom so it fits on the page.

another great feature would be a way to select a name from a drop down and the person can be located without having to scroll around looking for them.

[clickstudio]

This is a good example of how the top level node is always centered https://www.basicprimitives.com/index.php?option=com_local&view=local&Itemid=40&lang=en

This is a good example of being able to search for a node http://www.getorgchart.com/Demos

[dabeng]

Hi @cargie @clickstudio , I created a Demo for you. Hope you like it :blush:

[clickstudio]

Thanks @dabeng. Much appreciated!!

[GeekWiinik]

Hi dabeng thanks for OrgChart, maybe not the same problem but when you collapse a node where is to deep some times it lost from screen, i made this, hope helps to solve the problem..

 $('.verticalEdge').on('click', function()
              {
                  setTimeout( function()
                  {
                      centerChart();
                  }  , 500 );
              });

  function centerChart()
            {
                    // Do something after 1 second
                    var parent = $('#chart-container');
                    var child = $('.orgchart');

                    child.css("position","absolute");
                    child.css("top", ((parent.height() - child.outerHeight()) / 2) + parent.scrollTop() + "px");
                    child.css("left", ((parent.width() - child.outerWidth()) / 2) + parent.scrollLeft() + "px");
                    child.css("transform",'matrix(1, 0, 0, 1, 0,0)');            
            }

[moreishi]

@dabeng Is there a way you can make a 'l2r' center position? Just like this Demo

[cppmyjob]

@dabeng your Demo works fine for static data only when initCompleted is fired. I would like the same thing for dynamic loaded data. Is there a way to detect that data is loaded and i can handle this event?

[hadihashem]

Hi @doarsal Your demo looks very nice Can you please share you code behind? Regards

[hadihashem]

Hello @doarsal Thank you for sharing

I noticed one issue which I'm also facing: data loading doesn't work on IE I'm facing the same problem due to the use of custom templates https://rawgit.com/dabeng/OrgChart/master/demo/custom-template.html

Besides, I'm struggeling with html2canvas, more precisly with unicode font rendering https://github.com/niklasvh/html2canvas/issues?utf8=%E2%9C%93&q=is%3Aissue+label%3AUnicode Did you experience such problem before?

I appreciate you help Regards

[dromeroDev]

This is a good example of how the top level node is always centered https://www.basicprimitives.com/index.php?option=com_local&view=local&Itemid=40&lang=en

This is a good example of being able to search for a node http://www.getorgchart.com/Demos

Hi @clickstudio, you could do the search?

[emf-developer]

i use this function on each change to center orgchart:

function setContainerMiddle(){
    // set positopn of scrollbar middle
    var outerContent = $('#chart-container');
    var innerContent = $('#chart-container > div');
    outerContent.scrollLeft((innerContent.width() - outerContent.width()) / 2);
    outerContent.scrollTop((innerContent.height() - outerContent.height()) / 2);
}

[FreezeSoul]

nice solution! thks

[GaryFrewin]

The functions above did not work for me... perhaps something to do with panning?? I'm not sure, anyway, the below works:

function centerChart()
            {
                    var parent = $('#chart-container');
                    var child = $('.orgchart');
		var childX = child.outerHeight() / -2;
		var childY = (parent.height() / 2) - (child.outerWidth() / 2);
                   	child.css("position","absolute");
                    child.css("transform", 'matrix3d(-6.12323e-17, 1, -1.22465e-16, 0, 1, 6.12323e-17, 0, 0, 7.4988e-33, -1.22465e-16, -1, 0,' + childX + ', ' + childY + ' , 0, 1)');        
            }
	  

You may need to switch childX and childY depending on your charts orientation.

[abasina09]

.orgchart{ display: flex!important; display: flex; align-items: center; justify-content: center; }

[sabatale]

@abasina09 Simple, I like it. Have you looked into getting an auto-zoom as well by any chance? (centered with a zoom level that shows the whole chart as a starting point)

[vinit-poojary]

.orgchart{ display: flex! important; display: flex; align-items: center; justify-content: center; }

export to does not work when this CSS is applied