Creating a Simple Treemap
A treemap is useful when hierarchical information has to be analyzed. A treemap is created using 2D nested rectangles, which can be compared to gain insights from hierarchical information.
In order to render treemap chart, include fusioncharts.treemap.js in the project folder with rest of the .js files as mentioned here.
A simple treemap is shown below:
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>
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.
Brief Explanation of the Data Structure
Given below is a brief explanation of the data structure shown above:
Attribute Name | Description |
---|---|
|
Type of chart to render. To render a treemap, the value for this attribute will be |
|
Container object within which the chart will be rendered |
|
Width of the chart, in pixels |
|
Height of the chart, in pixels |
|
Format in which data that will passed to the chart object. This attribute takes two four values: |
|
Source from where chart data will be fetched, depending on the value passed to the |
|
Chart caption |
|
Chart sub-caption |
|
Label for a data item. The label is rendered within its corresponding rectangle. |
|
Value for a data item |
|
Secondary value for a data item |
Rendering the Legend in the Treemap
A treemap can be rendered with the gradient legend.
A gradient legend is a pane of blended colors derived from the colorRange
definitions. A linear scale is drawn with two drag-able pointers. Each color defined for a numeric range blends with the next color, thus forming a gradient strip. Each point on the gradient scale represents a unique color and value. So, all different values in the chart will appear in unique colors as per their position on the gradient scale.
A simple gradient legend looks as shown in the image below:
Given below is a brief description of the attributes used to render the treemap with a gradient legend:
Attribute Name | Description |
---|---|
|
Set this attribute to |
|
Set this attribute to |
|
Sets the label for the lower limit on the gradient legend scale. This attribute belongs to the |
|
Sets the label for the upper limit on the gradient legend scale. This attribute belongs to the |
The |
Child object of the |
|
Sets the hex color code for a color range on the gradient legend scale. This attribute belongs to the |
|
Sets the upper limit for a color range on the gradient legend scale. The limit is inclusive of the value assigned to this attribute. This attribute belongs to the |
|
Sets the label for a color range on the gradient legend scale. The label is rendered within the tooltip text for all nodes that fall under this color range. This attribute belongs to the |
The value assigned to the sValue
attribute in the chart data is used to assign color to a data plot based on which numeric range it falls in.
Showing/Hiding Data Values Using the Gradient Legend
The gradient legend is interactive and allows filtering of nodes within a specific range of values. Drag the scale pointers to set the required lower and upper limit.
The sample treemap with the gradient legend set to show only those nodes that have values (assigned to the sValue
attribute) between -10 and 10 is shown in the image below. Notice that the nodes that don’t fall in this bracket have been grayed out.
Click here for the complete list of attributes supported by the treemap.