title: Labels are detached from nodes in case of multiple graphs on same page
body: <pre><code>&lt;style type="text/css"&gt;
     #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;
     }
  &lt;/style&gt;
  &lt;script language="javascript" type="text/javascript" src="&lt;?php echo BASEURL; ?&gt;app/webroot/jitcharts/js/jit-yc.js"&gt;&lt;/script&gt;
  &lt;script language="javascript" type="text/javascript" src="&lt;?php echo BASEURL; ?&gt;app/webroot/jitcharts/js/jit.js"&gt;&lt;/script&gt;
  &lt;link type="text/css" href="&lt;?php echo BASEURL; ?&gt;app/webroot/jitcharts/css/base.css" rel="stylesheet" /&gt;
  &lt;link type="text/css" href="&lt;?php echo BASEURL; ?&gt;app/webroot/jitcharts/css/Spacetree.css" rel="stylesheet" /&gt;
  &lt;script language="javascript" type="text/javascript" src="&lt;?php echo BASEURL; ?&gt;app/webroot/jitcharts/js/jit-yc.js"&gt;&lt;/script&gt;
  &lt;script language="javascript" type="text/javascript" src="&lt;?php echo BASEURL; ?&gt;app/webroot/jitcharts/js/jit.js"&gt;&lt;/script&gt;
  &lt;script language="javascript" type="text/javascript" src="&lt;?php echo BASEURL; ?&gt;app/webroot/jitcharts/js/excanvas.js"&gt;&lt;/script&gt;
  &lt;script language="javascript" type="text/javascript" src="&lt;?php echo BASEURL; ?&gt;app/webroot/d3.min.js"&gt;&lt;/script&gt;
  &lt;script language="javascript" type="text/javascript" src="&lt;?php echo BASEURL; ?&gt;app/webroot/html2canvas.js"&gt;&lt;/script&gt;
  &lt;script language="javascript" type="text/javascript"&gt;
     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 &lt; 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
      &amp;&amp; (typeof document.createElement('canvas').getContext('2d').fillText == 'function');
      labelType = (!nativeCanvasSupport || (textSupport &amp;&amp; !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: "&lt;?php echo $BatchNo . ', ' . $StepName; ?&gt;",
          name: "&lt;?php
        if ($gtype == 'buffer') {
        echo $BatchNo . ': ' . $bufferName;
        } else {
        echo $BatchNo . ', ' . $StepName;
        }
        ?&gt;",
     data: {},
     children: [&lt;?php echo $str; ?&gt;]
     };
  
     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 &amp;&amp; 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";  
      &lt;?php if ($gtype != 'buffer') {?&gt;
        if(flag==0){
             Selected_batch_status = '&lt;?php echo $Selected_batch_status;?&gt;'
            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;
              }
          }
          &lt;?php }
        else{
        ?&gt;
          style.color = '#333';            
          &lt;?php }?&gt;
          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") &amp;&amp; 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+)/,"(&lt;[^&gt;]+&gt;)*$1(&lt;[^&gt;]+&gt;)*");
     var pattern = new RegExp("("+term+")", "gi");
     src_str = src_str.replace(pattern, "&lt;mark&gt;$1&lt;/mark&gt;");
     src_str = src_str.replace(/(&lt;mark&gt;[^&lt;&gt;]*)((&lt;[^&gt;]+&gt;)+)([^&lt;&gt;]*&lt;\/mark&gt;)/,"$1&lt;/mark&gt;$2&lt;mark&gt;$4");
     $j("#infovis").html(src_str);
  
     /*$jit.Graph.Util.eachNode(fd.graph, function(node) { 
     if(node.name.toLowerCase().indexOf($j("#searchSteps").val().toLowerCase()) &gt; 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';
          &lt;?php if ($gtype != 'buffer') {?&gt;
          if(flag==0){
              Selected_batch_status = '&lt;?php echo $Selected_batch_status;?&gt;'
              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;
          }
          }
          &lt;?php }else{
        ?&gt;
          style.color = '#333';            
          &lt;?php }?&gt;
          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") &amp;&amp; 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 &amp;&amp; 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);
  
  
  &lt;/script&gt;
  &lt;div id="chart1"&gt;
     &lt;?php if ($gtype != 'buffer'){?&gt;
     &lt;div class="row container"&gt;
        &lt;div class="col-lg-12 infobar"&gt;
           &lt;div class="col-lg-5"&gt;
              &lt;div class="input-group searchSteps"&gt;
                 &lt;input type="text" class="form-control" id="searchSteps" placeholder="Search"&gt;
                 &lt;span class="input-group-addon"&gt;&lt;i class="fa fa-search"&gt;&lt;/i&gt;&lt;/span&gt;
              &lt;/div&gt;
           &lt;/div&gt;
           &lt;div class=" chartbar col-lg-7"&gt;
              &lt;p id="insight"&gt;&lt;/p&gt;
              &lt;p style="color: #00F"&gt;*Blue = Not Recorded&lt;/p&gt;
              &lt;p style=" color: black"&gt;*Black = Approved&lt;/p&gt;
              &lt;p style=" color: red"&gt;*Red = Not Approved&lt;/p&gt;
           &lt;/div&gt;
        &lt;/div&gt;
     &lt;/div&gt;
     &lt;?php } ?&gt;     
     &lt;div class="row"&gt;
        &lt;div class="col-lg-11 col-md-8"&gt;
           &lt;div id="container"&gt;
              &lt;div id="center-container"&gt;
                 &lt;div id="info"&gt;  
                 &lt;/div&gt;
                 &lt;div id="infovis"&gt;  
                 &lt;/div&gt;
                 &lt;!-- &lt;div id="info"&gt;&lt;/div&gt;
                    &lt;div id="infovis" hiddden&gt;&lt;/div&gt; --&gt;
              &lt;/div&gt;
              &lt;div id="log"&gt;&lt;/div&gt;
           &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="col-lg-1 col-md-4"&gt;
           &lt;ul class="nav nav-stacked navbar-right"&gt;
              &lt;li class="rpanel_item" id="Shownetwork" title="Show Network"&gt;
                 &lt;a aria-expanded="false"&gt;&lt;i class="fa fa-2x fa-table"&gt;&lt;/i&gt;&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="rpanel_item" id="ShowSpacetree" title="Show Space tree"&gt;
                 &lt;a  aria-expanded="true"&gt;&lt;i class="fa fa-share-alt fa-2x"&gt;&lt;/i&gt;&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="rpanel_item" title="download chart"&gt;
                 &lt;a id="downloadimage"&gt;
                 &lt;i class="fa fa-download fa-2x"&gt;&lt;/i&gt;
                 &lt;/a&gt;
              &lt;/li&gt;
           &lt;/ul&gt;
        &lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p>I am using <strong>JIT Graph</strong> 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.<br>
  while switching to one graph from other the label in the active graph is getting disturb.<br>
  How to generate distinct labels for both the graphs.</p>