Loading
Introducing the Treemap
Treemapping is a visual representation of an information tree created using the tree data structure. It is displayed as 2D nested rectangles, representing the nodes and leaves of the tree data, related to each other.
A simple treemap is shown below:
This treemap compares the sales team’s performance in the present year with their performance in the previous year.
When a rectangle is clicked, the clicked node and its subtree replaces the current root node. For example, when any rectangle (node) in the Northern Region is clicked, the chart view changes to what is shown in the image below:
Click the rectangles in the treemap shown above and see how you can traverse through the leaf nodes.
In this section, you will be shown:
- Applications of a Treemap
- Visualization of a Treemap
- Concepts Related to the Treemap
- How to interact with a Treemap
Applications of a Treemap
Treemap is primarily used to display hierarchical information that can be represented using the tree structure. Common use-cases represented using the treemap include showing the folder structure of a system. It is also used to study patterns and occurrences in a large data set. This is because the colour and the size dimensions are correlated.
Visualization of a Treemap
Treemap is modeled based on the tree data structure.
The image below shows how an information tree is translated to the treemap.
Visualization of the treemap should conform to the following pointers:
- Information should be structured in the treemap, where it has only one root element.
- The color of a rectangle can represent a dimension, a trend, or a deviation from a key value.
- The leaf node should be the innermost rectangle; the area of this rectangle is proportional to the data value assigned to that leaf.
- Nodes which are not leaves should not be nested; the area of these rectangles is less significant.
- In an ideal treemap implementation, the aspect ratio should come to one.
- The map should utilize maximum space on the screen. If space management is efficiently done, the treemap can be used to plot thousands of items.
Important Concepts Related to the Treemap
Tiling
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.
But these properties have an inverse relationship; there is a tradeoff between the order of placement and the aspect ratio.
When the aspect ratio is optimized, the order of placement becomes less predictable. On the other hand, when the order of placement becomes more stable, the aspect ratio degrades. Therefore tiling algorithms are generally categorized as those that:
-
support low aspect ratio
-
support high stability
-
try to strike a balance between the two
Aspect Ratio
Aspect ratio, especially, for the innermost rectangle is one of the most important constraints in this chart. If the aspect ratio is high, the treemap ends being drawn as thin rectangles, which are tremendously difficult to compare. In the ideal case, where the treemap aspect ratio is expected to be 1, the nested rectangles will be squares that are easy to compare visually. Although, the aspect ratio is never exactly 1 in real-life use-cases, there are algorithms that try to keep it to 1, by trading off the order.
The table below shows the algorithms that are commonly used, also pointing out the relation between the algorithm type and the trade-off points.
Algorithm | Order | Aspect Ratio |
---|---|---|
Slice and dice |
Ordered |
Very high |
Squarified |
Unordered |
Lowest |
Other algorithms that can also be used, include:
- Binary tree
- Mixed treemaps
Presently, the FusionCharts Treemap supports only the slice and dice and the squarified algorithms. Support for more algorithms is subject to consideration in the future releases.
Interacting with a Treemap
Interaction Model (as-is)
The basic interaction model for the treemap includes:
Left-click: When a rectangle on the treemap is left-clicked, the tree traverses down. The root node changes to the clicked node, plotting only the subtree of the clicked node. If the tree cannot be traversed, the model fails silently.
Right-click: When a rectangle on the treemap is right-clicked, the tree traverses up. The root node is replaced with the node that is its immediate ancestor. If the tree cannot be traversed, the model fails silently.
Hover: When a rectangle on the treemap is hovered over, the action highlights the complete subtree that belongs to that node.
Legend: An optional gradient legend can be incorporated in a treemap to filter the nodes.
The FusionCharts Interaction Model for the Treemap
FusionCharts implements the following model for interacting with a treemap:
The initial stage:
Sale: $$value
Growth: $svalue%
{
"chart": {
"animation": "0",
"hideTitle": "1",
"plotToolText": "<div><b>$label</b><br/> <b>Sale: </b>$$value<br/><b>Growth: </b>$svalue%</div>",
"horizontalPadding": "1",
"verticalPadding": "1",
"plotborderthickness": ".5",
"plotbordercolor": "666666",
"legendpadding": "0",
"legendItemFontSize": "10",
"legendItemFontBold": "1",
"showLegend": "1",
"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": "fint"
},
"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",
"value": "72000",
"sValue": "14"
},
{
"label": "Becky Barton",
"value": "18000",
"sValue": "-10"
},
{
"label": "Ben Rios",
"value": "14000",
"sValue": "-5"
},
{
"label": "Donnie Patton",
"value": "37000",
"sValue": "2"
},
{
"label": "Dana Freeman",
"value": "41000",
"sValue": "5"
},
{
"label": "Darren Barrett",
"value": "54000",
"sValue": "7"
},
{
"label": "Steve Vaughn",
"value": "35000",
"sValue": "12"
},
{
"label": "Roosevelt Rhodes",
"value": "48000",
"sValue": "15"
},
{
"label": "Moses Sparks",
"value": "38000",
"sValue": "-4"
},
{
"label": "Hope Cox",
"value": "32000",
"sValue": "-10"
},
{
"label": "Hector Lowe",
"value": "66000",
"sValue": "15"
},
{
"label": "Lori Christensen",
"value": "47000",
"sValue": "10"
},
{
"label": "Roman Aguilar",
"value": "14000",
"sValue": "-15"
},
{
"label": "Brittany Chandler",
"value": "21000",
"sValue": "-12"
},
{
"label": "Tiffaney Battle",
"value": "60000",
"sValue": "10"
},
{
"label": "Elin Stamps",
"value": "54000",
"sValue": "5"
},
{
"label": "Donnetta Coley",
"value": "59000",
"sValue": "+14"
},
{
"label": "Emmaline Halcomb",
"value": "34000",
"sValue": "-5"
},
{
"label": "Natosha Hammett",
"value": "39000",
"sValue": "-7"
},
{
"label": "Kimi Stegall",
"value": "15000",
"sValue": "-19"
},
{
"label": "Norberto Kirk",
"value": "46000",
"sValue": "2"
},
{
"label": "Noma Martindale",
"value": "52000",
"sValue": "12"
},
{
"label": "Coreen Numbers",
"value": "30000",
"sValue": "-1"
},
{
"label": "Chas Irvin",
"value": "26000",
"sValue": "-17"
},
{
"label": "Carlo Tobin",
"value": "31000",
"sValue": "-14"
},
{
"label": "Ayanna Mclain",
"value": "29000",
"sValue": "-5"
},
{
"label": "Rolland Turney",
"value": "42000",
"sValue": "+5"
},
{
"label": "Ona Roden",
"value": "64000",
"sValue": "+20"
},
{
"label": "Drew Clarkson",
"value": "24000",
"sValue": "-20"
},
{
"label": "Samuel Adler",
"value": "29000",
"sValue": "-15"
},
{
"label": "Adrian Steen",
"value": "51000",
"sValue": "2"
},
{
"label": "Xiao Batson",
"value": "35000",
"sValue": "-2"
},
{
"label": "Britney Hammonds",
"value": "45000",
"sValue": "3"
},
{
"label": "Roslyn Wilhelm",
"value": "28000",
"sValue": "-5"
},
{
"label": "Alva Puente",
"value": "26000",
"sValue": "-8"
},
{
"label": "Daina Horvath",
"value": "49000",
"sValue": "9"
},
{
"label": "Louie Chaney",
"value": "54000",
"sValue": "15"
},
{
"label": "Olympia Mcmullen",
"value": "71000",
"sValue": "14"
},
{
"label": "Nichol Leclair",
"value": "38000",
"sValue": "-10"
},
{
"label": "Marylou Messenger",
"value": "41000",
"sValue": "5"
},
{
"label": "Christoper Crowley",
"value": "34000",
"sValue": "-4"
},
{
"label": "Neville Venable",
"value": "37000",
"sValue": "-10"
},
{
"label": "Brock Rowell",
"value": "35000",
"sValue": "-4"
},
{
"label": "Gisele Pelletier",
"value": "32000",
"sValue": "-5"
},
{
"label": "Thelma Caldwell",
"value": "35000",
"sValue": "5"
},
{
"label": "Shyla Plunkett",
"value": "84000",
"sValue": "15"
},
{
"label": "Joie Dickson",
"value": "60000",
"sValue": "10"
},
{
"label": "Shana Nabors",
"value": "50000",
"sValue": "11"
},
{
"label": "Catina Burris",
"value": "58000",
"sValue": "5"
},
{
"label": "Man Spearman",
"value": "36000",
"sValue": "-5"
},
{
"label": "Shaunna Hamby",
"value": "72000",
"sValue": "14"
},
{
"label": "Stormy Read",
"value": "18000",
"sValue": "-10"
},
{
"label": "Wen Coe",
"value": "14000",
"sValue": "-5"
},
{
"label": "Elizebeth Poston",
"value": "37000",
"sValue": "2"
},
{
"label": "Breanna Stringer",
"value": "41000",
"sValue": "5"
},
{
"label": "Allyn Holly",
"value": "54000",
"sValue": "7"
},
{
"label": "Lera Gaylord",
"value": "35000",
"sValue": "12"
},
{
"label": "Lashunda Dowd",
"value": "48000",
"sValue": "15"
},
{
"label": "Kiesha Tyner",
"value": "38000",
"sValue": "-4"
},
{
"label": "Lamont Allman",
"value": "32000",
"sValue": "-10"
},
{
"label": "Sun Switzer",
"value": "66000",
"sValue": "15"
},
{
"label": "Dorene Small",
"value": "47000",
"sValue": "10"
},
{
"label": "Cherlyn Bozeman",
"value": "14000",
"sValue": "-15"
},
{
"label": "Stephani Contreras",
"value": "21000",
"sValue": "-12"
},
{
"label": "Bebe Holcomb",
"value": "60000",
"sValue": "10"
},
{
"label": "Shenika Barham",
"value": "54000",
"sValue": "5"
},
{
"label": "Troy Hobbs",
"value": "59000",
"sValue": "+14"
},
{
"label": "Thomas Tom",
"value": "34000",
"sValue": "-5"
},
{
"label": "Sunshine Libby",
"value": "39000",
"sValue": "-7"
},
{
"label": "Tambra Patten",
"value": "15000",
"sValue": "-19"
},
{
"label": "Marlyn Cato",
"value": "46000",
"sValue": "2"
},
{
"label": "Jeanelle Ham",
"value": "52000",
"sValue": "12"
},
{
"label": "Armanda Kimble",
"value": "30000",
"sValue": "-1"
},
{
"label": "Danna Fitzpatrick",
"value": "26000",
"sValue": "-17"
},
{
"label": "Elmira Nagle",
"value": "31000",
"sValue": "-14"
},
{
"label": "Bella Marx",
"value": "29000",
"sValue": "-5"
},
{
"label": "Vania Meeks",
"value": "42000",
"sValue": "+5"
},
{
"label": "Florencio Heffner",
"value": "64000",
"sValue": "+20"
},
{
"label": "Amie Peoples",
"value": "24000",
"sValue": "-20"
},
{
"label": "Chrystal Downs",
"value": "29000",
"sValue": "-15"
},
{
"label": "Glennis Chisholm",
"value": "51000",
"sValue": "2"
},
{
"label": "Sydney Castaneda",
"value": "35000",
"sValue": "-2"
},
{
"label": "Gregory Drummond",
"value": "45000",
"sValue": "3"
},
{
"label": "Birdie Neely",
"value": "28000",
"sValue": "-5"
},
{
"label": "Ciera Mcafee",
"value": "26000",
"sValue": "-8"
},
{
"label": "Martin Larose",
"value": "49000",
"sValue": "9"
},
{
"label": "Bobette Dutton",
"value": "54000",
"sValue": "15"
},
{
"label": "Numbers Yarbrough",
"value": "71000",
"sValue": "14"
},
{
"label": "Sanjuanita Croteau",
"value": "38000",
"sValue": "-10"
},
{
"label": "Alysha Aguirre",
"value": "41000",
"sValue": "5"
},
{
"label": "Beau Welker",
"value": "34000",
"sValue": "-4"
},
{
"label": "Yuri Brannon",
"value": "37000",
"sValue": "-10"
},
{
"label": "Breana Marion",
"value": "35000",
"sValue": "-4"
},
{
"label": "Bernardina Fennell",
"value": "32000",
"sValue": "-5"
},
{
"label": "Bridgette Gould",
"value": "35000",
"sValue": "5"
}
]
},
{
"label": "Eastern Region",
"value": "1110000",
"data": [
{
"label": "Lee Miles",
"value": "18000",
"sValue": "-5"
},
{
"label": "Eduardo Day",
"value": "21000",
"sValue": "5"
},
{
"label": "Darrell Schultz",
"value": "29500",
"sValue": "10"
},
{
"label": "Troy Patrick",
"value": "25500",
"sValue": "12"
},
{
"label": "Kerry Smith",
"value": "30000",
"sValue": "15"
},
{
"label": "Franklin Walker",
"value": "18500",
"sValue": "-5"
},
{
"label": "Toby Brady",
"value": "28500",
"sValue": "-2"
},
{
"label": "Kenneth Wilkerson",
"value": "25000",
"sValue": "5"
},
{
"label": "Ralph Goodman",
"value": "36000",
"sValue": "10"
},
{
"label": "Lela Glover",
"value": "15500",
"sValue": "-14"
},
{
"label": "Warren Gordon",
"value": "25500",
"sValue": "-10"
},
{
"label": "Gladys Ruiz",
"value": "33000",
"sValue": "15"
},
{
"label": "Mabel Norris",
"value": "14000",
"sValue": "-5"
},
{
"label": "Darrel Rodgers",
"value": "17500",
"sValue": "-15"
},
{
"label": "Barry Larson",
"value": "20000",
"sValue": "2"
},
{
"label": "Alma Houston",
"value": "31000",
"sValue": "-3"
},
{
"label": "Rochelle Burke",
"value": "12500",
"sValue": "5"
},
{
"label": "Orville Garza",
"value": "34500",
"sValue": "-7"
},
{
"label": "Rex Nichols",
"value": "14500",
"sValue": "-10"
},
{
"label": "Jenna Burton",
"value": "18500",
"sValue": "8"
},
{
"label": "Jordan Little",
"value": "21000",
"sValue": "3"
},
{
"label": "Rodolfo Dawson",
"value": "28500",
"sValue": "10"
},
{
"label": "Darryl Bowen",
"value": "15500",
"sValue": "-10"
},
{
"label": "Marsha Foster",
"value": "12500",
"sValue": "-18"
},
{
"label": "Sandra Curtis",
"value": "32000",
"sValue": "19"
},
{
"label": "Alexis Robinson",
"value": "19500",
"sValue": "-4"
},
{
"label": "Courtney Stokes",
"value": "27500",
"sValue": "10"
},
{
"label": "Kelli Miller",
"value": "34500",
"sValue": "14"
},
{
"label": "Cathy Davis",
"value": "14500",
"sValue": "-16"
},
{
"label": "Gaynell Mcafee",
"value": "14000",
"sValue": "-5"
},
{
"label": "Trinidad Iverson",
"value": "24500",
"sValue": "5"
},
{
"label": "Anjelica Kilpatrick",
"value": "27000",
"sValue": "15"
},
{
"label": "Cheryle Hearn",
"value": "17500",
"sValue": "-10"
},
{
"label": "Rosamond Gass",
"value": "21000",
"sValue": "5"
},
{
"label": "Katharine Perrin",
"value": "12500",
"sValue": "-20"
},
{
"label": "Heide Matteson",
"value": "32000",
"sValue": "20"
},
{
"label": "Amparo Fortin",
"value": "25500",
"sValue": "10"
},
{
"label": "Charlena Bills",
"value": "19500",
"sValue": "-2"
},
{
"label": "Ronna Irizarry",
"value": "30000",
"sValue": "15"
},
{
"label": "Fidelia Hummel",
"value": "28000",
"sValue": "5"
},
{
"label": "Darlena Maher",
"value": "14500",
"sValue": "-7"
},
{
"label": "Isa Browning",
"value": "17000",
"sValue": "-10"
},
{
"label": "Dalene Baron",
"value": "22500",
"sValue": "10"
},
{
"label": "Ghislaine Loy",
"value": "12000",
"sValue": "-18"
},
{
"label": "Alexander Eldridge",
"value": "18500",
"sValue": "-2"
},
{
"label": "Brett Clemmons",
"value": "13000",
"sValue": "-15"
},
{
"label": "Mellie Hackney",
"value": "13000",
"sValue": "-18"
},
{
"label": "Gerry Felder",
"value": "35500",
"sValue": "15"
},
{
"label": "Librada Creighton",
"value": "17500",
"sValue": "-7"
},
{
"label": "Florence Pierce",
"value": "21000",
"sValue": "5"
}
]
},
{
"label": "Southern Region",
"value": "1555000",
"data": [
{
"label": "Derek Sandoval",
"value": "12000",
"sValue": "-15"
},
{
"label": "Bertha Bishop",
"value": "55000",
"sValue": "10"
},
{
"label": "Dominick Price",
"value": "24500",
"sValue": "10"
},
{
"label": "Sylvia Rodriquez",
"value": "15000",
"sValue": "-2"
},
{
"label": "Leland Jennings",
"value": "63000",
"sValue": "-5"
},
{
"label": "Dean Collins",
"value": "56000",
"sValue": "3"
},
{
"label": "Jamie Cohen",
"value": "19500",
"sValue": "4"
},
{
"label": "Elias Hammond",
"value": "29500",
"sValue": "12"
},
{
"label": "Kristy Stone",
"value": "24500",
"sValue": "5"
},
{
"label": "Jeanette Wood",
"value": "17500",
"sValue": "-10"
},
{
"label": "Salvador Colon",
"value": "75000",
"sValue": "18"
},
{
"label": "Victor Ferguson",
"value": "60000",
"sValue": "10"
},
{
"label": "Marion Hernandez",
"value": "14500",
"sValue": "-18"
},
{
"label": "Javier Erickson",
"value": "18000",
"sValue": "-19"
},
{
"label": "Stephanie Matthews",
"value": "16500",
"sValue": "5"
},
{
"label": "Deanna Russell",
"value": "25500",
"sValue": "1"
},
{
"label": "Nettie Holt",
"value": "32500",
"sValue": "-10"
},
{
"label": "Lynne Mack",
"value": "50000",
"sValue": "8"
},
{
"label": "Carrie Stevens",
"value": "47000",
"sValue": "14"
},
{
"label": "Janyce Hildebrand",
"value": "29000",
"sValue": "-5"
},
{
"label": "Emery Underhill",
"value": "67000",
"sValue": "20"
},
{
"label": "Priscila Coy",
"value": "72000",
"sValue": "15"
},
{
"label": "Dede Moffett",
"value": "12500",
"sValue": "-15"
},
{
"label": "Sydney Merchant",
"value": "65500",
"sValue": "10"
},
{
"label": "Daryl Farrar",
"value": "65000",
"sValue": "5"
},
{
"label": "Nella Nickerson",
"value": "27000",
"sValue": "14"
},
{
"label": "Octavia Mccorkle",
"value": "17500",
"sValue": "-2"
},
{
"label": "Lynsey Boren",
"value": "22500",
"sValue": "5"
},
{
"label": "Argentina Ireland",
"value": "15500",
"sValue": "-8"
},
{
"label": "Tonda Ricks",
"value": "14500",
"sValue": "-10"
},
{
"label": "Shira Laporte",
"value": "25500",
"sValue": "-5"
},
{
"label": "Reuben Upshaw",
"value": "12000",
"sValue": "-15"
},
{
"label": "Angelia Mcalister",
"value": "23500",
"sValue": "15"
},
{
"label": "Ludivina Teel",
"value": "19000",
"sValue": "-10"
},
{
"label": "Darcel Scarbrough",
"value": "13000",
"sValue": "-20"
},
{
"label": "Chantelle Carl",
"value": "14000",
"sValue": "2"
},
{
"label": "Young Chestnut",
"value": "14500",
"sValue": "-7"
},
{
"label": "Janetta Gilman",
"value": "17000",
"sValue": "-8"
},
{
"label": "Otto Pfeifer",
"value": "29500",
"sValue": "10"
},
{
"label": "Queen Trudeau",
"value": "70000",
"sValue": "15"
},
{
"label": "Candie Vang",
"value": "17000",
"sValue": "-12"
},
{
"label": "Tia Burgos",
"value": "21000",
"sValue": "12"
},
{
"label": "Teresita Sprague",
"value": "46500",
"sValue": "18"
},
{
"label": "Tomoko Shull",
"value": "17000",
"sValue": "-4"
},
{
"label": "Yahaira Snider",
"value": "24500",
"sValue": "8"
},
{
"label": "Zina Espinoza",
"value": "51000",
"sValue": "5"
},
{
"label": "Jamal Crespo",
"value": "12000",
"sValue": "-20"
},
{
"label": "Ariel Jorgensen",
"value": "16000",
"sValue": "5"
},
{
"label": "Fredda Tuttle",
"value": "14000",
"sValue": "-10"
},
{
"label": "Gerardo Carter",
"value": "34500",
"sValue": "-16"
}
]
},
{
"label": "Western Region",
"value": "1830000",
"data": [
{
"label": "Sadie Wells",
"value": "30000",
"sValue": "-10"
},
{
"label": "Jacqueline Griffith",
"value": "45000",
"sValue": "2"
},
{
"label": "Malcolm Lee",
"value": "55000",
"sValue": "18"
},
{
"label": "Martin Hudson",
"value": "59000",
"sValue": "-15"
},
{
"label": "Carlos Hart",
"value": "64000",
"sValue": "18"
},
{
"label": "Alison Luna",
"value": "35000",
"sValue": "-20"
},
{
"label": "Pablo Paul",
"value": "72000",
"sValue": "20"
},
{
"label": "Arlene Fox",
"value": "33000",
"sValue": "-15"
},
{
"label": "Lillian Young",
"value": "39000",
"sValue": "-5"
},
{
"label": "Annie Ford",
"value": "66000",
"sValue": "10"
},
{
"label": "Manuel Delgado",
"value": "46000",
"sValue": "-5"
},
{
"label": "Arthur Pope",
"value": "28000",
"sValue": "-15"
},
{
"label": "Antonia Marshall",
"value": "24000",
"sValue": "-17"
},
{
"label": "Glen Alexander",
"value": "29000",
"sValue": "15"
},
{
"label": "Myrtle Bass",
"value": "40000",
"sValue": "10"
},
{
"label": "Garry Palmer",
"value": "27000",
"sValue": "-18"
},
{
"label": "Dianne Blair",
"value": "35000",
"sValue": "-1"
},
{
"label": "Melba Page",
"value": "36000",
"sValue": "5"
},
{
"label": "Darla Nelson",
"value": "60000",
"sValue": "14"
},
{
"label": "Winston Brewer",
"value": "43000",
"sValue": "17"
},
{
"label": "Drew Osborne",
"value": "21000",
"sValue": "-12"
},
{
"label": "Jesus Sullivan",
"value": "46000",
"sValue": "18"
},
{
"label": "Jeremiah Flowers",
"value": "15000",
"sValue": "-20"
},
{
"label": "Suzanne Richardson",
"value": "24000",
"sValue": "-15"
},
{
"label": "Nicholas Mathis",
"value": "71000",
"sValue": "20"
},
{
"label": "Della King",
"value": "28000",
"sValue": "-10"
},
{
"label": "Beth Boone",
"value": "40000",
"sValue": "15"
},
{
"label": "Ruben Powell",
"value": "35000",
"sValue": "6"
},
{
"label": "Marlon Harrington",
"value": "14000",
"sValue": "-7"
},
{
"label": "Sharice Kang",
"value": "25000",
"sValue": "-20"
},
{
"label": "Lizette Stout",
"value": "55000",
"sValue": "15"
},
{
"label": "Jimmy Cho",
"value": "41000",
"sValue": "10"
},
{
"label": "Weston Alcorn",
"value": "21000",
"sValue": "-5"
},
{
"label": "Omer Whitfield",
"value": "18000",
"sValue": "-10"
},
{
"label": "Delora Downs",
"value": "35000",
"sValue": "2"
},
{
"label": "Rea Booker",
"value": "22000",
"sValue": "12"
},
{
"label": "Jon Blue",
"value": "73000",
"sValue": "20"
},
{
"label": "Haley Cameron",
"value": "17000",
"sValue": "-15"
},
{
"label": "Jani Fortune",
"value": "23000",
"sValue": "-15"
},
{
"label": "Theressa Talbot",
"value": "26000",
"sValue": "8"
},
{
"label": "Tashia Crane",
"value": "38000",
"sValue": "-2"
},
{
"label": "Latonya Grey",
"value": "19000",
"sValue": "-20"
},
{
"label": "Lyndsey Song",
"value": "40000",
"sValue": "15"
},
{
"label": "Lan Bean",
"value": "48000",
"sValue": "5"
},
{
"label": "Ethelene Haas",
"value": "52000",
"sValue": "10"
},
{
"label": "Lauran Dunaway",
"value": "29000",
"sValue": "8"
},
{
"label": "Williams Hodge",
"value": "14000",
"sValue": "-18"
},
{
"label": "Elwanda Archuleta",
"value": "24000",
"sValue": "-5"
},
{
"label": "Florida Andersen",
"value": "30000",
"sValue": "5"
},
{
"label": "Scott Perry",
"value": "20000",
"sValue": "2"
}
]
}
]
}
],
"colorrange": {
"mapbypercent": "1",
"gradient": "1",
"minvalue": "-25",
"code": "e24b1a",
"startlabel": "Decline",
"endlabel": "Rise",
"color": [
{
"code": "ffffff",
"maxvalue": "0",
"label": "Static"
},
{
"code": "6da81e",
"maxvalue": "25",
"label": "AVERAGE"
}
]
}
}
<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: '550',
height: '350',
dataFormat: 'json',
dataSource: {
"chart": {
"animation": "0",
"hideTitle": "1",
"plotToolText": "<div><b>$label</b><br/> <b>Sale: </b>$$value<br/><b>Growth: </b>$svalue%</div>",
"horizontalPadding": "1",
"verticalPadding": "1",
"plotborderthickness": ".5",
"plotbordercolor": "666666",
"legendpadding": "0",
"legendItemFontSize": "10",
"legendItemFontBold": "1",
"showLegend": "1",
"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": "fint"
},
"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",
"value": "72000",
"sValue": "14"
}, {
"label": "Becky Barton",
"value": "18000",
"sValue": "-10"
}, {
"label": "Ben Rios",
"value": "14000",
"sValue": "-5"
}, {
"label": "Donnie Patton",
"value": "37000",
"sValue": "2"
}, {
"label": "Dana Freeman",
"value": "41000",
"sValue": "5"
}, {
"label": "Darren Barrett",
"value": "54000",
"sValue": "7"
}, {
"label": "Steve Vaughn",
"value": "35000",
"sValue": "12"
}, {
"label": "Roosevelt Rhodes",
"value": "48000",
"sValue": "15"
}, {
"label": "Moses Sparks",
"value": "38000",
"sValue": "-4"
}, {
"label": "Hope Cox",
"value": "32000",
"sValue": "-10"
}, {
"label": "Hector Lowe",
"value": "66000",
"sValue": "15"
}, {
"label": "Lori Christensen",
"value": "47000",
"sValue": "10"
}, {
"label": "Roman Aguilar",
"value": "14000",
"sValue": "-15"
}, {
"label": "Brittany Chandler",
"value": "21000",
"sValue": "-12"
}, {
"label": "Tiffaney Battle",
"value": "60000",
"sValue": "10"
}, {
"label": "Elin Stamps",
"value": "54000",
"sValue": "5"
}, {
"label": "Donnetta Coley",
"value": "59000",
"sValue": "+14"
}, {
"label": "Emmaline Halcomb",
"value": "34000",
"sValue": "-5"
}, {
"label": "Natosha Hammett",
"value": "39000",
"sValue": "-7"
}, {
"label": "Kimi Stegall",
"value": "15000",
"sValue": "-19"
}, {
"label": "Norberto Kirk",
"value": "46000",
"sValue": "2"
}, {
"label": "Noma Martindale",
"value": "52000",
"sValue": "12"
}, {
"label": "Coreen Numbers",
"value": "30000",
"sValue": "-1"
}, {
"label": "Chas Irvin",
"value": "26000",
"sValue": "-17"
}, {
"label": "Carlo Tobin",
"value": "31000",
"sValue": "-14"
}, {
"label": "Ayanna Mclain",
"value": "29000",
"sValue": "-5"
}, {
"label": "Rolland Turney",
"value": "42000",
"sValue": "+5"
}, {
"label": "Ona Roden",
"value": "64000",
"sValue": "+20"
}, {
"label": "Drew Clarkson",
"value": "24000",
"sValue": "-20"
}, {
"label": "Samuel Adler",
"value": "29000",
"sValue": "-15"
}, {
"label": "Adrian Steen",
"value": "51000",
"sValue": "2"
}, {
"label": "Xiao Batson",
"value": "35000",
"sValue": "-2"
}, {
"label": "Britney Hammonds",
"value": "45000",
"sValue": "3"
}, {
"label": "Roslyn Wilhelm",
"value": "28000",
"sValue": "-5"
}, {
"label": "Alva Puente",
"value": "26000",
"sValue": "-8"
}, {
"label": "Daina Horvath",
"value": "49000",
"sValue": "9"
}, {
"label": "Louie Chaney",
"value": "54000",
"sValue": "15"
}, {
"label": "Olympia Mcmullen",
"value": "71000",
"sValue": "14"
}, {
"label": "Nichol Leclair",
"value": "38000",
"sValue": "-10"
}, {
"label": "Marylou Messenger",
"value": "41000",
"sValue": "5"
}, {
"label": "Christoper Crowley",
"value": "34000",
"sValue": "-4"
}, {
"label": "Neville Venable",
"value": "37000",
"sValue": "-10"
}, {
"label": "Brock Rowell",
"value": "35000",
"sValue": "-4"
}, {
"label": "Gisele Pelletier",
"value": "32000",
"sValue": "-5"
}, {
"label": "Thelma Caldwell",
"value": "35000",
"sValue": "5"
}, {
"label": "Shyla Plunkett",
"value": "84000",
"sValue": "15"
}, {
"label": "Joie Dickson",
"value": "60000",
"sValue": "10"
}, {
"label": "Shana Nabors",
"value": "50000",
"sValue": "11"
}, {
"label": "Catina Burris",
"value": "58000",
"sValue": "5"
}, {
"label": "Man Spearman",
"value": "36000",
"sValue": "-5"
}, {
"label": "Shaunna Hamby",
"value": "72000",
"sValue": "14"
}, {
"label": "Stormy Read",
"value": "18000",
"sValue": "-10"
}, {
"label": "Wen Coe",
"value": "14000",
"sValue": "-5"
}, {
"label": "Elizebeth Poston",
"value": "37000",
"sValue": "2"
}, {
"label": "Breanna Stringer",
"value": "41000",
"sValue": "5"
}, {
"label": "Allyn Holly",
"value": "54000",
"sValue": "7"
}, {
"label": "Lera Gaylord",
"value": "35000",
"sValue": "12"
}, {
"label": "Lashunda Dowd",
"value": "48000",
"sValue": "15"
}, {
"label": "Kiesha Tyner",
"value": "38000",
"sValue": "-4"
}, {
"label": "Lamont Allman",
"value": "32000",
"sValue": "-10"
}, {
"label": "Sun Switzer",
"value": "66000",
"sValue": "15"
}, {
"label": "Dorene Small",
"value": "47000",
"sValue": "10"
}, {
"label": "Cherlyn Bozeman",
"value": "14000",
"sValue": "-15"
}, {
"label": "Stephani Contreras",
"value": "21000",
"sValue": "-12"
}, {
"label": "Bebe Holcomb",
"value": "60000",
"sValue": "10"
}, {
"label": "Shenika Barham",
"value": "54000",
"sValue": "5"
}, {
"label": "Troy Hobbs",
"value": "59000",
"sValue": "+14"
}, {
"label": "Thomas Tom",
"value": "34000",
"sValue": "-5"
}, {
"label": "Sunshine Libby",
"value": "39000",
"sValue": "-7"
}, {
"label": "Tambra Patten",
"value": "15000",
"sValue": "-19"
}, {
"label": "Marlyn Cato",
"value": "46000",
"sValue": "2"
}, {
"label": "Jeanelle Ham",
"value": "52000",
"sValue": "12"
}, {
"label": "Armanda Kimble",
"value": "30000",
"sValue": "-1"
}, {
"label": "Danna Fitzpatrick",
"value": "26000",
"sValue": "-17"
}, {
"label": "Elmira Nagle",
"value": "31000",
"sValue": "-14"
}, {
"label": "Bella Marx",
"value": "29000",
"sValue": "-5"
}, {
"label": "Vania Meeks",
"value": "42000",
"sValue": "+5"
}, {
"label": "Florencio Heffner",
"value": "64000",
"sValue": "+20"
}, {
"label": "Amie Peoples",
"value": "24000",
"sValue": "-20"
}, {
"label": "Chrystal Downs",
"value": "29000",
"sValue": "-15"
}, {
"label": "Glennis Chisholm",
"value": "51000",
"sValue": "2"
}, {
"label": "Sydney Castaneda",
"value": "35000",
"sValue": "-2"
}, {
"label": "Gregory Drummond",
"value": "45000",
"sValue": "3"
}, {
"label": "Birdie Neely",
"value": "28000",
"sValue": "-5"
}, {
"label": "Ciera Mcafee",
"value": "26000",
"sValue": "-8"
}, {
"label": "Martin Larose",
"value": "49000",
"sValue": "9"
}, {
"label": "Bobette Dutton",
"value": "54000",
"sValue": "15"
}, {
"label": "Numbers Yarbrough",
"value": "71000",
"sValue": "14"
}, {
"label": "Sanjuanita Croteau",
"value": "38000",
"sValue": "-10"
}, {
"label": "Alysha Aguirre",
"value": "41000",
"sValue": "5"
}, {
"label": "Beau Welker",
"value": "34000",
"sValue": "-4"
}, {
"label": "Yuri Brannon",
"value": "37000",
"sValue": "-10"
}, {
"label": "Breana Marion",
"value": "35000",
"sValue": "-4"
}, {
"label": "Bernardina Fennell",
"value": "32000",
"sValue": "-5"
}, {
"label": "Bridgette Gould",
"value": "35000",
"sValue": "5"
}]
}, {
"label": "Eastern Region",
"value": "1110000",
"data": [{
"label": "Lee Miles",
"value": "18000",
"sValue": "-5"
}, {
"label": "Eduardo Day",
"value": "21000",
"sValue": "5"
}, {
"label": "Darrell Schultz",
"value": "29500",
"sValue": "10"
}, {
"label": "Troy Patrick",
"value": "25500",
"sValue": "12"
}, {
"label": "Kerry Smith",
"value": "30000",
"sValue": "15"
}, {
"label": "Franklin Walker",
"value": "18500",
"sValue": "-5"
}, {
"label": "Toby Brady",
"value": "28500",
"sValue": "-2"
}, {
"label": "Kenneth Wilkerson",
"value": "25000",
"sValue": "5"
}, {
"label": "Ralph Goodman",
"value": "36000",
"sValue": "10"
}, {
"label": "Lela Glover",
"value": "15500",
"sValue": "-14"
}, {
"label": "Warren Gordon",
"value": "25500",
"sValue": "-10"
}, {
"label": "Gladys Ruiz",
"value": "33000",
"sValue": "15"
}, {
"label": "Mabel Norris",
"value": "14000",
"sValue": "-5"
}, {
"label": "Darrel Rodgers",
"value": "17500",
"sValue": "-15"
}, {
"label": "Barry Larson",
"value": "20000",
"sValue": "2"
}, {
"label": "Alma Houston",
"value": "31000",
"sValue": "-3"
}, {
"label": "Rochelle Burke",
"value": "12500",
"sValue": "5"
}, {
"label": "Orville Garza",
"value": "34500",
"sValue": "-7"
}, {
"label": "Rex Nichols",
"value": "14500",
"sValue": "-10"
}, {
"label": "Jenna Burton",
"value": "18500",
"sValue": "8"
}, {
"label": "Jordan Little",
"value": "21000",
"sValue": "3"
}, {
"label": "Rodolfo Dawson",
"value": "28500",
"sValue": "10"
}, {
"label": "Darryl Bowen",
"value": "15500",
"sValue": "-10"
}, {
"label": "Marsha Foster",
"value": "12500",
"sValue": "-18"
}, {
"label": "Sandra Curtis",
"value": "32000",
"sValue": "19"
}, {
"label": "Alexis Robinson",
"value": "19500",
"sValue": "-4"
}, {
"label": "Courtney Stokes",
"value": "27500",
"sValue": "10"
}, {
"label": "Kelli Miller",
"value": "34500",
"sValue": "14"
}, {
"label": "Cathy Davis",
"value": "14500",
"sValue": "-16"
}, {
"label": "Gaynell Mcafee",
"value": "14000",
"sValue": "-5"
}, {
"label": "Trinidad Iverson",
"value": "24500",
"sValue": "5"
}, {
"label": "Anjelica Kilpatrick",
"value": "27000",
"sValue": "15"
}, {
"label": "Cheryle Hearn",
"value": "17500",
"sValue": "-10"
}, {
"label": "Rosamond Gass",
"value": "21000",
"sValue": "5"
}, {
"label": "Katharine Perrin",
"value": "12500",
"sValue": "-20"
}, {
"label": "Heide Matteson",
"value": "32000",
"sValue": "20"
}, {
"label": "Amparo Fortin",
"value": "25500",
"sValue": "10"
}, {
"label": "Charlena Bills",
"value": "19500",
"sValue": "-2"
}, {
"label": "Ronna Irizarry",
"value": "30000",
"sValue": "15"
}, {
"label": "Fidelia Hummel",
"value": "28000",
"sValue": "5"
}, {
"label": "Darlena Maher",
"value": "14500",
"sValue": "-7"
}, {
"label": "Isa Browning",
"value": "17000",
"sValue": "-10"
}, {
"label": "Dalene Baron",
"value": "22500",
"sValue": "10"
}, {
"label": "Ghislaine Loy",
"value": "12000",
"sValue": "-18"
}, {
"label": "Alexander Eldridge",
"value": "18500",
"sValue": "-2"
}, {
"label": "Brett Clemmons",
"value": "13000",
"sValue": "-15"
}, {
"label": "Mellie Hackney",
"value": "13000",
"sValue": "-18"
}, {
"label": "Gerry Felder",
"value": "35500",
"sValue": "15"
}, {
"label": "Librada Creighton",
"value": "17500",
"sValue": "-7"
}, {
"label": "Florence Pierce",
"value": "21000",
"sValue": "5"
}]
}, {
"label": "Southern Region",
"value": "1555000",
"data": [{
"label": "Derek Sandoval",
"value": "12000",
"sValue": "-15"
}, {
"label": "Bertha Bishop",
"value": "55000",
"sValue": "10"
}, {
"label": "Dominick Price",
"value": "24500",
"sValue": "10"
}, {
"label": "Sylvia Rodriquez",
"value": "15000",
"sValue": "-2"
}, {
"label": "Leland Jennings",
"value": "63000",
"sValue": "-5"
}, {
"label": "Dean Collins",
"value": "56000",
"sValue": "3"
}, {
"label": "Jamie Cohen",
"value": "19500",
"sValue": "4"
}, {
"label": "Elias Hammond",
"value": "29500",
"sValue": "12"
}, {
"label": "Kristy Stone",
"value": "24500",
"sValue": "5"
}, {
"label": "Jeanette Wood",
"value": "17500",
"sValue": "-10"
}, {
"label": "Salvador Colon",
"value": "75000",
"sValue": "18"
}, {
"label": "Victor Ferguson",
"value": "60000",
"sValue": "10"
}, {
"label": "Marion Hernandez",
"value": "14500",
"sValue": "-18"
}, {
"label": "Javier Erickson",
"value": "18000",
"sValue": "-19"
}, {
"label": "Stephanie Matthews",
"value": "16500",
"sValue": "5"
}, {
"label": "Deanna Russell",
"value": "25500",
"sValue": "1"
}, {
"label": "Nettie Holt",
"value": "32500",
"sValue": "-10"
}, {
"label": "Lynne Mack",
"value": "50000",
"sValue": "8"
}, {
"label": "Carrie Stevens",
"value": "47000",
"sValue": "14"
}, {
"label": "Janyce Hildebrand",
"value": "29000",
"sValue": "-5"
}, {
"label": "Emery Underhill",
"value": "67000",
"sValue": "20"
}, {
"label": "Priscila Coy",
"value": "72000",
"sValue": "15"
}, {
"label": "Dede Moffett",
"value": "12500",
"sValue": "-15"
}, {
"label": "Sydney Merchant",
"value": "65500",
"sValue": "10"
}, {
"label": "Daryl Farrar",
"value": "65000",
"sValue": "5"
}, {
"label": "Nella Nickerson",
"value": "27000",
"sValue": "14"
}, {
"label": "Octavia Mccorkle",
"value": "17500",
"sValue": "-2"
}, {
"label": "Lynsey Boren",
"value": "22500",
"sValue": "5"
}, {
"label": "Argentina Ireland",
"value": "15500",
"sValue": "-8"
}, {
"label": "Tonda Ricks",
"value": "14500",
"sValue": "-10"
}, {
"label": "Shira Laporte",
"value": "25500",
"sValue": "-5"
}, {
"label": "Reuben Upshaw",
"value": "12000",
"sValue": "-15"
}, {
"label": "Angelia Mcalister",
"value": "23500",
"sValue": "15"
}, {
"label": "Ludivina Teel",
"value": "19000",
"sValue": "-10"
}, {
"label": "Darcel Scarbrough",
"value": "13000",
"sValue": "-20"
}, {
"label": "Chantelle Carl",
"value": "14000",
"sValue": "2"
}, {
"label": "Young Chestnut",
"value": "14500",
"sValue": "-7"
}, {
"label": "Janetta Gilman",
"value": "17000",
"sValue": "-8"
}, {
"label": "Otto Pfeifer",
"value": "29500",
"sValue": "10"
}, {
"label": "Queen Trudeau",
"value": "70000",
"sValue": "15"
}, {
"label": "Candie Vang",
"value": "17000",
"sValue": "-12"
}, {
"label": "Tia Burgos",
"value": "21000",
"sValue": "12"
}, {
"label": "Teresita Sprague",
"value": "46500",
"sValue": "18"
}, {
"label": "Tomoko Shull",
"value": "17000",
"sValue": "-4"
}, {
"label": "Yahaira Snider",
"value": "24500",
"sValue": "8"
}, {
"label": "Zina Espinoza",
"value": "51000",
"sValue": "5"
}, {
"label": "Jamal Crespo",
"value": "12000",
"sValue": "-20"
}, {
"label": "Ariel Jorgensen",
"value": "16000",
"sValue": "5"
}, {
"label": "Fredda Tuttle",
"value": "14000",
"sValue": "-10"
}, {
"label": "Gerardo Carter",
"value": "34500",
"sValue": "-16"
}]
}, {
"label": "Western Region",
"value": "1830000",
"data": [{
"label": "Sadie Wells",
"value": "30000",
"sValue": "-10"
}, {
"label": "Jacqueline Griffith",
"value": "45000",
"sValue": "2"
}, {
"label": "Malcolm Lee",
"value": "55000",
"sValue": "18"
}, {
"label": "Martin Hudson",
"value": "59000",
"sValue": "-15"
}, {
"label": "Carlos Hart",
"value": "64000",
"sValue": "18"
}, {
"label": "Alison Luna",
"value": "35000",
"sValue": "-20"
}, {
"label": "Pablo Paul",
"value": "72000",
"sValue": "20"
}, {
"label": "Arlene Fox",
"value": "33000",
"sValue": "-15"
}, {
"label": "Lillian Young",
"value": "39000",
"sValue": "-5"
}, {
"label": "Annie Ford",
"value": "66000",
"sValue": "10"
}, {
"label": "Manuel Delgado",
"value": "46000",
"sValue": "-5"
}, {
"label": "Arthur Pope",
"value": "28000",
"sValue": "-15"
}, {
"label": "Antonia Marshall",
"value": "24000",
"sValue": "-17"
}, {
"label": "Glen Alexander",
"value": "29000",
"sValue": "15"
}, {
"label": "Myrtle Bass",
"value": "40000",
"sValue": "10"
}, {
"label": "Garry Palmer",
"value": "27000",
"sValue": "-18"
}, {
"label": "Dianne Blair",
"value": "35000",
"sValue": "-1"
}, {
"label": "Melba Page",
"value": "36000",
"sValue": "5"
}, {
"label": "Darla Nelson",
"value": "60000",
"sValue": "14"
}, {
"label": "Winston Brewer",
"value": "43000",
"sValue": "17"
}, {
"label": "Drew Osborne",
"value": "21000",
"sValue": "-12"
}, {
"label": "Jesus Sullivan",
"value": "46000",
"sValue": "18"
}, {
"label": "Jeremiah Flowers",
"value": "15000",
"sValue": "-20"
}, {
"label": "Suzanne Richardson",
"value": "24000",
"sValue": "-15"
}, {
"label": "Nicholas Mathis",
"value": "71000",
"sValue": "20"
}, {
"label": "Della King",
"value": "28000",
"sValue": "-10"
}, {
"label": "Beth Boone",
"value": "40000",
"sValue": "15"
}, {
"label": "Ruben Powell",
"value": "35000",
"sValue": "6"
}, {
"label": "Marlon Harrington",
"value": "14000",
"sValue": "-7"
}, {
"label": "Sharice Kang",
"value": "25000",
"sValue": "-20"
}, {
"label": "Lizette Stout",
"value": "55000",
"sValue": "15"
}, {
"label": "Jimmy Cho",
"value": "41000",
"sValue": "10"
}, {
"label": "Weston Alcorn",
"value": "21000",
"sValue": "-5"
}, {
"label": "Omer Whitfield",
"value": "18000",
"sValue": "-10"
}, {
"label": "Delora Downs",
"value": "35000",
"sValue": "2"
}, {
"label": "Rea Booker",
"value": "22000",
"sValue": "12"
}, {
"label": "Jon Blue",
"value": "73000",
"sValue": "20"
}, {
"label": "Haley Cameron",
"value": "17000",
"sValue": "-15"
}, {
"label": "Jani Fortune",
"value": "23000",
"sValue": "-15"
}, {
"label": "Theressa Talbot",
"value": "26000",
"sValue": "8"
}, {
"label": "Tashia Crane",
"value": "38000",
"sValue": "-2"
}, {
"label": "Latonya Grey",
"value": "19000",
"sValue": "-20"
}, {
"label": "Lyndsey Song",
"value": "40000",
"sValue": "15"
}, {
"label": "Lan Bean",
"value": "48000",
"sValue": "5"
}, {
"label": "Ethelene Haas",
"value": "52000",
"sValue": "10"
}, {
"label": "Lauran Dunaway",
"value": "29000",
"sValue": "8"
}, {
"label": "Williams Hodge",
"value": "14000",
"sValue": "-18"
}, {
"label": "Elwanda Archuleta",
"value": "24000",
"sValue": "-5"
}, {
"label": "Florida Andersen",
"value": "30000",
"sValue": "5"
}, {
"label": "Scott Perry",
"value": "20000",
"sValue": "2"
}]
}]
}],
"colorrange": {
"mapbypercent": "1",
"gradient": "1",
"minvalue": "-25",
"code": "e24b1a",
"startlabel": "Decline",
"endlabel": "Rise",
"color": [{
"code": "ffffff",
"maxvalue": "0",
"label": "Static"
}, {
"code": "6da81e",
"maxvalue": "25",
"label": "AVERAGE"
}]
}
}
});
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>
To drill-down to a leaf node, the user can directly click on that node. For example, when any rectangle (node) in the Northern Region is clicked, the chart view changes to what is shown in the image below:
Now, to go back one level up, the user can either click Northern Region in the header of this view or the (Back to Parent) button from the top-right corner of the chart.
To go directly back to the initial stage, the user can click (Back to Top) from the top-right corner of the chart. The resultant view is the initial stage of the chart.