FusionCharts - Gallery Example - TreeMap Chart in JavaScript

Created using FusionCharts Suite XT - www.fusioncharts.com

by Venkatesan S

HTML

<script src="http://static.fusioncharts.com/code/latest/fusioncharts.charts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.zune.js"></script>
<!-- Treemap chart showing the performance of the sales team for Harry's SuperMart.

Click nodes to traverse up and down the treemap. After the chart is traversed down once, the Back to Parent and Back to Top buttons, in the top-right corner, can be used for traversing up. 
 -->
<div id="chart-container">FusionCharts will render here</div>

JavaScript

FusionCharts.ready(function() {
  var visitChart = new FusionCharts({
    type: 'treemap',
    renderAt: 'chart-container',
    width: '550',
    height: '350',
    dataFormat: 'json',
    dataSource: {
      "chart": {
        "animation": "0",
        "hideTitle": "1",
        "plotToolText": "<div><b>$label</b><br/> <b>Sale: </b>$$value<br/><b>Growth: </b>$svalue%</div>",
        "spacex": "0",
        "spacey": "0",
        "horizontalPadding": "1",
        "verticalPadding": "1",
        "hoveronallsiblingleaves": "0",
        "plotborderthickness": "0.5",
        "plotbordercolor": "666666",
        "legendpadding": "0",
        "legendItemFontSize": "10",
        "legendItemFontBold": "1",
        "showLegend": "1",
        "legendPointerWidth": "8",
        "legenditemfontcolor": "3d5c5c",
        "algorithm": "squarified",
        "caption": "Harry's SuperMart: Sales Team Performance Analysis",
        "legendScaleLineThickness": "0",
        "legendCaptionFontSize": "10",
        "legendaxisbordercolor": "bfbfbf",
        "subcaption": "Year Till Date",
        "legendCaption": "Growth in sales - Compared to previous year",
        "theme": "zune"
      },
      "data": [{
        "label": "Seven Kingdoms",
        "fillcolor": "8c8c8c",
        "value": "744000",
        "data": [{
        	"label": "House Stark",
          	"value": "331000",
            "data": [{
            	"label": "Starks",
                "value": "114000",
                "sValue": "22"
            },{
            	"label": "Mormonts",
                "value": "24000",
                "sValue": "5"
            },{
            	"label": "Wildlings",
                "value": "54000",
                "sValue": "10"
            },{
            	"label": "Arryn",
                "value": "34000",
                "sValue": "15"
            },{
            	"label": "Umbers",
                "value": "61000",
                "sValue": "15"
            },{
            	"label":...