Labels are detached from nodes in case of multiple graphs on same page

Question

<style type="text/css">
   #container {***strong text***
   /*width: auto;*/
   height: auto;
   margin:0 auto;
   position:relative;
   }
   #center-container {
   /*width:770px;*/
   left:200px;
   background-color:#FFF;
   color:#ccc;
   width: 100%;
   }
   #infovis {
   position:center;
   width:auto;
   margin:auto;
   height: 800px !important;
   overflow-y:hidden !important;
   }
   #infovis-canvas,#info-canvas
   {
   position: absolute;
   top: 0px;
   left: 0px;
   width: 1078px;
   height: 800px;
   background: white;
   }
   #info {
   position:center;
   width:auto;
   height: 800px !important;
   margin:auto;
   overflow-y:hidden !important;
   }
   #NetworkGraphView {
   position: center;
   width:100%;
   height: 100%;
   margin: auto;
   overflow: hidden !important;
   }
   .chartbar{
   text-align: center;
   display: table-cell;
   vertical-align: middle;
   height: 34px;
   }
   .chartbar p {
   display: inline-block;
   vertical-align: top;
   font-size: 10px;
   margin: 0px 5px 0px 0px;
   float: right;
   }
   .searchSteps{
   float: right;
   }
   .infobar{
   margin-right: 0px;
   margin-left: 100px;
   text-align: center;
   }
