I have been thinking for developing an organization chart in Salesforce.In my developer Organization I have used the Google's OrgChart Api and developed an Organization chart and I am so glad to share with you all. Please have a look at it and give suggestions.
<div id="OrgChart">
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization', '1', {packages:['orgchart']});
google.setOnLoadCallback(drawChart);
var chart;
var options;
function drawChart() {
options ={
allowHtml:true,
allowCollapse:true,
animation: {
duration: 1000,
easing: 'in'
},
};
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('string', 'Manager');
data.addColumn('string', 'ToolTip');
var response = [{!userdata}];
data.addRows(response);
chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
chart.draw(data, options);
google.visualization.events.addListener(chart, 'onmouseover', barMouseOver);
google.visualization.events.addListener(chart, 'onmouseout', barMouseOut);
}
function barMouseOver(e) {
chart.setSelection([e]);
}
function barMouseOut(e) {
chart.setSelection([{'row': null, 'column': null}]);
}
/*Zooming*/
$(document).ready(function(){
var disablebuttons = false;
var currZoom = 1;
$("#chart_div").draggable(
{
containment: 'parent',
drag: function() {
console.log('the mouse is being moved in chart');
disablebuttons = true;
$('#resetdiv').css("opacity","1");
$('#zoomindiv').css("opacity","0.4");
$('#zoomoutdiv').css("opacity","0.4");
$('#moveupdiv').css("opacity","0.4");
$('#movedowndiv').css("opacity","0.4");
$('#moverightdiv').css("opacity","0.4");
$('#moveleftdiv').css("opacity","0.4");
}
});
$("#_zi_icon").click(function(){
if(disablebuttons != true)
{
currZoom+=0.1;
$('#chart_div').css(
{
'zoom' : currZoom
});
$('#zoomoutdiv').css("opacity","0.7");
$('#zoomindiv').css("opacity","1");
}
});
$("#_zo_icon").click(function(){
if(disablebuttons != true)
{
currZoom-=0.1;
$('#chart_div').css(
{
'zoom' : currZoom
});
$('#zoomoutdiv').css("opacity","1");
$('#zoomindiv').css("opacity","0.7");
}
});
var Margin = 0;
$("#_ml_icon").click(function(){
if(disablebuttons != true)
{
Margin +=100;
$('#chart_div').animate({
'right' : Margin+'px'
},'slow');
$('#moveleftdiv').css("opacity","1");
$('#moverightdiv').css("opacity","0.7");
}
});
$("#_mr_icon").click(function(){
if(disablebuttons != true)
{
Margin -=100;
if(Margin >=0)
{
$('#chart_div').animate({
'right' : Margin+'px'
},'slow');
}else{
Margin = 100;
}
$('#moverightdiv').css("opacity","1");
$('#moveleftdiv').css("opacity","0.7");
}
});
var topmargin =0;
$("#_md_icon").click(function(){
if(disablebuttons != true)
{
topmargin +=100
$('#chart_div').animate({
'top' : topmargin+'px'
},'slow');
$('#movedowndiv').css("opacity","1");
$('#moveupdiv').css("opacity","0.7");
}
});
$("#_mu_icon").click(function(){
if(disablebuttons != true)
{
topmargin -=100
$('#chart_div').animate({
'top' : topmargin+'px'
},'slow');
$('#moveupdiv').css("opacity","1");
$('#movedowndiv').css("opacity","0.7");
}
});
$("#_rs_icon").click(function(){
currZoom=1;
topmargin =0;
Margin=0;
window.location = "http://strickerforce-developer-edition.ap1.force.com/CloudStrikerDemos?show_div=5";
});
$("#zoomindiv").hover(function(){
if(disablebuttons != true)
{
$('#_zinorm').css("display","none");
$('#_ziover').css("display","block");
}
}, function() {
$('#_zinorm').css("display","block");
$('#_ziover').css("display","none");
}
);
$("#zoomoutdiv").hover(function(){
if(disablebuttons != true)
{
$('#_zonorm').css("display","none");
$('#_zoover').css("display","block");
}
}, function() {
$('#_zonorm').css("display","block");
$('#_zoover').css("display","none");
});
$("#moverightdiv").hover(function(){
if(disablebuttons != true)
{
$('#_mrnorm').css("display","none");
$('#_mrover').css("display","block");
}
}, function() {
$('#_mrnorm').css("display","block");
$('#_mrover').css("display","none");
});
$("#moveleftdiv").hover(function(){
if(disablebuttons != true)
{
$('#_mlnorm').css("display","none");
$('#_mlover').css("display","block");
}
}, function() {
$('#_mlnorm').css("display","block");
$('#_mlover').css("display","none");
});
$("#moveupdiv").hover(function(){
if(disablebuttons != true)
{
$('#_munorm').css("display","none");
$('#_muover').css("display","block");
}
}, function() {
$('#_munorm').css("display","block");
$('#_muover').css("display","none");
});
$("#movedowndiv").hover(function(){
if(disablebuttons != true)
{
$('#_mdnorm').css("display","none");
$('#_mdover').css("display","block");
}
},function() {
$('#_mdnorm').css("display","block");
$('#_mdover').css("display","none");
});
$("#resetdiv").hover(function(){
if(disablebuttons != true)
{
$('#_rsnorm').css("display","none");
$('#_rsover').css("display","block");
}
}, function() {
if(disablebuttons != true)
{
$('#_rsnorm').css("display","block");
$('#_rsover').css("display","none");
}
});
var datalength = [{!userdata}];
if(datalength.length>0)
{
$("#navdiv").css("display","block");
}else{
$("#navdiv").css("display","none");
}
});
</script>
<style>
.hoverClass{
opacity:1;
}
</style>
<!-- Adding Zoom Panel -->
<div id="navdiv" style="position: absolute; right:10px; bottom: 10px; width: 97px; height: 64px; z-index: 20;" class="noSel;">
<div class="noSel controlsBg" style="position: relative; width: 100%; height: 100%; z-index: 1; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; background-color: rgb(0, 0, 0); opacity: 0.55;">
</div>
<div id="zoomindiv" style="position: absolute; display: block; left: 4px; top: 11px; width: 20px; height: 20px; z-index: 1;opacity: 0.7; filter: alpha(opacity=70);" class="noSel">
<div id="_zinorm" style="position: absolute; left: 1px; top: 1px; width: 18px; height: 18px; background-color: rgb(255, 255, 255); border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; display: block; background-position: initial initial; background-repeat: initial initial;">
</div>
<div id="_ziover" style="position: absolute; left: 0px; top: 0px; width: 20px; height: 20px; background-color: rgb(255, 255, 255); border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; display: none; background-position: initial initial; background-repeat: initial initial;">
</div>
<div id="_zi_icon" style="position: absolute; left: 1px; top: 1px; width: 18px; height: 18px; background: transparent url({!URLFOR($Resource.GoogleApiResource, 'GAResources/icons.png')}) -16px -16px no-repeat;">
</div>
</div>
<div id="zoomoutdiv" style="position: absolute; display: block; left: 4px; top: 33px; width: 20px; height: 20px; z-index: 2; opacity: 0.4;filter: alpha(opacity=70);" class="noSel">
<div id="_zonorm" style="position: absolute; left: 1px; top: 1px; width: 18px; height: 18px; background-color: rgb(255, 255, 255); border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; display: block; background-position: initial initial; background-repeat: initial initial;">
</div>
<div id="_zoover" style="position: absolute; left: 0px; top: 0px; width: 20px; height: 20px; background-color: rgb(255, 255, 255); border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; display: none; background-position: initial initial; background-repeat: initial initial;">
</div>
<div id="_zo_icon" style="position: absolute; left: 1px; top: 1px; width: 18px; height: 18px; background: transparent url({!URLFOR($Resource.GoogleApiResource, 'GAResources/icons.png')}) -66px -16px no-repeat;">
</div>
</div>
<div id="moverightdiv" style="position: absolute; display: block; left: 37px; top: 23px; width: 18px; height: 18px; z-index: 3; opacity: 0.4;filter: alpha(opacity=70);" class="noSel">
<div id="_mrnorm" style="position: absolute; left: 1px; top: 1px; width: 16px; height: 16px; background-color: rgb(255, 255, 255); border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; display: block; background-position: initial initial; background-repeat: initial initial;">
</div>
<div id="_mrover" style="position: absolute; left: 0px; top: 0px; width: 18px; height: 18px; background-color: rgb(255, 255, 255); border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; display: none; background-position: initial initial; background-repeat: initial initial;">
</div>
<div id="_mr_icon" style="position: absolute; left: 1px; top: 1px; width: 16px; height: 16px; background: transparent url({!URLFOR($Resource.GoogleApiResource, 'GAResources/icons.png')}) -117px -17px no-repeat;">
</div>
</div>
<div id="moveleftdiv" style="position: absolute; display: block; left: 75px; top: 23px; width: 18px; height: 18px; z-index: 4; opacity: 0.4;filter: alpha(opacity=70);" class="noSel">
<div id="_mlnorm" style="position: absolute; left: 1px; top: 1px; width: 16px; height: 16px; background-color: rgb(255, 255, 255); border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; display: block; background-position: initial initial; background-repeat: initial initial;">
</div>
<div id="_mlover" style="position: absolute; left: 0px; top: 0px; width: 18px; height: 18px; background-color: rgb(255, 255, 255); border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; display: none; background-position: initial initial; background-repeat: initial initial;">
</div>
<div id="_ml_icon" style="position: absolute; left: 1px; top: 1px; width: 16px; height: 16px; background: transparent url({!URLFOR($Resource.GoogleApiResource, 'GAResources/icons.png')}) -167px -17px no-repeat;">
</div>
</div>
<div id="moveupdiv" style="position: absolute; display: block; left: 56px; top: 42px; width: 18px; height: 18px; z-index: 5; opacity: 0.4;filter: alpha(opacity=70);" class="noSel">
<div id="_munorm" style="position: absolute; left: 1px; top: 1px; width: 16px; height: 16px; background-color: rgb(255, 255, 255); border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; background-position: initial initial; background-repeat: initial initial;">
</div>
<div id="_muover" style="position: absolute; left: 0px; top: 0px; width: 18px; height: 18px; display: none; background-color: rgb(255, 255, 255); border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; background-position: initial initial; background-repeat: initial initial;">
</div>
<div id="_mu_icon" style="position: absolute; left: 1px; top: 1px; width: 16px; height: 16px; background: transparent url({!URLFOR($Resource.GoogleApiResource, 'GAResources/icons.png')}) -217px -17px no-repeat;">
</div>
</div>
<div id="movedowndiv" style="position: absolute; display: block; left: 56px; top: 4px; width: 18px; height: 18px; z-index: 6; opacity: 0.4;filter: alpha(opacity=70);" class="noSel">
<div id="_mdnorm" style="position: absolute; left: 1px; top: 1px; width: 16px; height: 16px; background-color: rgb(255, 255, 255); border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; background-position: initial initial; background-repeat: initial initial;">
</div>
<div id="_mdover" style="position: absolute; left: 0px; top: 0px; width: 18px; height: 18px; display: none; background-color: rgb(255, 255, 255); border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; background-position: initial initial; background-repeat: initial initial;">
</div>
<div id="_md_icon" style="position: absolute; left: 1px; top: 1px; width: 16px; height: 16px; background: transparent url({!URLFOR($Resource.GoogleApiResource, 'GAResources/icons.png')}) -267px -17px no-repeat;">
</div>
</div>
<div id="resetdiv" style="position: absolute; display: block; left: 56px; top: 23px; width: 18px; height: 18px; z-index: 7; opacity: 0.4;filter: alpha(opacity=70);" class="noSel">
<div id="_rsnorm" style="position: absolute; left: 1px; top: 1px; width: 16px; height: 16px; background-color: rgb(255, 255, 255); border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; display: block; background-position: initial initial; background-repeat: initial initial;">
</div>
<div id="_rsover" style="position: absolute; left: 0px; top: 0px; width: 18px; height: 18px; background-color: rgb(255, 255, 255); border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; display: none; background-position: initial initial; background-repeat: initial initial;">
</div>
<div id="_rs_icon" style="position: absolute; left: 1px; top: 1px; width: 16px; height: 16px; background: transparent url({!URLFOR($Resource.GoogleApiResource, 'GAResources/icons.png')}) -317px -17px no-repeat;">
</div>
</div>
</div>
<!-- End of Zoom Panel-->
<br/>
<div id='chart_div' style="font-size:18px;padding:30px;background-color: white;">
</div>
</div>
