Treemap Example

An example of a Google Treemap.

by maxibaezpy

HTML

<script src="https://dl-web.dropbox.com/get/dncp/demo-data.json?_subject_uid=25260908&amp;w=AAB1YrWg7hYzUKDBl4SNUIVt0WCjHS5XU56qwaSJANmOtA&amp;dl=1"></script>
<script src="https://www.google.com/jsapi?autoload={&#39;modules&#39;:[{&#39;name&#39;:&#39;visualization&#39;,&#39;version&#39;:&#39;1&#39;,&#39;packages&#39;:[&#39;treemap&#39;]}]}"></script>
<link rel="stylesheet" href="http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css">
<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css">

<div class="panel panel-default">
  <div class="panel-body">
      <a onClick="atras()"class="btn btn-default" href="#" role="button">
          <i class="fa fa-undo"></i>
      </a>
      <br/>
     <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </div>
</div>

JavaScript

var tree;
google.setOnLoadCallback(drawChart);


function drawChart() {
    var data = google.visualization.arrayToDataTable(dataArray);
    tree = new google.visualization.TreeMap(document.getElementById('chart_div'));               
    tree.draw(data, {
        headerHeight: 0,
        fontColor: 'black'
    });
}

function atras (){
    tree.goUpAndDraw()
}