</style>
<script language="javascript" type="text/javascript" src="<?php echo BASEURL; ?>app/webroot/jitcharts/js/jit-yc.js"></script>
<script language="javascript" type="text/javascript" src="<?php echo BASEURL; ?>app/webroot/jitcharts/js/jit.js"></script>
<link type="text/css" href="<?php echo BASEURL; ?>app/webroot/jitcharts/css/base.css" rel="stylesheet" />
<link type="text/css" href="<?php echo BASEURL; ?>app/webroot/jitcharts/css/Spacetree.css" rel="stylesheet" />
<script language="javascript" type="text/javascript" src="<?php echo BASEURL; ?>app/webroot/jitcharts/js/jit-yc.js"></script>
<script language="javascript" type="text/javascript" src="<?php echo BASEURL; ?>app/webroot/jitcharts/js/jit.js"></script>
<script language="javascript" type="text/javascript" src="<?php echo BASEURL; ?>app/webroot/jitcharts/js/excanvas.js"></script>
<script language="javascript" type="text/javascript" src="<?php echo BASEURL; ?>app/webroot/d3.min.js"></script>
<script language="javascript" type="text/javascript" src="<?php echo BASEURL; ?>app/webroot/html2canvas.js"></script>
<script language="javascript" type="text/javascript">
   var approve_counter = 0;
   var pending_counter = 0;
   var flag = 0;
   var fd = '';

   function traverse(arr) {
        var len = arr.length;
        for(var i=0; i < len; i++) {
            $jit.json.each(arr[i], function(n) {
                n.data.$orn = arr[i]['status'];
                n.data.$shape = arr[i]['shape'];
                n.data.$S_status = arr[i]['S_status'];
            });
            traverse(arr[i].children);
        }
   }

   var labelType, useGradients, nativeTextSupport, animate;

   (function() {
    var ua = navigator.userAgent,
    iStuff = ua.match(/iPhone/i) || ua.match(/iPad/i),
    typeOfCanvas = typeof HTMLCanvasElement,
    nativeCanvasSupport = (typeOfCanvas == 'object' || typeOfCanvas == 'function'),
    textSupport = nativeCanvasSupport
    && (typeof document.createElement('canvas').getContext('2d').fillText == 'function');
    labelType = (!nativeCanvasSupport || (textSupport && !iStuff))? 'Native' : 'HTML';
    nativeTextSupport = labelType == 'Native';
    useGradients = nativeCanvasSupport;
    animate = !(iStuff || !nativeCanvasSupport);
   })();

   var Log = {
    elem: false,
    write: function(text){
        if (!this.elem)
        this.elem = document.getElementById('log');
        this.elem.innerHTML = text;
        this.elem.style.left = (500 - this.elem.offsetWidth / 2) + 'px';
    }
   };

   function init(){
    //init data
    var json = {
        id: "<?php echo $BatchNo . ', ' . $StepName; ?>",
        name: "<?php
      if ($gtype == 'buffer') {
      echo $BatchNo . ': ' . $bufferName;
      } else {
      echo $BatchNo . ', ' . $StepName;
      }
      ?>",
   data: {},
   children: [<?php echo $str; ?>]
   };

   var arr = json.children, len = arr.length;
   traverse(arr);
   var normal = $jit.id('s-normal');


   $j(document).ready(function() {

   });

   function networkgraph() {
   fd = new $jit.ForceDirected({  
   injectInto: 'infovis', 
   iterations: 200,  
   levelDistance: 130,  
   withLabels:true,
   Navigation: {  
    enable: true,  
    type: 'Native',  
    panning: 'avoid nodes',  
    zooming: 10 
   },  
   Label:{
    size: 4,
    style: 'bold',
    color: '#23A4FF',  
   },
   Node: {  
    overridable: false,  
    type: 'rectangle',  
    color: 'Blue',
    width:10,
    height:10,  
    dim: 3,  
    lineWidth: 1,  
    transform: true,  
    align: "center",  
    angularWidth:1,  
   }, 
   Edge:{  
    overridable: true,
    type: 'line',  //'hyperline'  
    color: '#23A4FF',  
    lineWidth: 1  
   },  

   Events:{  
    enable: true,  
    type: 'Native', 
    enableForEdges: true, 
    onMouseEnter: function() {  
      fd.canvas.getElement().style.cursor = 'move';  
    },  
    onMouseLeave: function() {  
      fd.canvas.getElement().style.cursor = '';  
    },  
    onDragMove: function(node, eventInfo, e) {  
      var pos = eventInfo.getPos();  
      node.pos.setc(pos.x, pos.y);  
      fd.plot();  
    },  
    onTouchMove: function(node, eventInfo, e) {  
      $jit.util.event.stop(e); //stop default touchmove event  
      this.onDragMove(node, eventInfo, e);  
    },
    onClick: function (node, eventInfo, e){ 
        if (!node) return;
        if (node.nodeFrom && node.nodeTo) {
           if(node.selected){
              node.setDataset('current', {  
                lineWidth: 1,  
                color: '#23a4ff',
              });
              node.selected = false;
           }else{
              node.setDataset('current', {  
                lineWidth: 4,  
                color: '#ff0000'  
              });
              node.selected = true;
           }
        } else {
            if(!node.selected) {  
              node.selected = true;  
              node.setData('dim', 3, 'end');  
              node.eachAdjacency(function(adj) {  
                adj.setDataset('current', {  
                  lineWidth: 4,  
                  color: '#ff0000'  
                });
                adj.selected=true;
              });  
            } else {  
              delete node.selected; 
              node.setData('dim', 7, 'end');  
              node.eachAdjacency(function(adj) {  
                adj.setDataset('current', {  
                  lineWidth: 1,  
                  color: '#23a4ff',
                });
                adj.selected=false;
              });   
            }  
        }
        fd.fx.animate({  
          modes: ['node-property:dim','edge-property:lineWidth:color'],  
          duration: 5 
        });  
    }
   },  
   onCreateLabel: function(label, node){ 
    console.log(label);
    console.log(node);
    console.log(node.id);
    label.id = node.id;  
    label.innerHTML = node.name;  

    var style = label.style;  
    style.color = "#ff0000";  
    <?php if ($gtype != 'buffer') {?>
      if(flag==0){
           Selected_batch_status = '<?php echo $Selected_batch_status;?>'
          if(Selected_batch_status == 'approved'){
              style.color = '#333';
              approve_counter = approve_counter + 1;

          }else{
              style.color = '#ff0000';
              pending_counter = pending_counter + 1;
          }
          flag=1;
        }else{
            if(node.data.$S_status=='approved'){
              style.color = '#333';
              approve_counter = approve_counter + 1;
            }else if(node.data.$S_status == 'no record'){
              style.color = '#00F';
            }else{
              style.color = '#ff0000';
              pending_counter = pending_counter + 1;
            }
        }
        <?php }
      else{
      ?>
        style.color = '#333';            
        <?php }?>
        style.fontSize = '11px';
    //    style.background = 'lightgreen';
        style.cursor = 'pointer';
        style.textAlign= 'center';
        style.paddingTop = '5px';
   },
   onBeforePlotNode: function(node){
    function setLabelScaling() {
        var x = fd.canvas.scaleOffsetX,
        y = fd.canvas.scaleOffsetY;
        $j(".node").css("-moz-transform", "scale(" + x +"," +  y + ")");
        $j(".node").css("-webkit-transform", "scale(" + x +"," + y + ")");
        $j(".node").css("-ms-transform", "scale(" + x +"," +  y + ")");
        $j(".node").css("-o-transform", "scale(" + x +"," +  y + ")");
    }
    setLabelScaling();
    if(node.data.$shape=='circle') {
        node.data.$type = "circle";
        node.data.$radius = "50";
        node.data.$color = "#990000";
    }
    if (node.selected) {
        node.data.$color = "#990000";
        node.data.$radius = "50";
        node.Label.style.color = "#990000";
    }
    else {
        if(node.data.$shape !='circle') {
        delete node.data.$color;
        }
        if(!node.anySubnode("exist") && node.data.$shape !='circle') {
            var count = 0;
            node.eachSubnode(function(n) { count++; });
        }
    }
   },
   // onPlaceLabel: function(domElement, node){  
   //       var style = domElement.style;  
   //       var left = parseInt(style.left);  
   //       var top = parseInt(style.top);  
   //       var w = domElement.offsetWidth;  
   //       style.left = (left - w / 2) + 'px';  
   //       style.top = (top + 10) + 'px';  
   //       style.display = '';  
   // }  
   });
   fd.loadJSON(json);  
   // compute positions incrementally and animate.  
   fd.computeIncremental({  
   iter: 40,  
   property: 'end',  
   onStep: function(perc){  

   },  
   onComplete: function(){  
   // Log.write('done');  
   fd.animate({  
   modes: ['linear'],  
   transition: $jit.Trans.Elastic.easeOut,  
   duration: 2500  
   });  
   }  
   });

   $j("#searchSteps").keyup(function(){
   var src_str = $j("#infovis").html();
   var term = $j("#searchSteps").val().toLowerCase();
   term = term.replace(/(\s+)/,"(<[^>]+>)*$1(<[^>]+>)*");
   var pattern = new RegExp("("+term+")", "gi");
   src_str = src_str.replace(pattern, "<mark>$1</mark>");
   src_str = src_str.replace(/(<mark>[^<>]*)((<[^>]+>)+)([^<>]*<\/mark>)/,"$1</mark>$2<mark>$4");
   $j("#infovis").html(src_str);

   /*$jit.Graph.Util.eachNode(fd.graph, function(node) { 
   if(node.name.toLowerCase().indexOf($j("#searchSteps").val().toLowerCase()) > 0){
   alert("Hello");

   //  fd.graph.Label.color="#FFFF00 !important";
   //  $jit.Graph.Util.labels.getLabel(node.id).backgroud = 'red';
   // $j("").css({"background-color": "yellow", "font-size": "200%"});
    console.log(fd.graph);
    // console.log('Mukesh');
   }
   });   */
   });               
   }

   function spacetree(){
   var st = new $jit.ST({
        constrained: false,
        levelsToShow: 100,
        injectInto: 'info',
        multitree: true,
        withLabels:true,
        duration: 400,
        transition: $jit.Trans.Quart.easeInOut,
        levelDistance: 50,
        siblingOffset: 20,
        subtreeOffset: 20,
    Node: {
        height: 60,
        width: 120,
        type: 'rectangle',
        color: '#ffd',
        overridable: true,
        CanvasStyles: {
        shadowColor: '#000',
        shadowBlur: 1
        }
    },
   Label:{
    size: 6,
    style: 'bold',
    color: '#23A4FF', 
    type:'Native' 
    },
    Edge: {
        type: 'line',
        overridable: true
    },
    Navigation: {
        enable: true,
        panning: true,
        zooming: 50
    },
    onCreateLabel: function(label, node){
        console.log(label);
        console.log(node);
        console.log(node.id);
        label.id = node.id;
        label.innerHTML = node.name;
        label.onclick = function(){
            return false;
        };
        var style = label.style;
        style.width = 100 + 'px';
        style.height = 50 + 'px';
        <?php if ($gtype != 'buffer') {?>
        if(flag==0){
            Selected_batch_status = '<?php echo $Selected_batch_status;?>'
            if(Selected_batch_status == 'approved'){
            style.color = '#333';
            approve_counter = approve_counter + 1;
        }else{
            style.color = '#ff0000';
            pending_counter = pending_counter + 1;
        }
        flag=1;
        }else{
        if(node.data.$S_status=='approved'){
            style.color = '#333';
            approve_counter = approve_counter + 1;
        }else if(node.data.$S_status == 'no record'){
        style.color = '#00F';

        }else{
            style.color = '#ff0000';
            pending_counter = pending_counter + 1;
        }
        }
        <?php }else{
      ?>
        style.color = '#333';            
        <?php }?>
        style.fontSize = '0.9em';
        style.textAlign= 'center';
        style.paddingTop = '7.5px';
    },
    onBeforePlotNode: function(node){
        function setLabelScaling() {
            var x = st.canvas.scaleOffsetX,
            y = st.canvas.scaleOffsetY;
            $j(".node").css("-moz-transform", "scale(" + x +"," +  y + ")");
            $j(".node").css("-webkit-transform", "scale(" + x +"," + y + ")");
            $j(".node").css("-ms-transform", "scale(" + x +"," +  y + ")");
            $j(".node").css("-o-transform", "scale(" + x +"," +  y + ")");
        }
        // setLabelScaling();
        if(node.data.$shape=='circle') {
            node.data.$color = "#0ff";
        }
        if (node.selected) {
            node.data.$color = "#ffa";
            node.Label.style.color = "#333";
        }
        else {
            if(node.data.$shape !='circle') {
                delete node.data.$color;
            }
            if(!node.anySubnode("exist") && node.data.$shape !='circle') {
                var count = 0;
                node.eachSubnode(function(n) { count++; });
            }
        }
    },
    onMouseWheel: function(){
        function setLabelScaling() {
            var x = st.canvas.scaleOffsetX,
            y = st.canvas.scaleOffsetY;
            $j(".node").css("-moz-transform", "scale(" + x +"," +  y + ")");
            $j(".node").css("-webkit-transform", "scale(" + x +"," + y + ")");
            $j(".node").css("-ms-transform", "scale(" + x +"," +  y + ")");
            $j(".node").css("-o-transform", "scale(" + x +"," +  y + ")");
        }
        // setLabelScaling();
    },
    onBeforePlotLine: function(adj){
        if (adj.nodeFrom.selected && adj.nodeTo.selected) {
            adj.data.$color = "#eed";
            adj.data.$lineWidth = 3;
        }
        else {
            delete adj.data.$color;
            delete adj.data.$lineWidth;
        }
    }
   });
   st.loadJSON(json);
   //compute node positions and layout
   st.compute('end');
   st.select(st.root);
   }


   $j(document).ready(function(){


   spacetree();
   networkgraph();
   $j("#info").show();
   $j("#infovis").hide();

   $j("#ShowSpacetree").hide();
   $j(".searchSteps").hide();

   $j("#Shownetwork").click(function () {
   $j("#info").hide();
   $j("#infovis").show();
   $j("#Shownetwork").hide();
   $j("#ShowSpacetree").show();
   $j(".searchSteps").show();

   var element = $j("#infovis"); // global variable
   var getCanvas; // global variable
   html2canvas(element, {
    onrendered: function (canvas) {
    $j("#previewImage").append(canvas);
    getCanvas = canvas;
    $j("#previewImage").hide();
    }
   });
   $j("#downloadimage").on('click', function () {
   var imgageData = getCanvas.toDataURL("image/jpeg");
   var newData = imgageData.replace(/^data:image\/jpeg/, "data:application/octet-stream");
   $j("#downloadimage").attr("download", "Networkgrap.jpeg").attr("href", newData);
   });
   } );

   $j("#ShowSpacetree").click(function () {
   $j("#info").show();
   $j("#infovis").hide();
   $j("#Shownetwork").show();
   $j("#ShowSpacetree").hide();
   $j(".searchSteps").hide();
   var element = $j("#info"); // global variable
   var getCanvas; // global variable
   html2canvas(element, {
    onrendered: function (canvas) {
    $j("#previewImage").append(canvas);
    getCanvas = canvas;
     getCanvas.fillStyle = "blue";
    $j("#previewImage").hide();
    }
   });
   $j("#downloadimage").on('click', function () {
   var imgageData = getCanvas.toDataURL("image/jpeg");
   var newData = imgageData.replace(/^data:image\/jpeg/, "data:application/octet-stream");
   $j("#downloadimage").attr("download", "Spacetree.jpeg").attr("href", newData);
   });
   } );

   $j("#infovis").click(function () {
   var element = $j("#infovis"); // global variable
   var getCanvas; // global variable
   html2canvas(element, {
    onrendered: function (canvas) {
    $j("#previewImage").append(canvas);
    getCanvas = canvas;
    getCanvas.fillStyle = "blue";
    $j("#previewImage").hide();
    }
   });
   $j("#downloadimage").on('click', function () {
   var imgageData = getCanvas.toDataURL("image/jpeg");
   var newData = imgageData.replace(/^data:image\/jpeg/, "data:application/octet-stream");
   $j("#downloadimage").attr("download", "Networkgrap.jpeg").attr("href", newData);
   });
   } );

   $j("#info").click(function () {
   var element = $j("#info"); // global variable
   var getCanvas; // global variable
   html2canvas(element, {
    onrendered: function (canvas) {
    $j("#previewImage").append(canvas);
    getCanvas = canvas;
    getCanvas.fillStyle = "blue";
    $j("#previewImage").hide();
    }
   });
   $j("#downloadimage").on('click', function () {
   var imgageData = getCanvas.toDataURL("image/jpeg");
   var newData = imgageData.replace(/^data:image\/jpeg/, "data:application/octet-stream");
   $j("#downloadimage").attr("download", "Spacetree.jpeg").attr("href", newData);
   });
   } );



   });

   var total = pending_counter + approve_counter;
   var per_approved = Math.round((approve_counter/total)*100);
   var str = '(Current Lot Tree is '+per_approved+'% approved)';
   $j('#insight').html(str);

   }
   setTimeout("init();", 500);


