Tiling Algorithm for the Treemap
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:
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..
$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"
}
]
}
}Cars Sold: $datavalue
Growth: $svalue%
{
"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 |
|---|---|
|
Takes |
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 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..
$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"
}
]
}
}Cars Sold: $datavalue
Growth: $svalue%
{
"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 :
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:
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 |
Click here for the complete list of attributes supported by the treemap.