Graph 如果同一页上有多个图形，则标签将与节点分离 #容器{***强文本*** /*宽度：自动*/ 高度：自动； 保证金：0自动； 位置：相对位置； } #中心容器{ /*宽度：770px*/ 左：200px； 背景色：#FFF； 颜色：#ccc； 宽度：100

如果同一页上有多个图形，则标签将与节点分离

#容器{***强文本***
/*宽度：自动*/
高度：自动；
保证金：0自动；
位置：相对位置；
}
#中心容器{
/*宽度：770px*/
左：200px；
背景色：#FFF；
颜色：#ccc；
宽度：100%；
}
#infovis{
位置：中心；
宽度：自动；
保证金：自动；
高度：800px！重要；
溢出y：隐藏！重要；
}
#信息画布，#信息画布
{
位置：绝对位置；
顶部：0px；
左：0px；
宽度：1078px；
高度：800px；
背景：白色；
}
#信息{
位置：中心；
宽度：自动；
高度：800px！重要；
保证金：自动；
溢出y：隐藏！重要；
}
#网络图视图{
位置：中心；
宽度：100%；
身高：100%；
保证金：自动；
溢出：隐藏！重要；
}
沙巴先生{
文本对齐：居中；
显示：表格单元格；
垂直对齐：中间对齐；
高度：34px；
}
.沙巴p{
显示：内联块；
垂直对齐：顶部；
字体大小：10px；
保证金：0px 5px 0px 0px；
浮动：对；
}
.搜索步骤{
浮动：对；
}
.信息栏{
右边距：0px；
左边距：100px；
文本对齐：居中；
}
如果（标志==0）{
所选批次状态=“”
如果（所选批次状态==‘已批准’）{
style.color='#333'；
批准\计数器=批准\计数器+1；
}否则{
style.color='#ff0000'；
挂起计数器=挂起计数器+1；
}
flag=1；
}否则{
如果（node.data.$S_status=='approved'）{
style.color='#333'；
批准\计数器=批准\计数器+1；
}else if（node.data.$S_status==‘无记录’）{
style.color='#00F'；
}否则{
style.color='#ff0000'；
挂起计数器=挂起计数器+1；
}
}
style.color='#333'；
style.fontSize='11px'；
//style.background='lightgreen'；
style.cursor='pointer'；
style.textAlign='center'；
style.paddingTop='5px'；
},
onBeforePlotNode:函数（节点）{
函数setLabelScaling（）{
var x=fd.canvas.scaleOffsetX，
y=fd.canvas.scaleOffsetY；
$j（“.node”）.css（“-moz变换”、“缩放（“+x+”、“+y+”））；
$j（“.node”）.css（“-webkit transform”，“scale”（“+x+”，“+y+”））；
$j（“.node”）.css（“-ms转换”、“缩放（“+x+”、“+y+”））；
$j（“.node”）.css（“-o-transform”，“scale”（“+x+”，“+y+”））；
}
setLabelScaling（）；
if（node.data.$shape=='circle'）{
node.data.$type=“圆圈”；
节点数据。$radius=“50”；
node.data.$color=“#990000”；
}
如果（已选择节点）{
node.data.$color=“#990000”；
节点数据。$radius=“50”；
node.Label.style.color=“#990000”；
}
否则{
if（node.data.$shape！='circle'）{
删除节点。数据。$color；
}
如果（！node.anySubnode（“exist”）&&node.data.$shape！='circle'）{
var计数=0；
node.eachSubnode（函数（n）{count++；}）；
}
}
},
//onPlaceLabel:函数（doElement，节点）{
//var style=domElement.style；
//var left=parseInt（style.left）；
//var top=parseInt（style.top）；
//var w=doElement.offsetWidth；
//style.left=（左-w/2）+“px”；
//style.top=（top+10）+“px”；
//style.display=''；
// }  
});
loadJSON（json）；
//增量计算位置并设置动画。
fd.计算增量（{
国际热核实验堆：40，
属性：'结束'，
onStep:function（perc）{
},  
onComplete:函数（）{
//Log.write（'done'）；
fd.animate（{
模式：[‘线性’]，
转换：$jit.Trans.Elastic.easeOut，
持续时间：2500
});  
}  
});
$j（“#searchSteps”）.keyup（函数（）{
var src_str=$j（“#infovis”）.html（）；
var term=$j（“#searchSteps”）.val（）.toLowerCase（）；
术语=术语。替换（/（\s+）/，“（]+>）*$1（]+>）*”；
var模式=新的RegExp（“（“+术语+”），“gi”）；
src_str=src_str.replace（模式，“$1”）；
src_str=src_str.replace（/（[^]*）（（]+>）+）（[^]*）/，“$1$2$4”）；
$j（“#infovis”）.html（src#u str）；
/*$jit.Graph.Util.eachNode（fd.Graph，函数（节点）{
if（node.name.toLowerCase（）.indexOf（$j（“#searchSteps”）.val（）.toLowerCase（））>0）{
警惕（“你好”）；
//fd.graph.Label.color=“#ffffff00！重要”；
//$jit.Graph.Util.labels.getLabel（node.id）.background='red'；
//$j（“”.css（{“背景色”：“黄色”，“字体大小”：“200%”）；
console.log（fd.graph）；
//console.log（'Mukesh'）；
}
});   */
});               
}
函数spacetree（）{
var st=新的$jit.st({
答案：错，
水平显示：100，
注入到：“信息”，
多树：没错，
带标签：正确，
持续时间：400，
转换：$jit.Trans.Quart.easeInOut，
水平距离：50，
兄弟姐妹：20，
次行距：20，
节点：{
身高：60，
宽度：120，
键入：“矩形”，
颜色：“#ffd”，
可重写：对，
画布风格：{
阴影颜色：“#000”，
阴影模糊：1
}
},
标签：{
尺码：6，
风格：“粗体”，
颜色：“#23A4FF”，
类型：'Native'
},
边缘：{
键入：“行”，
可重写：true
},
导航：{
启用：对，
平移：是的，
缩放：50
},
onCreateLabel:函数（标签，节点）{
控制台日志（标签）；
console.log（节点）；
console.log（node.id）；
label.id=node.id；
label.innerHTML=node.name；
label.onclick=function（）{
返回false；
};
var style=label.style；
style.width=100+‘px’；
style.height=50+‘px’；
如果（标志==0）{
<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>