</script>
<div id="chart1">
   <?php if ($gtype != 'buffer'){?>
   <div class="row container">
      <div class="col-lg-12 infobar">
         <div class="col-lg-5">
            <div class="input-group searchSteps">
               <input type="text" class="form-control" id="searchSteps" placeholder="Search">
               <span class="input-group-addon"><i class="fa fa-search"></i></span>
            </div>
         </div>
         <div class=" chartbar col-lg-7">
            <p id="insight"></p>
            <p style="color: #00F">*Blue = Not Recorded</p>
            <p style=" color: black">*Black = Approved</p>
            <p style=" color: red">*Red = Not Approved</p>
         </div>
      </div>
   </div>
   <?php } ?>     
   <div class="row">
      <div class="col-lg-11 col-md-8">
         <div id="container">
            <div id="center-container">
               <div id="info">  
               </div>
               <div id="infovis">  
               </div>
               <!-- <div id="info"></div>
                  <div id="infovis" hiddden></div> -->
            </div>
            <div id="log"></div>
         </div>
      </div>
      <div class="col-lg-1 col-md-4">
         <ul class="nav nav-stacked navbar-right">
            <li class="rpanel_item" id="Shownetwork" title="Show Network">
               <a aria-expanded="false"><i class="fa fa-2x fa-table"></i></a>
            </li>
            <li class="rpanel_item" id="ShowSpacetree" title="Show Space tree">
               <a  aria-expanded="true"><i class="fa fa-share-alt fa-2x"></i></a>
            </li>
            <li class="rpanel_item" title="download chart">
               <a id="downloadimage">
               <i class="fa fa-download fa-2x"></i>
               </a>
            </li>
         </ul>
      </div>
   </div>
</div> 

I am using JIT Graph to generate space tree and force directed graph in switchable 'divs', which is getting populated when switched to corresponding div. The data for nodes are coming from back-end.
while switching to one graph from other the label in the active graph is getting disturb.
How to generate distinct labels for both the graphs.