Arbol 2 : Contratante - Adjudicatario - Asunto

In this example below you will see how to do a Arbol 2 : Contratante - Adjudicatario - Asunto with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by alfmartss, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright alfmartss ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Arbol 2 : Contratante - Adjudicatario - Asunto</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Treemap - Animated Squarified, SliceAndDice and Strip TreeMaps</title>
</head>

<body onload="init();">
<div id="container">
  <div id="center-container">
    <div id="infovis"></div>    
</div>

<div id="right-container">
  <div id="inner-details">
    Detalle
  </div>
</div>

<div id="log"></div>
</div>
</body>
</html>
  <script src='https://philogb.github.io/jit/static/v20/Jit//jit-yc.js'></script>
<script src='https://dl.dropbox.com/s/xfpe9c3apxx3r4v/tree2.json?dl=1'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/alfmartss/arbol-2-contratante-adjudicatario-asunto-ENVyEE */
html, body {
    margin:0;
    padding:0;
    font-family: "Lucida Grande", Verdana;
    font-size: 0.9em;
    text-align: center;
    background-color:#F2F2F2;
}

input, select {
    font-size:0.9em;
}

table {
    margin-top:-10px;
    margin-left:7px;
}

h4 {
    font-size:1.1em;
    text-decoration:none;
    font-weight:normal;
    color:#23A4FF;
}

a {
    color:#23A4FF;
}

#container {
    width: 1200px;
    height: 800px;
    margin:0 auto;
    /*position:relative;*/
}

#left-container, 
#right-container, 
#center-container {
    height:800px;
    position:absolute;
    top:0;
    
}
#center-container {
    width:1200px;
    left:50px;
    background-color:#1a1a1a;
    color:#ccc;
}

#left-container, #right-container {
    width:10px;
    color:#686c70;
    text-align: left;
    overflow: auto;
    background-color:#fff;
    background-repeat:no-repeat;
    border-bottom:1px solid #ddd;
}

#left-container {
    left:0;
    background-image:url('col2.png');
    background-position:center right;
    border-left:1px solid #ddd;
    
}

#right-container {
    right:0;
    background-image:url('col1.png');
    background-position:center left;
    border-right:1px solid #ddd;
}

#right-container h4{
    text-indent:8px;
}

#infovis {
    position:relative;
    width:1400px;
    height:900px;
    margin:auto;
    overflow:hidden;
}

.text {
    margin: 7px;
}

#inner-details {
    font-size:0.8em;
    list-style:none;
    margin:7px;
}

#log {
    position:absolute;
    top:10px;
    font-size:1.0em;
    font-weight:bold;
    color:#23A4FF;
}




/*TOOLTIPS*/
.tip {
    color: #111;
    width: 139px;
    background-color: white;
    border:1px solid #ccc;
    -moz-box-shadow:#555 2px 2px 8px;
    -webkit-box-shadow:#555 2px 2px 8px;
    -o-box-shadow:#555 2px 2px 8px;
    box-shadow:#555 2px 2px 8px;
    opacity:0.9;
    filter:alpha(opacity=90);
    font-size:10px;
    font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
    padding:7px;
}

#right-container {
  display: none;
}

.node {
  color:#fff;
  font-size:9px;
  overflow:hidden;
  cursor:pointer;
/*  
  text-shadow:2px 2px 5px #000;
  -o-text-shadow:2px 2px 5px #000;
  -webkit-text-shadow:2px 2px 5px #000;
  -moz-text-shadow:2px 2px 5px #000;
*/
}

/*TOOLTIPS*/
.tip {
    color: #fff;
    width: 139px;
    background-color: black;
    opacity:0.9;
    filter:alpha(opacity=90);
    font-size:10px;
    font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
    padding:7px;
}

.album {
    width:100px;
    margin:3px;
}

#id-list {
	background-color:#EEEEEE;
	border:1px solid #CCCCCC;
	margin:10px 20px 0 20px;
	padding:5px;
	text-align:left;
	text-indent:2px;
}

