Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

Loading

Tiling is the process of dividing large rectangles into smaller sub-rectangles. Ideally, a treemap tiling algorithm creates rectangles with an aspect ratio that is close to one, with ordering based on the underlying data/information tree.

The tiling algorithm affects how the larger rectangles are divided into smaller sub-rectangles, thus affecting how the chart looks like. FusionCharts supports the following two algorithms:

  • Squarified
  • Slice and dice

The Squarified Algorithm

The squarified algorithm for the treemap is visually appealing in part because the nodes are closer to square shapes, but this algorithm comes at the cost of unordered nodes. Squarified algorithm for treemap is preferred over slice and dice algorithm because of low aspect ratio, which helps in comparing the sub-nodes very easily.

The chart below is rendered using the squarified algorithm, which is the default tiling algorithm:

Click the rectangles in each chart to traverse through the chart and see how the chart view changes.

FusionCharts will load here..
{ "chart": { "caption": "Top-selling car manufacturers", "subcaption": "Europe - 2015", "animation": "0", "shownavigationbar": "1", "plotToolText": "
$label
Cars Sold: $datavalue
Growth: $svalue%
", "horizontalPadding": "0", "verticalPadding": "0", "plotborderthickness": ".5", "plotbordercolor": "b3b3b3", "chartBottomMargin": "0", "labelGlow": "0", "showLegend": "1", "legendpadding": "0", "legenditemfontcolor": "4b4b4b", "legendScaleLineThickness": "0", "legendCaptionFontSize": "10", "legendCaptionFontBold": "1", "legendspreadfactor": ".7", "legendaxisbordercolor": "bfbfbf", "labelFontColor": "000000", "labelFontSize": "9", "showchildlabels": "1", "theme": "zune", "legendCaption": "Growth in sales - Compared to previous year" }, "data": [ { "label": "Manufacturers", "value": "10639578", "fillcolor": "#999999", "data": [ { "label": "Toyota Group", "value": "458560", "svalue": "7.6", "fillcolor": "#cccccc", "data": [ { "label": "Lexus", "value": "29274", "svalue": "27.1" }, { "label": "Toyota", "value": "429286", "svalue": "1.1" } ] }, { "label": "Renault Group", "value": "1009047", "svalue": "7.9", "fillcolor": "#cccccc", "data": [ { "label": "Renault", "value": "720197", "svalue": "4.6" }, { "label": "Dacia", "value": "288850", "svalue": "-1" } ] }, { "label": "FCA Group", "value": "594922", "svalue": "13.5", "fillcolor": "#cccccc", "data": [ { "label": "Alfa Romeo", "value": "43495", "svalue": "-9.5" }, { "label": "Fiat", "value": "503101", "svalue": "5.6" }, { "label": "Lancia", "value": "48326", "svalue": "-18.5" } ] }, { "label": "Jaguar Land Rover Group", "value": "132313", "svalue": "18.4", "fillcolor": "#cccccc", "data": [ { "label": "Land Rover", "value": "103239", "svalue": "10.7" }, { "label": "Jaguar", "value": "29074", "svalue": "24" } ] }, { "label": "BMW Group", "value": "696355", "svalue": "12.3", "fillcolor": "#cccccc", "data": [ { "label": "BMW", "value": "554822", "svalue": "4" }, { "label": "Mini", "value": "141533", "svalue": "22.5" } ] }, { "label": "VW Group", "value": "2693833", "svalue": "7.4", "fillcolor": "#cccccc", "data": [ { "label": "Audi", "value": "590719", "svalue": ".8" }, { "label": "Volkswagen", "value": "1313310", "svalue": "2.8" }, { "label": "Porsche", "value": "53849", "svalue": "28.9" }, { "label": "Skoda", "value": "472648", "svalue": "1.5" }, { "label": "Seat", "value": "263307", "svalue": "1.6" } ] }, { "label": "Daimler Group", "value": "626233", "svalue": "17.2", "fillcolor": "#cccccc", "data": [ { "label": "Mercedes", "value": "554354", "svalue": "7.5" }, { "label": "Smart", "value": "71879", "svalue": "28" } ] }, { "label": "PSA Group", "value": "1121881", "svalue": "4.9", "fillcolor": "#cccccc", "data": [ { "label": "Peugeot", "value": "642212", "svalue": "2.2" }, { "label": "DS", "value": "57078", "svalue": "-22.6" }, { "label": "Citroen", "value": "422591", "svalue": ".3" } ] }, { "label": "Opel Group", "value": "739829", "svalue": "1.2", "fillcolor": "#cccccc", "data": [ { "label": "Vauxhall", "value": "13154", "svalue": "1.3" }, { "label": "Opel", "value": "726675", "svalue": "1.3" } ] }, { "label": "Others", "value": "2566605", "svalue": "23.8", "fillcolor": "#cccccc", "data": [ { "label": "Mazda", "value": "160711", "svalue": "10.8" }, { "label": "Nissan", "value": "437187", "svalue": "15.6" }, { "label": "Mitsubishi", "value": "98659", "svalue": "27.9" }, { "label": "Volvo Car Corp.", "value": "198390", "svalue": "3.2" }, { "label": "Hyundai", "value": "355423", "svalue": "4" }, { "label": "Honda", "value": "100056", "svalue": "-9.6" }, { "label": "Kia", "value": "295140", "svalue": "3.3" }, { "label": "Ford", "value": "784252", "svalue": "2" }, { "label": "Suzuki", "value": "136787", "svalue": "2.9" } ] } ] } ], "colorrange": { "mapbypercent": "1", "gradient": "1", "minvalue": "-30", "code": "dc0018", "startlabel": "Decline", "endlabel": "Rise", "color": [ { "code": "ffffff", "maxvalue": "0", "label": "Static" }, { "code": "6fcd00", "maxvalue": "30" } ] } }
{
    "chart": {
        "caption": "Top-selling car manufacturers",
        "subcaption": "Europe - 2015",
        "animation": "0",
        "shownavigationbar": "1",
        "plotToolText": "<div><b>$label</b><br/><b>Cars Sold: </b>$datavalue<br/><b>Growth: </b>$svalue%</div>",
        "horizontalPadding": "0",
        "verticalPadding": "0",
        "plotborderthickness": ".5",
        "plotbordercolor": "b3b3b3",
        "chartBottomMargin": "0",
        "labelGlow": "0",
        "showLegend": "1",
        "legendpadding": "0",
        "legenditemfontcolor": "4b4b4b",
        "legendScaleLineThickness": "0",
        "legendCaptionFontSize": "10",
        "legendCaptionFontBold": "1",
        "legendspreadfactor": ".7",
        "legendaxisbordercolor": "bfbfbf",
        "labelFontColor": "000000",
        "labelFontSize": "9",
        "showchildlabels": "1",
        "theme": "zune",
        "legendCaption": "Growth in sales - Compared to previous year"
    },
    "data": [
        {
            "label": "Manufacturers",
            "value": "10639578",
            "fillcolor": "#999999",
            "data": [
                {
                    "label": "Toyota Group",
                    "value": "458560",
                    "svalue": "7.6",
                    "fillcolor": "#cccccc",
                    "data": [
                        {
                            "label": "Lexus",
                            "value": "29274",
                            "svalue": "27.1"
                        },
                        {
                            "label": "Toyota",
                            "value": "429286",
                            "svalue": "1.1"
                        }
                    ]
                },
                {
                    "label": "Renault Group",
                    "value": "1009047",
                    "svalue": "7.9",
                    "fillcolor": "#cccccc",
                    "data": [
                        {
                            "label": "Renault",
                            "value": "720197",
                            "svalue": "4.6"
                        },
                        {
                            "label": "Dacia",
                            "value": "288850",
                            "svalue": "-1"
                        }
                    ]
                },
                {
                    "label": "FCA Group",
                    "value": "594922",
                    "svalue": "13.5",
                    "fillcolor": "#cccccc",
                    "data": [
                        {
                            "label": "Alfa Romeo",
                            "value": "43495",
                            "svalue": "-9.5"
                        },
                        {
                            "label": "Fiat",
                            "value": "503101",
                            "svalue": "5.6"
                        },
                        {
                            "label": "Lancia",
                            "value": "48326",
                            "svalue": "-18.5"
                        }
                    ]
                },
                {
                    "label": "Jaguar Land Rover Group",
                    "value": "132313",
                    "svalue": "18.4",
                    "fillcolor": "#cccccc",
                    "data": [
                        {
                            "label": "Land Rover",
                            "value": "103239",
                            "svalue": "10.7"
                        },
                        {
                            "label": "Jaguar",
                            "value": "29074",
                            "svalue": "24"
                        }
                    ]
                },
                {
                    "label": "BMW Group",
                    "value": "696355",
                    "svalue": "12.3",
                    "fillcolor": "#cccccc",
                    "data": [
                        {
                            "label": "BMW",
                            "value": "554822",
                            "svalue": "4"
                        },
                        {
                            "label": "Mini",
                            "value": "141533",
                            "svalue": "22.5"
                        }
                    ]
                },
                {
                    "label": "VW Group",
                    "value": "2693833",
                    "svalue": "7.4",
                    "fillcolor": "#cccccc",
                    "data": [
                        {
                            "label": "Audi",
                            "value": "590719",
                            "svalue": ".8"
                        },
                        {
                            "label": "Volkswagen",
                            "value": "1313310",
                            "svalue": "2.8"
                        },
                        {
                            "label": "Porsche",
                            "value": "53849",
                            "svalue": "28.9"
                        },
                        {
                            "label": "Skoda",
                            "value": "472648",
                            "svalue": "1.5"
                        },
                        {
                            "label": "Seat",
                            "value": "263307",
                            "svalue": "1.6"
                        }
                    ]
                },
                {
                    "label": "Daimler Group",
                    "value": "626233",
                    "svalue": "17.2",
                    "fillcolor": "#cccccc",
                    "data": [
                        {
                            "label": "Mercedes",
                            "value": "554354",
                            "svalue": "7.5"
                        },
                        {
                            "label": "Smart",
                            "value": "71879",
                            "svalue": "28"
                        }
                    ]
                },
                {
                    "label": "PSA Group",
                    "value": "1121881",
                    "svalue": "4.9",
                    "fillcolor": "#cccccc",
                    "data": [
                        {
                            "label": "Peugeot",
                            "value": "642212",
                            "svalue": "2.2"
                        },
                        {
                            "label": "DS",
                            "value": "57078",
                            "svalue": "-22.6"
                        },
                        {
                            "label": "Citroen",
                            "value": "422591",
                            "svalue": ".3"
                        }
                    ]
                },
                {
                    "label": "Opel Group",
                    "value": "739829",
                    "svalue": "1.2",
                    "fillcolor": "#cccccc",
                    "data": [
                        {
                            "label": "Vauxhall",
                            "value": "13154",
                            "svalue": "1.3"
                        },
                        {
                            "label": "Opel",
                            "value": "726675",
                            "svalue": "1.3"
                        }
                    ]
                },
                {
                    "label": "Others",
                    "value": "2566605",
                    "svalue": "23.8",
                    "fillcolor": "#cccccc",
                    "data": [
                        {
                            "label": "Mazda",
                            "value": "160711",
                            "svalue": "10.8"
                        },
                        {
                            "label": "Nissan",
                            "value": "437187",
                            "svalue": "15.6"
                        },
                        {
                            "label": "Mitsubishi",
                            "value": "98659",
                            "svalue": "27.9"
                        },
                        {
                            "label": "Volvo Car Corp.",
                            "value": "198390",
                            "svalue": "3.2"
                        },
                        {
                            "label": "Hyundai",
                            "value": "355423",
                            "svalue": "4"
                        },
                        {
                            "label": "Honda",
                            "value": "100056",
                            "svalue": "-9.6"
                        },
                        {
                            "label": "Kia",
                            "value": "295140",
                            "svalue": "3.3"
                        },
                        {
                            "label": "Ford",
                            "value": "784252",
                            "svalue": "2"
                        },
                        {
                            "label": "Suzuki",
                            "value": "136787",
                            "svalue": "2.9"
                        }
                    ]
                }
            ]
        }
    ],
    "colorrange": {
        "mapbypercent": "1",
        "gradient": "1",
        "minvalue": "-30",
        "code": "dc0018",
        "startlabel": "Decline",
        "endlabel": "Rise",
        "color": [
            {
                "code": "ffffff",
                "maxvalue": "0",
                "label": "Static"
            },
            {
                "code": "6fcd00",
                "maxvalue": "30"
            }
        ]
    }
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'treemap',
    renderAt: 'chart-container',
    width: '700',
    height: '550',
    dataFormat: 'json',
    dataSource: {
      "chart": {
        "caption": "Top-selling car manufacturers",
        "subcaption": "Europe - 2015",
        "animation": "0",
        "shownavigationbar": "1",
        "plotToolText": "<div><b>$label</b><br/><b>Cars Sold: </b>$datavalue<br/><b>Growth: </b>$svalue%</div>",
        "horizontalPadding": "0",
        "verticalPadding": "0",
        "plotborderthickness": ".5",
        "plotbordercolor": "b3b3b3",
        "chartBottomMargin": "0",
        "labelGlow": "0",
        "showLegend": "1",
        "legendpadding": "0",
        "legenditemfontcolor": "4b4b4b",
        "legendScaleLineThickness": "0",
        "legendCaptionFontSize": "10",
        "legendCaptionFontBold": "1",
        "legendspreadfactor": ".7",
        "legendaxisbordercolor": "bfbfbf",
        "labelFontColor": "000000",
        "labelFontSize": "9",
        "showchildlabels": "1",
        "theme": "zune",
        "legendCaption": "Growth in sales - Compared to previous year"
      },
      "data": [{
        "label": "Manufacturers",
        "value": "10639578",
        "fillcolor": "#999999",
        "data": [{
          "label": "Toyota Group",
          "value": "458560",
          "svalue": "7.6",
          "fillcolor": "#cccccc",
          "data": [{
            "label": "Lexus",
            "value": "29274",
            "svalue": "27.1"
          }, {
            "label": "Toyota",
            "value": "429286",
            "svalue": "1.1"
          }]
        }, {
          "label": "Renault Group",
          "value": "1009047",
          "svalue": "7.9",
          "fillcolor": "#cccccc",
          "data": [{
            "label": "Renault",
            "value": "720197",
            "svalue": "4.6"
          }, {
            "label": "Dacia",
            "value": "288850",
            "svalue": "-1"
          }]
        }, {
          "label": "FCA Group",
          "value": "594922",
          "svalue": "13.5",
          "fillcolor": "#cccccc",
          "data": [{
            "label": "Alfa Romeo",
            "value": "43495",
            "svalue": "-9.5"
          }, {
            "label": "Fiat",
            "value": "503101",
            "svalue": "5.6"
          }, {
            "label": "Lancia",
            "value": "48326",
            "svalue": "-18.5"
          }]
        }, {
          "label": "Jaguar Land Rover Group",
          "value": "132313",
          "svalue": "18.4",
          "fillcolor": "#cccccc",
          "data": [{
            "label": "Land Rover",
            "value": "103239",
            "svalue": "10.7"
          }, {
            "label": "Jaguar",
            "value": "29074",
            "svalue": "24"
          }]
        }, {
          "label": "BMW Group",
          "value": "696355",
          "svalue": "12.3",
          "fillcolor": "#cccccc",
          "data": [{
            "label": "BMW",
            "value": "554822",
            "svalue": "4"
          }, {
            "label": "Mini",
            "value": "141533",
            "svalue": "22.5"
          }]
        }, {
          "label": "VW Group",
          "value": "2693833",
          "svalue": "7.4",
          "fillcolor": "#cccccc",
          "data": [{
            "label": "Audi",
            "value": "590719",
            "svalue": ".8"
          }, {
            "label": "Volkswagen",
            "value": "1313310",
            "svalue": "2.8"
          }, {
            "label": "Porsche",
            "value": "53849",
            "svalue": "28.9"
          }, {
            "label": "Skoda",
            "value": "472648",
            "svalue": "1.5"
          }, {
            "label": "Seat",
            "value": "263307",
            "svalue": "1.6"
          }]
        }, {
          "label": "Daimler Group",
          "value": "626233",
          "svalue": "17.2",
          "fillcolor": "#cccccc",
          "data": [{
            "label": "Mercedes",
            "value": "554354",
            "svalue": "7.5"
          }, {
            "label": "Smart",
            "value": "71879",
            "svalue": "28"
          }]
        }, {
          "label": "PSA Group",
          "value": "1121881",
          "svalue": "4.9",
          "fillcolor": "#cccccc",
          "data": [{
            "label": "Peugeot",
            "value": "642212",
            "svalue": "2.2"
          }, {
            "label": "DS",
            "value": "57078",
            "svalue": "-22.6"
          }, {
            "label": "Citroen",
            "value": "422591",
            "svalue": ".3"
          }]
        }, {
          "label": "Opel Group",
          "value": "739829",
          "svalue": "1.2",
          "fillcolor": "#cccccc",
          "data": [{
            "label": "Vauxhall",
            "value": "13154",
            "svalue": "1.3"
          }, {
            "label": "Opel",
            "value": "726675",
            "svalue": "1.3"
          }]
        }, {
          "label": "Others",
          "value": "2566605",
          "svalue": "23.8",
          "fillcolor": "#cccccc",
          "data": [{
            "label": "Mazda",
            "value": "160711",
            "svalue": "10.8"
          }, {
            "label": "Nissan",
            "value": "437187",
            "svalue": "15.6"
          }, {
            "label": "Mitsubishi",
            "value": "98659",
            "svalue": "27.9"
          }, {
            "label": "Volvo Car Corp.",
            "value": "198390",
            "svalue": "3.2"
          }, {
            "label": "Hyundai",
            "value": "355423",
            "svalue": "4"
          }, {
            "label": "Honda",
            "value": "100056",
            "svalue": "-9.6"
          }, {
            "label": "Kia",
            "value": "295140",
            "svalue": "3.3"
          }, {
            "label": "Ford",
            "value": "784252",
            "svalue": "2"
          }, {
            "label": "Suzuki",
            "value": "136787",
            "svalue": "2.9"
          }]
        }]
      }],
      "colorrange": {
        "mapbypercent": "1",
        "gradient": "1",
        "minvalue": "-30",
        "code": "dc0018",
        "startlabel": "Decline",
        "endlabel": "Rise",
        "color": [{
          "code": "ffffff",
          "maxvalue": "0",
          "label": "Static"
        }, {
          "code": "6fcd00",
          "maxvalue": "30"
        }]
      }
    }
  });
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

This treemap compares the top selling car manufacturers in Europe in the present year with their performance in the previous year.

Given below is a brief description of the attribute used to set the algorithm:

Attribute Name Description

algorithm

Takes squarified (default) or sliceanddice as values to set the tiling algorithm.

Slice and Dice Algorithm

In a treemap, the slice and dice tiling algorithm is one of the simplest algorithm. This algorithm has one of the most desirable properties like stability and preserved ordering. Despite all these properties this algorithm is not used over others because of its high aspect ratio where the treemap ends being drawn as thin rectangles, which are difficult to compare.

In FusionCharts Suite XT we support three modes of slicing:

  • Vertical
  • Horizontal
  • Alternate (default)

Vertical Mode

In the treemap you can set the mode of slicing the nodes. In the vertical mode of slicing all nodes in the 1st level are sliced vertically, but their child nodes are sliced horizontally. The chart below is rendered using vertical mode of slicing where the nodes of the manufacturers (say Toyota Group, BMW Group) are sliced vertically, but their child nodes are sliced horizontally.

The chart below is rendered using vertical mode of slicing :

FusionCharts will load here..
{ "chart": { "caption": "Top-selling car manufacturers", "subcaption": "Europe - 2015", "animation": "0", "shownavigationbar": "1", "plotToolText": "
$label
Cars Sold: $datavalue
Growth: $svalue%
", "horizontalPadding": "0", "verticalPadding": "0", "plotborderthickness": ".5", "plotbordercolor": "b3b3b3", "chartBottomMargin": "0", "labelGlow": "0", "showLegend": "1", "legendpadding": "0", "legenditemfontcolor": "4b4b4b", "legendScaleLineThickness": "0", "legendCaptionFontSize": "10", "legendCaptionFontBold": "1", "legendspreadfactor": ".7", "legendaxisbordercolor": "bfbfbf", "labelFontColor": "000000", "labelFontSize": "9", "showchildlabels": "1", "algorithm": "sliceanddice", "slicingmode": "vertical", "theme": "zune", "legendCaption": "Growth in sales - Compared to previous year" }, "data": [ { "label": "Manufacturers", "value": "10639578", "fillcolor": "#999999", "data": [ { "label": "Toyota Group", "value": "458560", "svalue": "7.6", "fillcolor": "#cccccc", "data": [ { "label": "Lexus", "value": "29274", "svalue": "27.1" }, { "label": "Toyota", "value": "429286", "svalue": "1.1" } ] }, { "label": "Renault Group", "value": "1009047", "svalue": "7.9", "fillcolor": "#cccccc", "data": [ { "label": "Renault", "value": "720197", "svalue": "4.6" }, { "label": "Dacia", "value": "288850", "svalue": "-1" } ] }, { "label": "FCA Group", "value": "594922", "svalue": "13.5", "fillcolor": "#cccccc", "data": [ { "label": "Alfa Romeo", "value": "43495", "svalue": "-9.5" }, { "label": "Fiat", "value": "503101", "svalue": "5.6" }, { "label": "Lancia", "value": "48326", "svalue": "-18.5" } ] }, { "label": "Jaguar Land Rover Group", "value": "132313", "svalue": "18.4", "fillcolor": "#cccccc", "data": [ { "label": "Land Rover", "value": "103239", "svalue": "10.7" }, { "label": "Jaguar", "value": "29074", "svalue": "24" } ] }, { "label": "BMW Group", "value": "696355", "svalue": "12.3", "fillcolor": "#cccccc", "data": [ { "label": "BMW", "value": "554822", "svalue": "4" }, { "label": "Mini", "value": "141533", "svalue": "22.5" } ] }, { "label": "VW Group", "value": "2693833", "svalue": "7.4", "fillcolor": "#cccccc", "data": [ { "label": "Audi", "value": "590719", "svalue": ".8" }, { "label": "Volkswagen", "value": "1313310", "svalue": "2.8" }, { "label": "Porsche", "value": "53849", "svalue": "28.9" }, { "label": "Skoda", "value": "472648", "svalue": "1.5" }, { "label": "Seat", "value": "263307", "svalue": "1.6" } ] }, { "label": "Daimler Group", "value": "626233", "svalue": "17.2", "fillcolor": "#cccccc", "data": [ { "label": "Mercedes", "value": "554354", "svalue": "7.5" }, { "label": "Smart", "value": "71879", "svalue": "28" } ] }, { "label": "PSA Group", "value": "1121881", "svalue": "4.9", "fillcolor": "#cccccc", "data": [ { "label": "Peugeot", "value": "642212", "svalue": "2.2" }, { "label": "DS", "value": "57078", "svalue": "-22.6" }, { "label": "Citroen", "value": "422591", "svalue": ".3" } ] }, { "label": "Opel Group", "value": "739829", "svalue": "1.2", "fillcolor": "#cccccc", "data": [ { "label": "Vauxhall", "value": "13154", "svalue": "1.3" }, { "label": "Opel", "value": "726675", "svalue": "1.3" } ] }, { "label": "Others", "value": "2566605", "svalue": "23.8", "fillcolor": "#cccccc", "data": [ { "label": "Mazda", "value": "160711", "svalue": "10.8" }, { "label": "Nissan", "value": "437187", "svalue": "15.6" }, { "label": "Mitsubishi", "value": "98659", "svalue": "27.9" }, { "label": "Volvo Car Corp.", "value": "198390", "svalue": "3.2" }, { "label": "Hyundai", "value": "355423", "svalue": "4" }, { "label": "Honda", "value": "100056", "svalue": "-9.6" }, { "label": "Kia", "value": "295140", "svalue": "3.3" }, { "label": "Ford", "value": "784252", "svalue": "2" }, { "label": "Suzuki", "value": "136787", "svalue": "2.9" } ] } ] } ], "colorrange": { "mapbypercent": "1", "gradient": "1", "minvalue": "-30", "code": "dc0018", "startlabel": "Decline", "endlabel": "Rise", "color": [ { "code": "ffffff", "maxvalue": "0", "label": "Static" }, { "code": "6fcd00", "maxvalue": "30" } ] } }
{
    "chart": {
        "caption": "Top-selling car manufacturers",
        "subcaption": "Europe - 2015",
        "animation": "0",
        "shownavigationbar": "1",
        "plotToolText": "<div><b>$label</b><br/><b>Cars Sold: </b>$datavalue<br/><b>Growth: </b>$svalue%</div>",
        "horizontalPadding": "0",
        "verticalPadding": "0",
        "plotborderthickness": ".5",
        "plotbordercolor": "b3b3b3",
        "chartBottomMargin": "0",
        "labelGlow": "0",
        "showLegend": "1",
        "legendpadding": "0",
        "legenditemfontcolor": "4b4b4b",
        "legendScaleLineThickness": "0",
        "legendCaptionFontSize": "10",
        "legendCaptionFontBold": "1",
        "legendspreadfactor": ".7",
        "legendaxisbordercolor": "bfbfbf",
        "labelFontColor": "000000",
        "labelFontSize": "9",
        "showchildlabels": "1",
        "algorithm": "sliceanddice",
        "slicingmode": "vertical",
        "theme": "zune",
        "legendCaption": "Growth in sales - Compared to previous year"
    },
    "data": [
        {
            "label": "Manufacturers",
            "value": "10639578",
            "fillcolor": "#999999",
            "data": [
                {
                    "label": "Toyota Group",
                    "value": "458560",
                    "svalue": "7.6",
                    "fillcolor": "#cccccc",
                    "data": [
                        {
                            "label": "Lexus",
                            "value": "29274",
                            "svalue": "27.1"
                        },
                        {
                            "label": "Toyota",
                            "value": "429286",
                            "svalue": "1.1"
                        }
                    ]
                },
                {
                    "label": "Renault Group",
                    "value": "1009047",
                    "svalue": "7.9",
                    "fillcolor": "#cccccc",
                    "data": [
                        {
                            "label": "Renault",
                            "value": "720197",
                            "svalue": "4.6"
                        },
                        {
                            "label": "Dacia",
                            "value": "288850",
                            "svalue": "-1"
                        }
                    ]
                },
                {
                    "label": "FCA Group",
                    "value": "594922",
                    "svalue": "13.5",
                    "fillcolor": "#cccccc",
                    "data": [
                        {
                            "label": "Alfa Romeo",
                            "value": "43495",
                            "svalue": "-9.5"
                        },
                        {
                            "label": "Fiat",
                            "value": "503101",
                            "svalue": "5.6"
                        },
                        {
                            "label": "Lancia",
                            "value": "48326",
                            "svalue": "-18.5"
                        }
                    ]
                },
                {
                    "label": "Jaguar Land Rover Group",
                    "value": "132313",
                    "svalue": "18.4",
                    "fillcolor": "#cccccc",
                    "data": [
                        {
                            "label": "Land Rover",
                            "value": "103239",
                            "svalue": "10.7"
                        },
                        {
                            "label": "Jaguar",
                            "value": "29074",
                            "svalue": "24"
                        }
                    ]
                },
                {
                    "label": "BMW Group",
                    "value": "696355",
                    "svalue": "12.3",
                    "fillcolor": "#cccccc",
                    "data": [
                        {
                            "label": "BMW",
                            "value": "554822",
                            "svalue": "4"
                        },
                        {
                            "label": "Mini",
                            "value": "141533",
                            "svalue": "22.5"
                        }
                    ]
                },
                {
                    "label": "VW Group",
                    "value": "2693833",
                    "svalue": "7.4",
                    "fillcolor": "#cccccc",
                    "data": [
                        {
                            "label": "Audi",
                            "value": "590719",
                            "svalue": ".8"
                        },
                        {
                            "label": "Volkswagen",
                            "value": "1313310",
                            "svalue": "2.8"
                        },
                        {
                            "label": "Porsche",
                            "value": "53849",
                            "svalue": "28.9"
                        },
                        {
                            "label": "Skoda",
                            "value": "472648",
                            "svalue": "1.5"
                        },
                        {
                            "label": "Seat",
                            "value": "263307",
                            "svalue": "1.6"
                        }
                    ]
                },
                {
                    "label": "Daimler Group",
                    "value": "626233",
                    "svalue": "17.2",
                    "fillcolor": "#cccccc",
                    "data": [
                        {
                            "label": "Mercedes",
                            "value": "554354",
                            "svalue": "7.5"
                        },
                        {
                            "label": "Smart",
                            "value": "71879",
                            "svalue": "28"
                        }
                    ]
                },
                {
                    "label": "PSA Group",
                    "value": "1121881",
                    "svalue": "4.9",
                    "fillcolor": "#cccccc",
                    "data": [
                        {
                            "label": "Peugeot",
                            "value": "642212",
                            "svalue": "2.2"
                        },
                        {
                            "label": "DS",
                            "value": "57078",
                            "svalue": "-22.6"
                        },
                        {
                            "label": "Citroen",
                            "value": "422591",
                            "svalue": ".3"
                        }
                    ]
                },
                {
                    "label": "Opel Group",
                    "value": "739829",
                    "svalue": "1.2",
                    "fillcolor": "#cccccc",
                    "data": [
                        {
                            "label": "Vauxhall",
                            "value": "13154",
                            "svalue": "1.3"
                        },
                        {
                            "label": "Opel",
                            "value": "726675",
                            "svalue": "1.3"
                        }
                    ]
                },
                {
                    "label": "Others",
                    "value": "2566605",
                    "svalue": "23.8",
                    "fillcolor": "#cccccc",
                    "data": [
                        {
                            "label": "Mazda",
                            "value": "160711",
                            "svalue": "10.8"
                        },
                        {
                            "label": "Nissan",
                            "value": "437187",
                            "svalue": "15.6"
                        },
                        {
                            "label": "Mitsubishi",
                            "value": "98659",
                            "svalue": "27.9"
                        },
                        {
                            "label": "Volvo Car Corp.",
                            "value": "198390",
                            "svalue": "3.2"
                        },
                        {
                            "label": "Hyundai",
                            "value": "355423",
                            "svalue": "4"
                        },
                        {
                            "label": "Honda",
                            "value": "100056",
                            "svalue": "-9.6"
                        },
                        {
                            "label": "Kia",
                            "value": "295140",
                            "svalue": "3.3"
                        },
                        {
                            "label": "Ford",
                            "value": "784252",
                            "svalue": "2"
                        },
                        {
                            "label": "Suzuki",
                            "value": "136787",
                            "svalue": "2.9"
                        }
                    ]
                }
            ]
        }
    ],
    "colorrange": {
        "mapbypercent": "1",
        "gradient": "1",
        "minvalue": "-30",
        "code": "dc0018",
        "startlabel": "Decline",
        "endlabel": "Rise",
        "color": [
            {
                "code": "ffffff",
                "maxvalue": "0",
                "label": "Static"
            },
            {
                "code": "6fcd00",
                "maxvalue": "30"
            }
        ]
    }
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'treemap',
    renderAt: 'chart-container',
    width: '700',
    height: '550',
    dataFormat: 'json',
    dataSource: {
      "chart": {
        "caption": "Top-selling car manufacturers",
        "subcaption": "Europe - 2015",
        "animation": "0",
        "shownavigationbar": "1",
        "plotToolText": "<div><b>$label</b><br/><b>Cars Sold: </b>$datavalue<br/><b>Growth: </b>$svalue%</div>",
        "horizontalPadding": "0",
        "verticalPadding": "0",
        "plotborderthickness": ".5",
        "plotbordercolor": "b3b3b3",
        "chartBottomMargin": "0",
        "labelGlow": "0",
        "showLegend": "1",
        "legendpadding": "0",
        "legenditemfontcolor": "4b4b4b",
        "legendScaleLineThickness": "0",
        "legendCaptionFontSize": "10",
        "legendCaptionFontBold": "1",
        "legendspreadfactor": ".7",
        "legendaxisbordercolor": "bfbfbf",
        "labelFontColor": "000000",
        "labelFontSize": "9",
        "showchildlabels": "1",
        "algorithm": "sliceanddice",
        "slicingmode": "vertical",
        "theme": "zune",
        "legendCaption": "Growth in sales - Compared to previous year"
      },
      "data": [{
        "label": "Manufacturers",
        "value": "10639578",
        "fillcolor": "#999999",
        "data": [{
          "label": "Toyota Group",
          "value": "458560",
          "svalue": "7.6",
          "fillcolor": "#cccccc",
          "data": [{
            "label": "Lexus",
            "value": "29274",
            "svalue": "27.1"
          }, {
            "label": "Toyota",
            "value": "429286",
            "svalue": "1.1"
          }]
        }, {
          "label": "Renault Group",
          "value": "1009047",
          "svalue": "7.9",
          "fillcolor": "#cccccc",
          "data": [{
            "label": "Renault",
            "value": "720197",
            "svalue": "4.6"
          }, {
            "label": "Dacia",
            "value": "288850",
            "svalue": "-1"
          }]
        }, {
          "label": "FCA Group",
          "value": "594922",
          "svalue": "13.5",
          "fillcolor": "#cccccc",
          "data": [{
            "label": "Alfa Romeo",
            "value": "43495",
            "svalue": "-9.5"
          }, {
            "label": "Fiat",
            "value": "503101",
            "svalue": "5.6"
          }, {
            "label": "Lancia",
            "value": "48326",
            "svalue": "-18.5"
          }]
        }, {
          "label": "Jaguar Land Rover Group",
          "value": "132313",
          "svalue": "18.4",
          "fillcolor": "#cccccc",
          "data": [{
            "label": "Land Rover",
            "value": "103239",
            "svalue": "10.7"
          }, {
            "label": "Jaguar",
            "value": "29074",
            "svalue": "24"
          }]
        }, {
          "label": "BMW Group",
          "value": "696355",
          "svalue": "12.3",
          "fillcolor": "#cccccc",
          "data": [{
            "label": "BMW",
            "value": "554822",
            "svalue": "4"
          }, {
            "label": "Mini",
            "value": "141533",
            "svalue": "22.5"
          }]
        }, {
          "label": "VW Group",
          "value": "2693833",
          "svalue": "7.4",
          "fillcolor": "#cccccc",
          "data": [{
            "label": "Audi",
            "value": "590719",
            "svalue": ".8"
          }, {
            "label": "Volkswagen",
            "value": "1313310",
            "svalue": "2.8"
          }, {
            "label": "Porsche",
            "value": "53849",
            "svalue": "28.9"
          }, {
            "label": "Skoda",
            "value": "472648",
            "svalue": "1.5"
          }, {
            "label": "Seat",
            "value": "263307",
            "svalue": "1.6"
          }]
        }, {
          "label": "Daimler Group",
          "value": "626233",
          "svalue": "17.2",
          "fillcolor": "#cccccc",
          "data": [{
            "label": "Mercedes",
            "value": "554354",
            "svalue": "7.5"
          }, {
            "label": "Smart",
            "value": "71879",
            "svalue": "28"
          }]
        }, {
          "label": "PSA Group",
          "value": "1121881",
          "svalue": "4.9",
          "fillcolor": "#cccccc",
          "data": [{
            "label": "Peugeot",
            "value": "642212",
            "svalue": "2.2"
          }, {
            "label": "DS",
            "value": "57078",
            "svalue": "-22.6"
          }, {
            "label": "Citroen",
            "value": "422591",
            "svalue": ".3"
          }]
        }, {
          "label": "Opel Group",
          "value": "739829",
          "svalue": "1.2",
          "fillcolor": "#cccccc",
          "data": [{
            "label": "Vauxhall",
            "value": "13154",
            "svalue": "1.3"
          }, {
            "label": "Opel",
            "value": "726675",
            "svalue": "1.3"
          }]
        }, {
          "label": "Others",
          "value": "2566605",
          "svalue": "23.8",
          "fillcolor": "#cccccc",
          "data": [{
            "label": "Mazda",
            "value": "160711",
            "svalue": "10.8"
          }, {
            "label": "Nissan",
            "value": "437187",
            "svalue": "15.6"
          }, {
            "label": "Mitsubishi",
            "value": "98659",
            "svalue": "27.9"
          }, {
            "label": "Volvo Car Corp.",
            "value": "198390",
            "svalue": "3.2"
          }, {
            "label": "Hyundai",
            "value": "355423",
            "svalue": "4"
          }, {
            "label": "Honda",
            "value": "100056",
            "svalue": "-9.6"
          }, {
            "label": "Kia",
            "value": "295140",
            "svalue": "3.3"
          }, {
            "label": "Ford",
            "value": "784252",
            "svalue": "2"
          }, {
            "label": "Suzuki",
            "value": "136787",
            "svalue": "2.9"
          }]
        }]
      }],
      "colorrange": {
        "mapbypercent": "1",
        "gradient": "1",
        "minvalue": "-30",
        "code": "dc0018",
        "startlabel": "Decline",
        "endlabel": "Rise",
        "color": [{
          "code": "ffffff",
          "maxvalue": "0",
          "label": "Static"
        }, {
          "code": "6fcd00",
          "maxvalue": "30"
        }]
      }
    }
  });
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

Horizontal Mode

Horizontal mode of slicing is the reverse of vertical mode where all nodes in the 1st level are sliced horizontally, but their child nodes are sliced vertically. When you set slicing mode to horizontal, the chart looks as shown in the image below :

Slice and dice Horizontal Mode

Alternate Mode

In the alternate mode of slicing, as the name implies, the direction in which the nodes are sliced alternates between vertical and horizontal. When you set slicing mode to alternate, the chart looks as shown in the image below:

Slice and dice Alternate Mode

Given below is a brief description of the attribute used to set the algorithm:

Attribute Name Description

algorithm

Takes squarified (default) or sliceanddice as values to set the tiling algorithm

slicingMode

If you opt to choose sliceanddice algorithm, using slicingMode you can set different views for your chart. Given below is a brief description for the modes :
vertical : In this mode all the nodes in the nth level is sliced vertically and the n+1 th level is sliced horizontally, starts with level 1.
horizontal : In this mode all the nodes in the nth level is sliced horizontally and the n+1 th level is sliced vertically, starts with level 1
alternate : In this mode, rectangles are sliced alternatively in the same level.

Click here for the complete list of attributes supported by the treemap.

Top