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 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: '650',
    height: '650',
    dataFormat: 'json',
    dataSource: {
      "chart": {
        "caption": "Region-wise Literacy Rates in 2015",
        "subcaption": "World Population",
        "animation": "0",
        "shownavigationbar": "1",
        "plotToolText": "<div><b>$label</b><br/><b>Literacy Rate : </b>$svalue%<br/><b>Population : </b>$datavalue</div>",
        "horizontalPadding": "0",
        "verticalPadding": "0",
        "plotborderthickness": ".5",
        "plotbordercolor": "e6e6e6",
        "chartBottomMargin": "0",
        "labelGlow": "1",
        "labelFontColor": "ffffff",
        "labelFontSize": "8",
        "labelFontBold": "1",
        "labelGlowColor": "#cccc00",
        "labelGlowIntensity": "50",
        "labelGlowRadius": "10",
        "parentLabelLineHeight": "9",
        "showLegend": "1",
        "legendpadding": "0",
        "legendItemFontSize": "8",
        "legendItemFontBold": "1",
        "legendPointerWidth": "8",
        "legenditemfontcolor": "3d5c5c",
        "legendScaleLineThickness": "0",
        "legendCaptionFontSize": "10",
        "legendspreadfactor": ".7",
        "legendCaption": "Literacy Rate (%)",
        "formatNumberScale": "1",
        "numberScaleUnit": ", K, M, B",
        "numberScaleValue": "1, 1000, 1000, 1000",
        "forceNumberScale": "1",
        "theme": "fusion"
      },
      "data": [{
        "label": "World",
        "fillcolor": "000000",
        "value": "6621397806",
        "svalue": "86.3",
        "data": [{
            "label": "Asia",
            "fillcolor": "20261b",
            "value": "4084114938",
            "svalue": "89.5",
            "data": [{
                "label": "South Asia",
                "fillcolor": "3b4632",
                "value": "1635488712",
                "svalue": "69",
                "data": [{
                   ...