Google Chart - google chart tutorial - TreeMap Chart - chart js - google graphs - google charts examples




  • 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 values that we assign.
  • Sizes and colors are valued relative to all other nodes in the graph.

Configuration:

  • We've used TreeMap class to show treemap diagram.
//TreeMap chart
var chart = new google.visualization.TreeMap(document.getElementById('container'));
Clicking "Copy Code" button to copy the code. From - google charts tutorial - team

Example:

 Tryit<html>
<head>
<title>wikitechy Google Charts Tutorial</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>
Clicking "Copy Code" button to copy the code. From - google charts tutorial - team

Result


Related Searches to Google Chart - TreeMap Chart