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

Adblocker detected! Please consider reading this notice.

We've detected that you are using AdBlock Plus or some other adblocking software which is preventing the page from fully loading.

We don't have any banner, Flash, animation, obnoxious sound, or popup ad. We do not implement these annoying types of ads!

We need money to operate the site, and almost all of it comes from our online advertising.

Please add wikitechy.com to your ad blocking whitelist or disable your adblocking software.

×