Treemap Example

An example of a Google Treemap.

HTML

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['treemap']}]}"></script>
<div id="chart_div3"></div>
<div id="tooltip"> <span id="tooltipTopLine"></span>
    <br /> <span id="tooltipBottomLine"></span>
   

</div>

CSS

#chart_div3 {
    font-family: Calibri, Candara, Segoe, Arial;
    font-size: 22px;
    font-weight: 200;
}

#tooltip {
    font-family: Calibri, Candara, Segoe, Arial;
    font-weight: 100;
    display: none;
    position: absolute;
    color: white;
    height: 3em;
    width: 100px;
    background-color: none;
    padding-left: 5px;
}
#tooltipTopLine {
    
}
#tooltipBottomLine {
}

JavaScript

google.load("visualization", "1", {
    packages: ["treemap"]
});
google.setOnLoadCallback(drawChart);

var gDataXMLservcost = null; // your data here
function drawChart() {
    // Create and populate the data table.
    // var data = google.visualization.arrayToDataTable(gDataXMLservcost);
    // using fake data as example
    var data = google.visualization.arrayToDataTable([
        ['Location', 'Parent', 'Market trade volume (size)', 'Market increase/decrease (color)'],
        ['Global', null, 0, 0],
        ['Western Conference', 'Global', 0, 0],
        ['Eastern Conference', 'Global', 0, 0],

        ['1. Golden State', 'Western Conference', 81.2, 56],
        ['2. Memphis', 'Western Conference', 70, 49],
        ['3. Housten', 'Western Conference', 66.7,  46],
        ['4. Portland', 'Western Conference', 64.7,  44],
        ['5. L.A. Clippers', 'Western Conference', 64.3, 45],
        ['6. San Antonio', 'Western Conference', 63.2, 43],
        ['7. Dallas', 'Western Conference', 62.9, 44],
        ['8. Oklahoma City', 'Western Conference', 56.5,  39],

        ['1. Atlanta', 'Eastern Conference', 76.8,  53],
        ['2. Cleveland', 'Eastern Conference', 63.4, 45],
        ['3. Toronto', 'Eastern Conference', 59.4, 41],
        ['4. Chicago', 'Eastern Conference', 59.2, 42],
        ['5. Washington', 'Eastern Conference', 58, 40],
        ['6. Milwaukee', 'Eastern Conference', 49.3, 34],
        ['7. Miami', 'Eastern Conference', 47.1, 32],
        ['8. Boston', 'Eastern Conference', 44.1, 30],

        ['Harrison Barnes', '1. Golden State', 28.8, 12.7],
        ['Andrew Bogut', '1. Golden State', 23.8, 14.9],
        ['Stephen Curry', '1. Golden State', 32.9, 25.6],
        ['Draymond Green', '1. Golden State', 31.9, 18.5],
        ['Klay Thompson', '1. Golden State', 32.5, 18.4],

        ['Tony Allen', '2. Memphis', 26.3, 11.2],
        ['Mike Conley', '2. Memphis', 31.8, 16.5],
        ['Marc Gasol', '2. Memphis', 33.8, 22],
        ['Courtney Lee',...