FusionCharts - Gallery Example - TreeMap Chart in JavaScript

Created using FusionCharts Suite XT - www.fusioncharts.com

by FusionCharts

HTML

<script src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.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: '700',
    height: '400',
    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": "1",
        "plotborderthickness": ".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": "fusion"
      },
      "data": [{
        "label": "USA",
        "fillcolor": "8c8c8c",
        "value": "8635000",
        "data": [{
          "label": "Northern Region",
          "value": "4140000",
          "data": [{
            "label": "Carol Francis",
            "value": "84000",
            "sValue": "15"
          }, {
            "label": "Otis Newman",
            "value": "60000",
            "sValue": "10"
          }, {
            "label": "Darlene Alvarez",
            "value": "50000",
            "sValue": "11"
          }, {
            "label": "Lucas Cannon",
            "value": "58000",
            "sValue": "5"
          }, {
            "label": "Rosalie Huff",
            "value": "36000",
            "sValue": "-5"
          }, {
            "label": "Jerome Vargas",
           ...