google.load("visualization", "1", {packages:["treemap"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Location', 'Parent', 'Total Water Consumption', 'Water Consumption per capita'],
['2013 Water Consumption',	null,	0,	0],
['Seattle',	'2013 Water Consumption',	0,	307],
['Metro Vancouver',	'2013 Water Consumption',	0,	448],
['Portland',	'2013 Water Consumption',	0,	344],
['WD #49',	'Seattle',	1522390,	276],
['WD #125',	'Seattle',	1573927,	279],
['WD #90',	'Seattle',	1966336,	240],
['Shoreline',	'Seattle',	2115030,	221],
['Cedar River',	'Seattle',	2370903,	241],
['Issaquah',	'Seattle',	2471734,	271],
['Mercer Island',	'Seattle',	2550140,	304],
['WD #20',	'Seattle',	2815191,	225],
['Pitt Medows',	'Metro Vancouver',	3420628,	508],
['Langley',	'Metro Vancouver',	4069997,	427],
['West Vancouver',	'Metro Vancouver',	4295411,	250],
['Port Moody',	'Metro Vancouver',	4607304,	369],
['Kirkland',	'Seattle',	4809025,	335],
['Woodinville',	'Seattle',	4925928,	284],
['Soos Creek',	'Seattle',	5271223,	237],
['Sammamish Plateau',	'Seattle',	5814298,	303],
['Tualatin',	'Portland',	5853827,	603],
['Tigard',	'Portland',	6544483,	332],
['Northshore',	'Seattle',	6874722,	262],
['Highline',	'Seattle',	7654215,	305],
['Cith of Gresham',	'Portland',	7908973,	332],
['Renton',	'Seattle',	8118865,	346],
['Redmond',	'Seattle',	8510543,	416],
['Rockwook Water PUD',	'Portland',	8670222,	402],
['North Vancouver',	'Metro Vancouver',	9012179,	487],
['New Westminster',	'Metro Vancouver',	9100999,	365],
['Port Coquitam',	'Metro Vancouver',	9153520,	427],
['Maple Ridge',	'Metro Vancouver',	11650069,	402],
['Township of Langley',	'Metro Vancouver',	16649554,	408],
['Tualatin Valley WD',	'Portland',	18250260,	351],
['Bellevue',	'Seattle',	18752982,	362],
['North Vancouver District',	'Metro Vancouver',	18852279,	578],
['Coquitlam',	'Metro Vancouver',	19397823,	391],
['Delta',	'Metro Vancouver',	23815634,	632],
['Richmond',	'Metro Vancouver',	36936432,	499],
['Burnaby',	'Metro Vancouver',	42452658,	501],
['Surrey',	'Metro Vancouver',	66726602,	367],
['Portland City',	'Portland',	70030085,	328],
['Seattle City',	'Seattle',	74415760,	310],
['Vancouver',	'Metro Vancouver',	109749176,	477]
        ]);

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

  var options = {
          minColor: '#0d0',
          <!--midColor: '#ddd', THIS is OTHER OPTION-->
          maxColor: '#f00',
          headerHeight: 15,
          fontColor: 'black',
          showScale: true,
	  maxPostDepth: 0,
	  maxDepth: 1,
    generateTooltip: showFullTooltip
  };

  function showFullTooltip(row, size, value) {
    return '<div style="background:#fd9; padding:10px; border-style:solid">' +
           '<b>' + data.getValue(row, 0) +
           '</b>, ' + data.getValue(row, 1) + '<br>' 
	
	+ data.getColumnLabel(2)+' (m3): ' + size.toLocaleString() + '<br>'
	+   data.getColumnLabel(3) + ' (lpcd): ' + data.getValue(row, 3) + '<br>'
	+ 'Relative Position (0 the lowest, 1 the highest): ' + parseFloat(value).toFixed(2) + ' </div>';
  }

        tree.draw(data, options);

      }