Treemap
This chart type belongs to PowerCharts XT.
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 and their relations with each other.
A simple treemap will look like as 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>",
"spacex": "0",
"spacey": "0",
"horizontalPadding": "1",
"verticalPadding": "1",
"hoveronallsiblingleaves": "1",
"plotborderthickness": ".5",
"plotbordercolor": "666666",
"legendpadding": "0",
"legendItemFontSize": "10",
"legendItemFontBold": "1",
"showLegend": "1",
"legendPointerWidth": "8",
"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": "fusion"
},
"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="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts({
type: 'treemap',
renderAt: 'chart-container',
width: '700',
height: '400',
dataFormat: 'json',
dataSource: {
"chart": {
"animation": "0",
"hideTitle": "1",
"plotToolText": "<div><b>$label</b><br/> <b>Sale: </b>$$value<br/><b>Growth: </b>$svalue%</div>",
"spacex": "0",
"spacey": "0",
"horizontalPadding": "1",
"verticalPadding": "1",
"hoveronallsiblingleaves": "1",
"plotborderthickness": ".5",
"plotbordercolor": "666666",
"legendpadding": "0",
"legendItemFontSize": "10",
"legendItemFontBold": "1",
"showLegend": "1",
"legendPointerWidth": "8",
"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": "fusion"
},
"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>
Click here to edit the above chart.
Click the rectangles in the treemap shown above and see how you can traverse through the leaf nodes.
Applications of a treemap
Use a treemap to display hierarchical information presented using a tree structure. You can, for instance, use a treemap to show the folder structure of a system. You can also use it to study patterns and occurrences in a large dataset since the color, and the size dimensions are correlated.
Visualization of a treemap
In the image given below, you can see how an information tree is translated to the treemap:
How to build a good treemap
Structure the data so that it has only one root element.
Represent a dimension, a trend, or a deviation from a key value with the color of a rectangle.
Represent the innermost rectangle as the leaf node. The area of this rectangle is always proportional to the data value assigned to that leaf.
Avoid nesting nodes that are not leaves. The areas of these rectangles are less significant.
To build an ideal treemap, maintain the aspect ratio as 1.
The treemap should utilize maximum space on the screen. If you manage the available space efficiently, you can plot thousands of items in a treemap.
Important concepts related to the treemap
Tiling
Tiling is the process, by which a treemap divides 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 tree.
These properties have an inverse relationship, though. You need to choose between optimizing the order of placement and the aspect ratio. When you optimize the aspect ratio, the order of placement becomes less predictable. On the other hand, if you stabilize the order of placement, the aspect ratio degrades. Therefore, you can categorize tiling algorithms like the ones 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 significant constraints in a treemap chart. If the aspect ratio is high, the treemap has thin rectangles, which are extremely difficult to compare. In the ideal case, where the treemap aspect ratio is expected to be 1, the nested rectangles are squares that are much easier to compare, at a glance.
The aspect ratio is never exactly 1 in real-life use-cases, but there are algorithms that try to keep it to 1, by trading off the order.
In the table below, you can see the commonly used algorithms, as well as the trade-offs that you must make when using them:
Algorithm | Order | Aspect Ratio | |
---|---|---|---|
Slice and dice | Ordered | Very high | |
Squarified | Unordered | Lowest |
Other algorithms that you can use 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.
Interact with a Treemap
Interaction Model (as-is)
The basic interaction model for the treemap includes the following:
Left-click: When you left-click a rectangle on the treemap, 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 you right-click a rectangle on the treemap, 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 you hover the mouse pointer over a rectangle on the treemap, the complete subtree that belongs to that node is highlighted.
Legend: You can incorporate an optional gradient legend in a treemap to filter the nodes.
FusionCharts treemap interaction model
FusionCharts implements the following model for interacting with a treemap:
The initial stage
To drill-down to a leaf node, click directly on that node. For example, click on any node in the Northern Region to change the chart view.
Then, to go back one level up, click on Northern Region in the header of the view, or the Back to Parent button on the top-right corner of the chart. You can also go directly back to the initial stage. To do so, click the Back to Top button on the top-right corner of the chart.
Create a simple treemap
A treemap is useful when you need to analyze hierarchical information. You can compare the 2D nested rectangles of a treemap to quickly gain insights from the data. To render a treemap chart, include fusioncharts.treemap.js in the project folder with rest of the .js files as mentioned here .
Use the following attributes to build a simple treemap:
Use the
type
attribute to set the chart type astreemap
.Use the
renderAt
attribute to specify the container object, within which the chart will be rendered.Use the
width
attribute to set the width of the chart, in pixels.Use the
height
attribute to set the height of the chart, in pixels.Use the
dataFormat
attribute to set the format, in which data will be passed to thechart
object. Note that this attribute can accept anyone among two different sets of values - eitherjson
(JSON data to render the chart is passed to thedataSource
attribute) andjsonurl
(the relative path to a .json file is passed to thedataSource
attribute) orxml
andxmlurl
.Use the
dataSource
attribute to specify the source from which the chart will fetch data, depending on the value passed to thedataFormat
attribute.Use the
caption
attribute, to specify the chart caption.Use the
subCaption
attribute, to specify the chart sub-caption.Use the
label
attribute to specify the label for a data item. The value of this attribute is rendered within the rectangle for the particular item.Use the
value
attribute to set the area of the rectangle (node) for a particular data item.Use the
sValue
attribute to specify the secondary value for a data item. This value is used to set the color (based on the color range defined using thecolorRange
object) of the rectangle (node).
The Treemap will look like as 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>",
"spacex": "0",
"spacey": "0",
"horizontalPadding": "1",
"verticalPadding": "1",
"hoveronallsiblingleaves": "1",
"plotborderthickness": ".5",
"plotbordercolor": "666666",
"legendpadding": "0",
"legendItemFontSize": "10",
"legendItemFontBold": "1",
"showLegend": "1",
"legendPointerWidth": "8",
"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": "zune"
},
"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="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></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>",
"spacex": "0",
"spacey": "0",
"horizontalPadding": "1",
"verticalPadding": "1",
"hoveronallsiblingleaves": "1",
"plotborderthickness": ".5",
"plotbordercolor": "666666",
"legendpadding": "0",
"legendItemFontSize": "10",
"legendItemFontBold": "1",
"showLegend": "1",
"legendPointerWidth": "8",
"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": "zune"
},
"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>
Click here to edit the above chart.
The treemap shown above compares the sales team's performance in the present year with their performance in the previous year. Click on a rectangle to replace the node with the current root node. For example, click on any rectangle (node) in the Northern Region to change the chart view as shown in the image below:
Render a gradient legend
You can have a treemap rendered with the gradient legend, which is a pane of blended colors derived from the colorRange
definitions. You can have the linear scale drawn with a pair of draggable pointers. That way, each color you define for a numeric range will blend into the next color at its end point, forming a gradient strip. Each point on the gradient scale will represent a unique color and value. As such, all different values in the chart will appear in unique colors as per their positions on the gradient scale.
Use the following attributes to render a treemap with a gradient legend:
Set the value of the
showLegend
attribute to1
, to display the legend.Set the value of the
gradient
attribute to1
, to display the gradient legend. Note that to render a gradient legend, you have to set the values of both theshowLegend
and thegradient
attributes to1
.Set the value of the
startLabel
attribute to the lower limit on the gradient legend scale.Set the value of the
endLabel
attribute to the upper limit on the gradient legend scale.
Apart from the attributes detailed above, you also need to set the values of 3 other attributes (detailed below) under the color
object, which defines color ranges for the gradient legend scale.
Set the value of the
code
attribute to the hex color code for a color range on the gradient legend scale.Set the value of the
maxValue
attribute to the upper limit for a color range on the gradient legend scale. Note that this limit is inclusive of the value you assign to this attribute.Set the value of the
label
attribute to the label contents for a color range on the gradient legend scale. Note that the value will be rendered within the tooltip text for all nodes that fall under this color range.
Refer to the code below:
{
"chart": {
...
},
"data": [{
...
}],
"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"
}]
}
}
The value you assign to the
sValue
attribute in the chart data will be used to assign a color to a data plot, based on the numeric range it falls within.
The gradient legend will look like as shown in the image below:
Show/hide data values using the gradient legend
You can use the interactive gradient legend to filter nodes within a specific range of values. Drag the scale pointers to set the required lower and upper limits.
A 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 are all grayed out.
Click here for the complete list of attributes supported by the treemap.
Set 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 1, 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 algorithms:
Use the squarified algorithm
The squarified algorithm for the treemap is visually appealing, in part because the nodes are close to square
shapes, but it comes at the cost of unordered nodes. You might, however, prefer the squarified algorithm over slice and dice algorithm because of the low aspect ratio
, which means you can easily compare the sub-nodes.
Set the value of the algorithm
attribute to squarified
, to use the latter as the tiling algorithm.
Refer to the code below:
{
"chart": {
"algorithm": "squarified"
}
}
The chart will look like as shown below:
Click here to edit the above chart.
Use the slice and dice algorithm
In a treemap, the slice and dice tiling algorithm is one of the simplest algorithms and offers excellent stability, while preserving the ordering of data. The trade-off, however, lies in its high aspect ratio, resulting in the treemap being drawn as thin rectangles, which are difficult to compare.
Still, if you want to use this algorithm, use the following attributes to do so. Note that you can use this algorithm in 3 different modes.
Set the value of the
algorithm
attribute tosliceanddice
.Set the value of the attribute
slicingMode
to the mode you want to use for the chart:vertical
: In this mode, all the nodes in the nth level are sliced vertically, and the ones in the n+1 th level are sliced horizontally, beginning at level 1.horizontal
: In this mode, all the nodes in the nth level are sliced horizontally and the ones in the n+1 th level are sliced vertically, beginning at level 1.alternate
: In this mode, rectangles are sliced alternatively in the same level.
Find an example of each slicing mode, given below:
Vertical Mode
In the chart given below, you can see the nodes of the manufacturers (say Toyota Group, BMW Group) are sliced vertically, but their child nodes are sliced horizontally.
Refer to the code below:
{
"chart": {
"algorithm": "sliceanddice",
"slicingmode": "vertical"
}
}
The chart looks like as shown below:
Click here to edit the above chart.
In the chart given above, you can compare the performances of top selling car manufacturers in Europe in the present year with that in the previous year. Click the rectangles to traverse through the chart and see how the chart view changes.
Horizontal Mode
To set slicing mode to horizontal
, refer to the code below:
{
"chart": {
"algorithm": "sliceanddice",
"slicingmode": "horizontal"
}
}
The chart looks like as shown below:
Click here to edit the above chart.
Alternate Mode
When you set slicing mode to alternate
, refer to the code below:
{
"chart": {
"algorithm": "sliceanddice",
"slicingmode": "alternate"
}
}
The chart looks like as shown below:
Click here to edit the above chart.
Click here for the complete list of attributes supported by the treemap.
Configure the Treemap
Using FusionCharts Suite XT, you can configure the functionality of your treemap. There are various ways in which you can customize your treemap. For instance, you can:
Set the tiling algorithm (decide how the chart will be divided into nodes).
Enable/disable the use of a navigation bar to traverse through the chart.
Set custom colors for the nodes.
Customize all the texts in the chart canvas.
Customize data labels separately.
Set glowing effects, and so on.
Render navigation bar with traversal path
In a treemap, the navigation bar displays a traversal path, which you can use to return to any of the traversed parents, simply by clicking on it.
Set the value of the showNavigationBar
attribute to 1
, to show a navigation bar on a treemap. The bar can show the traversed path and provide the ability to switch to any traversed parent in a click. Otherwise, it can also provide the ability to return to a previous toolbar (which you can only use to go back one step) or to the root level.
Refer to the code below:
{
"chart": {
"showNavigationBar": "1"
}
}
The chart will look as shown below:
Click here to edit the above chart.
The treemap above shows the global population by continent as of 2015 with their literacy rate.
When you click on a child node, the clicked node and its subtree will replace the current root node. For example, when you click on any node under Southeast Asia Region, the chart view will change to what is shown in the image below. Observe that all the parent nodes are visible in the navigation bar and you can switch to any of them directly by clicking on them.
Color the treemap data plots
In a data-driven treemap, you can use color ranges to define colors for data plots, based on their values. For a treemap, you can define data plot colors:
Automatically, depending on the data value, using the
colorRange
object.Manually, using the
fillColor
attribute.
Refer to the code below:
{
"chart": {
...
},
"data": [{
"label": "Top Selling Brands",
"fillcolor": "595f5d",
"value": "5800",
"data": [{
"label": "Samsung",
"fillcolor": "838986",
"value": "2217",
"data": [{
...
}]
}]
}],
"colorrange": {
...
"color": [{
...
}]
}
}
The treemap will look like as shown in the image below:
Click here to edit the above chart.
The data plot color in the sample treemap used so far has been assigned using the
colorRange
object. UsecolorRange
object to define the numeric ranges for the gradient legend. Then you can assign a color to a data plot, based on where the value of thesValue
attribute falls within the numeric range.
Customize individual data plots
Use the following attributes to customize individual data plots:
Set the hex code for the color to be used for the data plot, using the
fillColor
attribute.Set the hex code for the color to be used for the data plot label, using the
fontColor
attribute.
Customize the font color for individual data plots. Other customizations like the font family or the font size are unavailable at the individual data plot level.
Refer to the code below:
{
"chart": {
...
},
"data": [{
"label": "Top Selling Brands",
"fillcolor": "595f5d",
"value": "5800",
"data": [{
"label": "Samsung",
"fillcolor": "838986",
"value": "2217",
"data": [{
"label": "Galaxy Note 4",
"value": "519",
"sValue": "1.09",
"fillColor": "1b7ac7"
}{
...
}]
}]
}],
"colorrange": {
...
"color": [{
...
}]
}
}
The chart will look as shown below:
Click here to edit the above chart.
Customize chart text
Use the following attributes to customize all text within the chart canvas, including all the captions and sub-captions:
Set the font family for the text using the
baseFont
attribute.Set the font size for the text using the
baseFontSize
attribute.Set the hex code of the color for the text using the
baseFontColor
attribute.
The base font attributes affect all text on the chart, including all the captions and sub-captions.
Refer to the code below:
{
"chart": {
"baseFont": "Arial",
"baseFontSize": "11",
"baseFontColor": "59605e"
}
}
The chart will look as shown below:
Click here to edit the above chart.
Customize data labels
Use the following attributes to customize only the data labels in the chart:
Set the font family for the label text using the
labelFont
attribute.Set the font size for the label text using the
labelFontSize
attribute.Set the hex code for the label text color using the
labelFontColor
attribute.Display the label text in bold formatting, by setting the value of the
labelFontBold
attribute to1
.Display the label text in italic formatting, by setting the value of the
labelFontItalic
attribute to1
.
The label font attributes affect only the data labels on the chart.
Refer to the code below:
{
"chart": {
"labelFont": "Arial",
"labelFontSize": "12",
"labelFontColor": "ff0000",
"labelFontBold": "1",
"labelFontItalic": "1"
}
}
The chart will look as shown below:
Click here to edit the above chart.
Apply a glow effect to data labels
You can apply a background color different from the label font color to data labels, generating a glow effect. This is useful when the data label font color and the rectangle fill color are either same or similar, which can happen when the chart is rendered with a gradient legend.
Use the following attributes to customize the glow effect for data labels:
Set the value of the
labelGlow
attribute to1
, to enable the glow effect.Set the intensity of the glow effect, using the
labelGlowIntensity
attribute.Set the hex code for the glow effect color, using the
labelGlowColor
attribute.Set the radius for applying the glow effect around the label, using the
labelGlowRadius
attribute.
Refer to the code below:
{
"chart": {
"labelGlow": "1",
"labelGlowIntensity": "50",
"labelGlowColor": "#cccc00",
"labelGlowRadius": "10"
}
}
The chart will look as shown below:
Click here to edit the above chart.
Use events in the treemap
Using FusionCharts Suite XT, you can configure standard interactivity for items like tooltips and gradient legend, through the treemap attributes. However, if you need to further extend chart interactivity, you can raise the following JavaScript events for this chart, and then build your custom modifications over them:
The
beforeDrillDown
event is triggered just before the chart is rendered when you drill down to a child node.The
drillDown
event is triggered just after the chart is rendered when you drill down to a child node.The
beforeDrillUp
event is triggered just before the chart is rendered, when you drill up to the immediate parent node or the root node.The
drillUp
event is triggered just after the chart is rendered when you drill up to the immediate parent node or the root node.The
drillDownCancelled
event is triggered when thebeforeDrillDown
event is interrupted.The
drillUpCancelled
event is triggered when thebeforeDrillUp
event is interrupted.
Refer to the code below:
{
"chart": {
"beforeDrillDown": "",
"drillDown": "",
"beforeDrillUp": "",
"drillUp": "",
"drillDownCancelled": "",
"drillUpCancelled": ""
}
}
The chart will look as shown below:
Click here to edit the above chart.