Detect level of zoom in / out

[sashkanz]

Can we detect the chart's zoom level? It would be awesome to know how deep are we in a zoom level. Let's say if we are at a certain deep zoom in, then we can add more custom detailed data to each node, like images, address etc...

[CharlesV7international]

In the jquery.orgchart.js you'll find out that the zoom is only a scale that is applied to the orgchart. If you want to have more control over the zoom, I suggest you to create 2 buttons and have them control the level of zoom with the css property named "zoom".

Here is a quick example of what i've done:

var currentZoom = parseFloat($('#chart-container').css('zoom'));
$('#zoomOut').on('click', function () {
    $('#chart-container').css('zoom', currentZoom -= 0.1);
});
$('#zoomIn').on('click', function () {
    $('#chart-container').css('zoom', currentZoom += 0.1);
});

From there you could manage your nodes with the "currentZoom" variable.

[idevwebs]

@CharlesV7international

I'm getting NaN with that code.

[CharlesV7international]

Have you defined 2 buttons with the id "zoomOut" and "zoomIn"? Is the id of your chart called "chart-container"?

From there, if you can't figure it out, I can't help you out anymore than this.

[idevwebs]

This works for me. Not the cleanest, but works.

             var oc = $('#chart-container').orgchart({
                'data' : file,
                'pan': true,
                'nodeContent': 'title',
                'initCompleted': function(){

                  setTimeout( function(){
                    
                    // center the chart to container
                    var $container = $('#chart-container');
                    $container.scrollLeft(($container[0].scrollWidth - $container.width())/2);
                    console.log("scroll to center "+$container[0].scrollWidth);
                    
                    // get "zoom" and make usable
                    var $chart = $('.orgchart');
                    $chart.css('transform', "scale(1,1)");
                    var div = $chart.css('transform');
                    var values = div.split('(')[1];
                    values = values.split(')')[0];
                    values = values.split(',');
                    var a = values[0];
                    var b = values[1];
                    var currentZoom = Math.sqrt(a*a + b*b);
                    var zoomval = .8;
                    console.log("current zoom "+currentZoom);

                    // zoom buttons
                    $('.chartzoomin').on('click', function () {
                        zoomval = currentZoom += 0.1;
                        $chart.css('transform', div+" scale(" + zoomval + "," + zoomval + ")");
                        console.log("zoomin "+zoomval);
                    });
                    $('.chartzoomout').on('click', function () {
                        zoomval = currentZoom -= 0.1;
                        $chart.css('transform', div+" scale(" + zoomval + "," + zoomval + ")");
                        console.log("zoomout "+zoomval);
                    });

                  }  , 1000 );
                }
              });

[bsell93]

I was able to slim down @idevwebs solution. I am also using a slider (AngularJS/Material) instead of two buttons.

onZoomChange() {
    let $chart = $('.orgchart');
    $chart.css('transform', 'scale(1,1)');
    let div = $chart.css('transform');
    $chart.css(
        'transform',
        div + ' scale(' + this.zoomSliderValue + ',' + this.zoomSliderValue + ')'
    );
}

[danleighton]

Thanks for these solutions guys. I am struggling to get them to work.

Any chance of a link to a complete source file so I can check out how to make it work?