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 sales analysis of the cell phones 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: '550',
    dataFormat: 'json',
    dataSource: {
      "chart": {
        "animation": "0",
        "hideTitle": "1",
        "plotToolText": "<div><b>$label</b><br/><b>SAR (body) : </b>$svalue W/kg<br/><b>Units Sold : </b>$value <br/>test : $test</div>",
        "horizontalPadding": "0",
        "verticalPadding": "0",
        "plotborderthickness": ".5",
        "plotbordercolor": "ffffff",
        "chartBottomMargin": "0",
        "labelGlow": "0",
        "labelFontColor": "ffffff",
        "showLegend": "1",
        "legendpadding": "0",
        "legendItemFontSize": "10",
        "legendItemFontBold": "1",
        "legendPointerWidth": "8",
        "legenditemfontcolor": "3d5c5c",
        "legendScaleLineThickness": "0",
        "legendCaptionFontSize": "10",
        "algorithm": "squarified",
        "caption": "Harry's SuperMart : Sales of mobile devices in last quarter",
        "theme": "zune",
        "subcaption": "Analysis based on SAR values",
        "legendCaption": "Specific Absorption Rate (SAR) in W/kg"
      },
      "data": [{
        "label": "Top Selling Brands",
        "fillcolor": "595f5d",
        "value": "890",
        "data": [{
          "label": "Samsung",
          "fillcolor": "838986",
          "value": "890",
          "data": [{
            "label": "Galaxy Note 4",
            "value": "519",
            "sValue": "1.09",
            "test" : '1'
          }, {
            "label": "Galaxy Note5",
            "value": "191",
            "sValue": "1.48",
            "test" : '2'
          }, {
            "label": "galaxy A8",
            "value": "180",
            "sValue": "1.19",
            "test" : '3'
          }]
        }]
      }],
      "colorrange": {
        "mapbypercent": "0",
        "gradient": "1",
        "minvalue": "0",
        "code": "dfff72",
       ...