4

My problem is using google orgchart.

My question is how to center the chart at a specific node?

As it is very large and is in a smaller div , just cut in half and I use to show the position of a person in the orgchart... so if the position is in the cut part I need move the chart, but i just need center horizontally in the node of the position...

I try many things and I nothing give me results

Javascript/JQuery

google.setOnLoadCallback(drawChart);
function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Name');
    data.addColumn('string', 'Manager');
    data.addColumn('string', 'ToolTip');

    data.addRows([
        ['a','',''],
        ['b','a',''],
        ['c','a',''],
        ['d','a',''],
        ['e','a',''],
        ['o','a',''],
        ['f','b',''],
        ['g','b',''],
        ['h','c',''],
        ['i','c',''],
        ['j','d',''],
        ['k','d',''],
        ['l','e',''],
        ['m','e',''],
        ['o','p',''],
        ['o','q',''],
    ]);

    var chart = new google.visualization.OrgChart(document.getElementById('draggable'));
    chart.draw(data, {allowHtml:true});

    var selectedArray = new Array();
    var counter = 0;
    var commaSeperatedDefaultValues = "e";
    var defaultValuesArray = commaSeperatedDefaultValues.split(",");
    var z = 16;                                 


    for(i=0; i < z ;i++) {
        chart.setSelection([{row: i}]);
        var temp = chart.getSelection()[0];
        var a = defaultValuesArray.indexOf(data.getValue(temp.row, 0));
        if(a != -1)
            selectedArray[counter++] = temp;
    }
    chart.setSelection(selectedArray);
}

$(function() { 
    $("#draggable").draggable({ 
        cursor:'move',
        axis: "x",
        drag:function(e, ui){               
            if(ui.offset.left > $("#container").offset().left)
                return false;                       if(ui.offset.left + ui.helper.width() <= $("#container").offset().left + $("#container").width())
                    return false;
        }
    });
});   

HTML

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['orgchart']}]}"></script>

<div id="container" style="cursor: w-resize">
<div id="draggable" style="display: table;"></div>
</div> 

CSS

#container {
    width: 200px;
    border: 1px solid #000000;
}

Relevant JSFiddle

leigero
  • 3,233
  • 12
  • 42
  • 63
André
  • 41
  • 4
  • 1
    Welcome to SO. If you want help with your problem, you should provide a code snippet of the issue so that users here can help trouble shoot the error. Without code, we're unable to know what might be wrong. – leigero Oct 01 '15 at 20:05
  • oh im sorry, basically is that... http://jsfiddle.net/Lyvpuup5/ how center node E selected in the div – André Oct 02 '15 at 13:41

0 Answers0