#id-list table {
  margin-top:2px;
}

#back {
  margin:10px 40px;
}

.button {
  display: inline-block;
  outline: none;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  font: 14px / 100% Arial, Helvetica, sans-serif;
  padding: 0.5em 1em 0.55em;
  text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
  -webkit-border-radius: 0.5em;
  -moz-border-radius: 0.5em;
  border-radius: 0.5em;
  -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
}

.button:hover {
  text-decoration: none;
}

.button:active {
  position: relative;
  top: 1px;
}

/* white */
.white {
  color: #606060;
  border: solid 1px #b7b7b7;
  background: #fff;
  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
  background: -moz-linear-gradient(top,  #fff,  #ededed);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');
}

.white:hover {
  background: #ededed;
  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc));
  background: -moz-linear-gradient(top,  #fff,  #dcdcdc);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc');
}

.white:active {
  color: #999;
  background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#fff));
  background: -moz-linear-gradient(top,  #ededed,  #fff);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ffffff');
}


/*Downloaded from https://www.codeseek.co/alfmartss/arbol-2-contratante-adjudicatario-asunto-ENVyEE */
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');
  //I'm setting this based on the fact that ExCanvas provides text support for IE
  //and that as of today iPhone/iPad current text support is lame
  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

  
  //end
  //init TreeMap
  var tm = new $jit.TM.Squarified({
    //where to inject the visualization
    injectInto: 'infovis',
    //parent box title heights
    titleHeight: 15,
    //enable animations
    animate: animate,
    //box offsets
    offset: 1,
    //Attach left and right click events
    Events: {
      enable: true,
      onClick: function(node) {
        if(node) tm.enter(node);
      },
      onRightClick: function() {
        tm.out();
      }
    },
    duration: 1000,
    //Enable tips
    Tips: {
      enable: true,
      //add positioning offsets
      offsetX: 20,
      offsetY: 20,
      //implement the onShow method to
      //add content to the tooltip when a node
      //is hovered
      onShow: function(tip, node, isLeaf, domElement) {
        var html = "<div class=\"tip-title\">" + node.name 
          + "</div><div class=\"tip-text\">";
        var data = node.data;
        if(data.importe) {
          html += "<br>Importe: " + data.importe;
        }
        if(data.image) {
          html += "<img src=\""+ data.image +"\" class=\"album\" />";
        }
        tip.innerHTML =  html; 
      }  
    },
    //Add the name of the node in the correponding label
    //This method is called once, on label creation.
    onCreateLabel: function(domElement, node){
        domElement.innerHTML = node.name;
        var style = domElement.style;
        style.display = '';
        style.border = '1px solid transparent';
        domElement.onmouseover = function() {
          style.border = '1px solid #9FD4FF';
        };
        domElement.onmouseout = function() {
          style.border = '1px solid transparent';
        };
    }
  });
  tm.loadJSON(json);
  tm.refresh();
  //end
  //add events to radio buttons
  var sq = $jit.id('r-sq'),
      st = $jit.id('r-st'),
      sd = $jit.id('r-sd');
  var util = $jit.util;
  util.addEvent(sq, 'change', function() {
    if(!sq.checked) return;
    util.extend(tm, new $jit.Layouts.TM.Squarified);
    tm.refresh();
  });
  util.addEvent(st, 'change', function() {
    if(!st.checked) return;
    util.extend(tm, new $jit.Layouts.TM.Strip);
    tm.layout.orientation = "v";
    tm.refresh();
  });
  util.addEvent(sd, 'change', function() {
    if(!sd.checked) return;
    util.extend(tm, new $jit.Layouts.TM.SliceAndDice);
    tm.layout.orientation = "v";
    tm.refresh();
  });
  //add event to the back button
  var back = $jit.id('back');
  $jit.util.addEvent(back, 'click', function() {
    tm.out();
  });
}

Comments