Google Charts - TreeMap Chart - Adglob Infosystem Pvt Ltd

TreeMap is a visual representation of a data tree, where each node may have zero or more children, and one parent (except for the root). Each node is displayed as a rectangle, can be sized and colored according to the values that we assign. Sizes and colors are valued relative to all other nodes in the graph. Following is an example of a treemap chart. We’ve already seen the configuration used to draw this chart in the Google Charts Configuration Syntax chapter. So, let’s see the complete example.

Configurations

We’ve used the TreeMap class to show the treemap diagram.

//TreeMap chart

var chart = new google.visualization.TreeMap(document.getElementById('container'));

Example

googlecharts_treemap.htm

<html>

   <head>

      <title>Google Charts </title>

      <script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">

      </script>

      <script type = "text/javascript" src = "https://www.google.com/jsapi">

      </script>

      <script type = "text/javascript">

         google.charts.load('current', {packages: ['treemap']});

      </script>

   </head>

   <body>

      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">

      </div>

      <script language = "JavaScript">

         function drawChart() {

            // Define the chart to be drawn.

            var data = new google.visualization.DataTable();

            var data = google.visualization.arrayToDataTable([

               ['Location', 'Parent', 'Market trade volume (size)', 'Market increase/decrease (color)'],

               ['Global',    null,                 0,                               0],

               ['America',   'Global',             0,                               0],

               ['Europe',    'Global',             0,                               0],

               ['Asia',      'Global',             0,                               0],

               ['Australia', 'Global',             0,                               0],

               ['Africa',    'Global',             0,                               0],

               ['USA',       'America',            52,                              31],

               ['Mexico',    'America',            24,                              12],

               ['Canada',    'America',            16,                              -23],

               ['France',    'Europe',             42,                              -11],

               ['Germany',   'Europe',             31,                              -2],

               ['Sweden',    'Europe',             22,                              -13],

               ['China',     'Asia',               36,                              4],

               ['Japan',     'Asia',               20,                              -12],

               ['India',     'Asia',               40,                              63],

               ['Egypt',     'Africa',             21,                              0],

               ['Congo',     'Africa',             10,                              12],

               ['Zaire',     'Africa',             8,                               10]

]);

            var options = {

               minColor: '#f00',

               midColor: '#ddd',

               maxColor: '#0d0',

               headerHeight: 15,

               fontColor: 'black',

               showScale: true

};

            // Instantiate and draw the chart.

            var chart = new google.visualization.TreeMap(document.getElementById('container'));

            chart.draw(data, options);

         google.charts.setOnLoadCallback(drawChart);

      </script>

   </body>

</html>

Result

Verify the result.