Treemap Example

An example of a Google Treemap.

by alfredopacino

HTML

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['treemap']}]}"></script>
       <div id="chart_div" style="width: 1500px; height: 1000px;"></div>

JavaScript

google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Location', 'Parent', 'Market trade volume (size)', 'Market increase/decrease (color)'],
          ['Global',    null,                 0,                               0],
          ['Militare',   'Global',           54,                               0],
          ['Educazione',    'Global',         6.2,                               0],
          ['Salute',      'Global',             5.9,                               0],
          ['Governo', 'Global',             6.5,                               0],
          ['Alloggi e aiuti alla comunitĂ ',    'Global',             5.6,                               0],
          ['Affari Internazionali',    'Global',             3.6,                               0],
          ['Energia e Ambiente',    'Global',             3.5,                               0],
          ['Scienza',    'Global',             2.6,                               0],          ['Trasporti',    'Global',             2.3,                               0],
          ['Agricoltura',    'Global',             1.1,                               0],
          ['Veterani',    'Global',             5.8,                               0]
        ]);

        tree = new google.visualization.TreeMap(document.getElementById('chart_div'));

        tree.draw(data, {
          minColor: '#f00',
          midColor: '#ddd',
          maxColor: '#0d0',
          headerHeight: 15,
          fontColor: 'black',
          showScale: true
        });

      }