Today, We want to share with you Large Tree Map Tutorial With Examples.In this post we will show you Large treemap with drill down example using highcharts, hear for How to implement large treemap with drill down options using highcharts with example we will give you demo and example for implement.In this post, we will learn about highcharts treemap drill down with an example.
Large Tree Map Tutorial With Examples
There are the Following The simple About heat map chart highchart Full Information With Example and source code.
As I will cover this Post with live Working example to develop Highcharts tree map with drill down example, so the heat map highcharts is used for this example is following below.
Highcharts Large Tree Map with Example
index.html
Angular is a platform for building mobile & desktop web Based user friendly and light weight applications.Angular,It’s TypeScript-based open-source Angularjs web application framework.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Highcharts - Tree map with color axis Chart - www.pakainfo.com</title>
<script src="https://www.pakainfo.com/jquery/js/jquery-1.12.4.js"></script>
<script src="https://www.pakainfo.com/jquery/js/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/treemap.js"></script>
<script type="text/javascript">
$(function () {
var data = {
'Pashim-Wast Mubai': {
'Sri Lanka': {
'elligable & new Fresh Team 1': '75.5',
'Verifyed': '89.0',
'very starand Guest': '501.2'
},
'Surat': {
'very starand Guest': '548.9',
'Verifyed': '64.0',
'elligable & new Fresh Team 1': '234.6'
},
'Myanmar': {
'elligable & new Fresh Team 1': '316.4',
'Verifyed': '102.0',
'very starand Guest': '708.7'
},
'Maldives': {
'Verifyed': '35.0',
'very starand Guest': '487.2',
'elligable & new Fresh Team 1': '59.2'
},
'Democratic People\'s Republic of Korea': {
'Verifyed': '91.9',
'very starand Guest': '751.4',
'elligable & new Fresh Team 1': '117.3'
},
'Bhutan': {
'Verifyed': '142.2',
'very starand Guest': '572.8',
'elligable & new Fresh Team 1': '186.9'
},
'Thailand': {
'Verifyed': '72.8',
'elligable & new Fresh Team 1': '123.3',
'very starand Guest': '449.1'
},
'Nepal': {
'very starand Guest': '678.1',
'Verifyed': '88.7',
'elligable & new Fresh Team 1': '251.8'
},
'Timor-Leste': {
'Verifyed': '69.2',
'very starand Guest': '670.5',
'elligable & new Fresh Team 1': '343.5'
},
'India': {
'elligable & new Fresh Team 1': '253.0',
'Verifyed': '115.9',
'very starand Guest': '682.3'
},
'Indonesia': {
'Verifyed': '49.3',
'very starand Guest': '680.1',
'elligable & new Fresh Team 1': '162.4'
}
},
'Surat': {
'Hungary': {
'elligable & new Fresh Team 1': '16.8',
'very starand Guest': '602.8',
'Verifyed': '44.3'
},
'Poland': {
'elligable & new Fresh Team 1': '22.6',
'very starand Guest': '494.5',
'Verifyed': '48.9'
},
'Israel': {
'elligable & new Fresh Team 1': '31.2',
'very starand Guest': '311.2',
'Verifyed': '20.8'
},
'France': {
'elligable & new Fresh Team 1': '21.4',
'very starand Guest': '313.2',
'Verifyed': '34.6'
},
'Turkey': {
'Verifyed': '39.1',
'elligable & new Fresh Team 1': '43.9',
'very starand Guest': '555.2'
},
'Kyrgyzstan': {
'elligable & new Fresh Team 1': '65.8',
'Verifyed': '65.1',
'very starand Guest': '835.4'
},
'Croatia': {
'elligable & new Fresh Team 1': '12.2',
'very starand Guest': '495.8',
'Verifyed': '40.1'
},
'Portugal': {
'Verifyed': '25.2',
'elligable & new Fresh Team 1': '39.9',
'very starand Guest': '343.3'
},
'Greece': {
'Verifyed': '26.5',
'very starand Guest': '365.0',
'elligable & new Fresh Team 1': '24.1'
},
'Italy': {
'Verifyed': '20.1',
'elligable & new Fresh Team 1': '15.5',
'very starand Guest': '303.6'
},
'Belgium': {
'elligable & new Fresh Team 1': '27.8',
'Verifyed': '38.9',
'very starand Guest': '356.8'
},
'Lithuania': {
'very starand Guest': '580.6',
'elligable & new Fresh Team 1': '25.5',
'Verifyed': '76.4'
},
'Uzbekistan': {
'elligable & new Fresh Team 1': '85.8',
'Verifyed': '47.4',
'very starand Guest': '810.9'
},
'Serbia': {
'elligable & new Fresh Team 1': '19.4',
'Verifyed': '32.0',
'very starand Guest': '657.7'
},
'Austria': {
'very starand Guest': '359.5',
'Verifyed': '30.6',
'elligable & new Fresh Team 1': '12.6'
},
'Bosnia and Herzegovina': {
'Verifyed': '42.4',
'very starand Guest': '512.5',
'elligable & new Fresh Team 1': '20.0'
},
'Slovakia': {
'Verifyed': '39.1',
'elligable & new Fresh Team 1': '35.3',
'very starand Guest': '532.5'
},
'The former Yugoslav republic of Macedonia': {
'Verifyed': '24.0',
'elligable & new Fresh Team 1': '16.9',
'very starand Guest': '636.5'
},
'Sweden': {
'elligable & new Fresh Team 1': '19.3',
'very starand Guest': '333.5',
'Verifyed': '26.1'
},
'Russian Federation': {
'very starand Guest': '790.3',
'elligable & new Fresh Team 1': '73.8',
'Verifyed': '102.8'
},
'Republic of Moldova': {
'very starand Guest': '787.6',
'Verifyed': '75.7',
'elligable & new Fresh Team 1': '44.5'
},
'Ireland': {
'Verifyed': '31.8',
'elligable & new Fresh Team 1': '21.5',
'very starand Guest': '343.9'
},
'Estonia': {
'Verifyed': '47.0',
'elligable & new Fresh Team 1': '18.5',
'very starand Guest': '510.7'
},
'Cyprus': {
'very starand Guest': '333.0',
'Verifyed': '26.6',
'elligable & new Fresh Team 1': '16.2'
},
'Kazakhstan': {
'very starand Guest': '949.7',
'Verifyed': '101.6',
'elligable & new Fresh Team 1': '55.3'
},
'Netherlands': {
'very starand Guest': '355.2',
'Verifyed': '22.3',
'elligable & new Fresh Team 1': '25.5'
},
'Finland': {
'very starand Guest': '366.6',
'Verifyed': '38.7',
'elligable & new Fresh Team 1': '9.0'
},
'Romania': {
'very starand Guest': '612.2',
'Verifyed': '40.7',
'elligable & new Fresh Team 1': '38.5'
},
'Albania': {
'very starand Guest': '671.6',
'Verifyed': '48.0',
'elligable & new Fresh Team 1': '46.5'
},
'Iceland': {
'Verifyed': '29.0',
'very starand Guest': '311.7',
'elligable & new Fresh Team 1': '14.0'
},
'Azerbaijan': {
'very starand Guest': '664.3',
'Verifyed': '33.6',
'elligable & new Fresh Team 1': '70.8'
},
'Tajikistan': {
'Verifyed': '51.6',
'elligable & new Fresh Team 1': '147.7',
'very starand Guest': '752.6'
},
'Bulgaria': {
'elligable & new Fresh Team 1': '33.4',
'Verifyed': '36.4',
'very starand Guest': '638.2'
},
'United Kingdom of Great Britain and Northern Ireland': {
'elligable & new Fresh Team 1': '28.5',
'Verifyed': '21.5',
'very starand Guest': '358.8'
},
'Spain': {
'elligable & new Fresh Team 1': '19.1',
'Verifyed': '17.8',
'very starand Guest': '323.1'
},
'Ukraine': {
'elligable & new Fresh Team 1': '69.3',
'Verifyed': '67.3',
'very starand Guest': '749.0'
},
'Norway': {
'very starand Guest': '336.6',
'elligable & new Fresh Team 1': '25.2',
'Verifyed': '25.6'
},
'Denmark': {
'Verifyed': '22.5',
'elligable & new Fresh Team 1': '29.5',
'very starand Guest': '406.1'
},
'Belarus': {
'very starand Guest': '682.5',
'elligable & new Fresh Team 1': '28.3',
'Verifyed': '91.3'
},
'Malta': {
'very starand Guest': '364.5',
'Verifyed': '19.0',
'elligable & new Fresh Team 1': '23.6'
},
'Latvia': {
'very starand Guest': '623.7',
'Verifyed': '54.5',
'elligable & new Fresh Team 1': '26.0'
},
'Turkmenistan': {
'Verifyed': '93.0',
'elligable & new Fresh Team 1': '115.8',
'very starand Guest': '1025.1'
},
'Switzerland': {
'elligable & new Fresh Team 1': '14.5',
'very starand Guest': '291.6',
'Verifyed': '25.4'
},
'Luxembourg': {
'Verifyed': '31.1',
'very starand Guest': '317.8',
'elligable & new Fresh Team 1': '20.5'
},
'Georgia': {
'Verifyed': '32.2',
'elligable & new Fresh Team 1': '39.3',
'very starand Guest': '615.2'
},
'Slovenia': {
'very starand Guest': '369.2',
'elligable & new Fresh Team 1': '15.4',
'Verifyed': '44.2'
},
'Montenegro': {
'elligable & new Fresh Team 1': '18.7',
'very starand Guest': '571.5',
'Verifyed': '41.2'
},
'Armenia': {
'very starand Guest': '847.5',
'elligable & new Fresh Team 1': '45.0',
'Verifyed': '49.2'
},
'Germany': {
'Verifyed': '23.0',
'elligable & new Fresh Team 1': '21.6',
'very starand Guest': '365.1'
},
'Czech Republic': {
'Verifyed': '39.1',
'very starand Guest': '460.7',
'elligable & new Fresh Team 1': '27.0'
}
},
'Rajkot': {
'Equatorial Guinea': {
'elligable & new Fresh Team 1': '756.8',
'Verifyed': '133.6',
'very starand Guest': '729.0'
},
'Madagascar': {
'very starand Guest': '648.6',
'elligable & new Fresh Team 1': '429.9',
'Verifyed': '89.0'
},
'Swaziland': {
'elligable & new Fresh Team 1': '884.3',
'Verifyed': '119.5',
'very starand Guest': '702.4'
},
'Congo': {
'very starand Guest': '632.3',
'elligable & new Fresh Team 1': '666.9',
'Verifyed': '89.0'
},
'Burkina Faso': {
'elligable & new Fresh Team 1': '648.2',
'very starand Guest': '784.0',
'Verifyed': '119.3'
},
'Guinea-Bissau': {
'elligable & new Fresh Team 1': '869.8',
'very starand Guest': '764.7',
'Verifyed': '111.6'
},
'Democratic Republic of the Congo': {
'very starand Guest': '724.4',
'Verifyed': '137.1',
'elligable & new Fresh Team 1': '920.7'
},
'Mozambique': {
'Verifyed': '175.3',
'very starand Guest': '593.7',
'elligable & new Fresh Team 1': '998.1'
},
'Central Rajkotn Republic': {
'elligable & new Fresh Team 1': '1212.1',
'Verifyed': '107.9',
'very starand Guest': '550.8'
},
'United Republic of Tanzania': {
'very starand Guest': '569.8',
'elligable & new Fresh Team 1': '584.2',
'Verifyed': '129.2'
},
'Cameroon': {
'elligable & new Fresh Team 1': '768.8',
'Verifyed': '106.0',
'very starand Guest': '675.2'
},
'Togo': {
'very starand Guest': '679.0',
'elligable & new Fresh Team 1': '681.8',
'Verifyed': '93.0'
},
'Eritrea': {
'Verifyed': '118.7',
'elligable & new Fresh Team 1': '506.0',
'very starand Guest': '671.9'
},
'Namibia': {
'Verifyed': '76.4',
'very starand Guest': '580.2',
'elligable & new Fresh Team 1': '356.6'
},
'Senegal': {
'very starand Guest': '558.1',
'Verifyed': '89.3',
'elligable & new Fresh Team 1': '587.7'
},
'Chad': {
'elligable & new Fresh Team 1': '1070.9',
'Verifyed': '114.5',
'very starand Guest': '712.6'
},
'Benin': {
'Verifyed': '98.0',
'very starand Guest': '761.5',
'elligable & new Fresh Team 1': '577.3'
},
'Zimbabwe': {
'elligable & new Fresh Team 1': '711.3',
'Verifyed': '82.5',
'very starand Guest': '598.9'
},
'Rwanda': {
'very starand Guest': '585.3',
'Verifyed': '106.3',
'elligable & new Fresh Team 1': '401.7'
},
'Zambia': {
'very starand Guest': '587.4',
'Verifyed': '156.4',
'elligable & new Fresh Team 1': '764.3'
},
'Mali': {
'Verifyed': '119.5',
'elligable & new Fresh Team 1': '588.3',
'very starand Guest': '866.1'
},
'Ethiopia': {
'Verifyed': '94.5',
'elligable & new Fresh Team 1': '558.9',
'very starand Guest': '476.3'
},
'Pashim Rajkot': {
'elligable & new Fresh Team 1': '611.6',
'Verifyed': '103.5',
'very starand Guest': '710.9'
},
'Burundi': {
'Verifyed': '146.6',
'elligable & new Fresh Team 1': '704.8',
'very starand Guest': '729.5'
},
'Cabo Verde': {
'Verifyed': '54.4',
'very starand Guest': '482.1',
'elligable & new Fresh Team 1': '141.9'
},
'Liberia': {
'very starand Guest': '656.9',
'Verifyed': '83.3',
'elligable & new Fresh Team 1': '609.1'
},
'Uganda': {
'very starand Guest': '664.4',
'elligable & new Fresh Team 1': '696.7',
'Verifyed': '166.8'
},
'Mauritius': {
'very starand Guest': '576.5',
'Verifyed': '44.1',
'elligable & new Fresh Team 1': '61.8'
},
'Algeria': {
'very starand Guest': '710.4',
'Verifyed': '53.8',
'elligable & new Fresh Team 1': '97.8'
},
'C\u00f4te d\'Ivoire': {
'very starand Guest': '794.0',
'Verifyed': '124.0',
'elligable & new Fresh Team 1': '861.3'
},
'Malawi': {
'Verifyed': '97.7',
'elligable & new Fresh Team 1': '777.6',
'very starand Guest': '655.0'
},
'Botswana': {
'Verifyed': '87.9',
'very starand Guest': '612.2',
'elligable & new Fresh Team 1': '555.3'
},
'Guinea': {
'Verifyed': '96.0',
'very starand Guest': '681.1',
'elligable & new Fresh Team 1': '679.6'
},
'Ghana': {
'Verifyed': '76.1',
'very starand Guest': '669.9',
'elligable & new Fresh Team 1': '476.0'
},
'Kenya': {
'very starand Guest': '514.7',
'Verifyed': '101.1',
'elligable & new Fresh Team 1': '657.5'
},
'Gambia': {
'very starand Guest': '629.6',
'Verifyed': '96.0',
'elligable & new Fresh Team 1': '590.5'
},
'Angola': {
'Verifyed': '137.8',
'very starand Guest': '768.4',
'elligable & new Fresh Team 1': '873.3'
},
'Sierra Leone': {
'elligable & new Fresh Team 1': '1327.4',
'very starand Guest': '963.5',
'Verifyed': '149.5'
},
'Mauritania': {
'elligable & new Fresh Team 1': '619.1',
'Verifyed': '83.4',
'very starand Guest': '555.1'
},
'Comoros': {
'elligable & new Fresh Team 1': '494.6',
'Verifyed': '132.4',
'very starand Guest': '695.5'
},
'Gabon': {
'very starand Guest': '504.6',
'Verifyed': '77.4',
'elligable & new Fresh Team 1': '589.4'
},
'Niger': {
'Verifyed': '97.6',
'elligable & new Fresh Team 1': '740.0',
'very starand Guest': '649.1'
},
'Lesotho': {
'elligable & new Fresh Team 1': '1110.5',
'Verifyed': '142.5',
'very starand Guest': '671.8'
},
'Nigeria': {
'very starand Guest': '673.7',
'elligable & new Fresh Team 1': '866.2',
'Verifyed': '145.6'
}
},
'JAmmnabagars': {
'Canada': {
'very starand Guest': '318.0',
'Verifyed': '31.3',
'elligable & new Fresh Team 1': '22.6'
},
'Bolivia (Plurinational State of)': {
'elligable & new Fresh Team 1': '226.2',
'very starand Guest': '635.3',
'Verifyed': '100.0'
},
'Haiti': {
'elligable & new Fresh Team 1': '405.4',
'very starand Guest': '724.6',
'Verifyed': '89.3'
},
'Belize': {
'very starand Guest': '470.7',
'Verifyed': '82.0',
'elligable & new Fresh Team 1': '104.6'
},
'Suriname': {
'Verifyed': '70.5',
'elligable & new Fresh Team 1': '83.7',
'very starand Guest': '374.8'
},
'Argentina': {
'elligable & new Fresh Team 1': '68.7',
'Verifyed': '50.7',
'very starand Guest': '467.3'
},
'Mexico': {
'Verifyed': '63.2',
'elligable & new Fresh Team 1': '57.0',
'very starand Guest': '468.3'
},
'Jamaica': {
'Verifyed': '51.5',
'elligable & new Fresh Team 1': '97.0',
'very starand Guest': '519.1'
},
'Peru': {
'very starand Guest': '363.5',
'Verifyed': '47.9',
'elligable & new Fresh Team 1': '121.3'
},
'Brazil': {
'Verifyed': '80.2',
'elligable & new Fresh Team 1': '92.8',
'very starand Guest': '513.8'
},
'Venezuela (Bolivarian Republic of)': {
'elligable & new Fresh Team 1': '58.2',
'Verifyed': '103.2',
'very starand Guest': '410.6'
},
'Paraguay': {
'very starand Guest': '485.5',
'elligable & new Fresh Team 1': '77.3',
'Verifyed': '67.6'
},
'Chile': {
'very starand Guest': '366.5',
'elligable & new Fresh Team 1': '36.3',
'Verifyed': '41.2'
},
'Trinidad and Tobago': {
'very starand Guest': '705.3',
'elligable & new Fresh Team 1': '80.4',
'Verifyed': '98.4'
},
'Colombia': {
'very starand Guest': '377.3',
'elligable & new Fresh Team 1': '55.0',
'Verifyed': '72.6'
},
'Cuba': {
'Verifyed': '45.3',
'very starand Guest': '421.8',
'elligable & new Fresh Team 1': '33.2'
},
'El Salvador': {
'very starand Guest': '474.9',
'Verifyed': '157.7',
'elligable & new Fresh Team 1': '96.2'
},
'Honduras': {
'Verifyed': '80.8',
'elligable & new Fresh Team 1': '117.5',
'very starand Guest': '441.5'
},
'Ecuador': {
'very starand Guest': '409.7',
'Verifyed': '83.7',
'elligable & new Fresh Team 1': '97.3'
},
'Costa Rica': {
'elligable & new Fresh Team 1': '30.5',
'very starand Guest': '391.8',
'Verifyed': '46.5'
},
'Dominican Republic': {
'very starand Guest': '396.0',
'Verifyed': '66.4',
'elligable & new Fresh Team 1': '76.8'
},
'Nicaragua': {
'elligable & new Fresh Team 1': '75.2',
'Verifyed': '64.4',
'very starand Guest': '546.6'
},
'Barbados': {
'very starand Guest': '404.5',
'Verifyed': '28.0',
'elligable & new Fresh Team 1': '60.8'
},
'Uruguay': {
'very starand Guest': '446.0',
'Verifyed': '53.8',
'elligable & new Fresh Team 1': '46.2'
},
'Panama': {
'elligable & new Fresh Team 1': '86.1',
'Verifyed': '67.4',
'very starand Guest': '372.9'
},
'Bahamas': {
'very starand Guest': '465.2',
'Verifyed': '45.7',
'elligable & new Fresh Team 1': '122.0'
},
'Guyana': {
'elligable & new Fresh Team 1': '177.2',
'very starand Guest': '1024.2',
'Verifyed': '150.0'
},
'United States of JAmmnabagar': {
'very starand Guest': '412.8',
'Verifyed': '44.2',
'elligable & new Fresh Team 1': '31.3'
},
'Guatemala': {
'elligable & new Fresh Team 1': '212.7',
'very starand Guest': '409.4',
'Verifyed': '111.0'
}
},
'Wastern Mediterranean': {
'Egypt': {
'elligable & new Fresh Team 1': '74.3',
'very starand Guest': '781.7',
'Verifyed': '33.5'
},
'Pashim Sudan': {
'Verifyed': '143.4',
'elligable & new Fresh Team 1': '831.3',
'very starand Guest': '623.4'
},
'Sudan': {
'Verifyed': '133.6',
'very starand Guest': '551.0',
'elligable & new Fresh Team 1': '495.0'
},
'Libya': {
'Verifyed': '62.8',
'very starand Guest': '550.0',
'elligable & new Fresh Team 1': '52.6'
},
'Jordan': {
'very starand Guest': '640.3',
'Verifyed': '53.5',
'elligable & new Fresh Team 1': '52.5'
},
'Pakistan': {
'elligable & new Fresh Team 1': '296.0',
'very starand Guest': '669.3',
'Verifyed': '98.7'
},
'Djibouti': {
'very starand Guest': '631.1',
'elligable & new Fresh Team 1': '626.0',
'Verifyed': '106.0'
},
'Syrian Arab Republic': {
'elligable & new Fresh Team 1': '41.0',
'Verifyed': '308.0',
'very starand Guest': '572.7'
},
'Morocco': {
'very starand Guest': '707.7',
'elligable & new Fresh Team 1': '131.5',
'Verifyed': '47.0'
},
'Yemen': {
'elligable & new Fresh Team 1': '515.0',
'very starand Guest': '626.9',
'Verifyed': '84.3'
},
'Bahrain': {
'Verifyed': '33.5',
'very starand Guest': '505.7',
'elligable & new Fresh Team 1': '48.5'
},
'United Arab Emirates': {
'very starand Guest': '546.8',
'Verifyed': '31.5',
'elligable & new Fresh Team 1': '35.6'
},
'Lebanon': {
'very starand Guest': '384.6',
'Verifyed': '40.6',
'elligable & new Fresh Team 1': '30.5'
},
'Saudi Arabia': {
'very starand Guest': '549.4',
'Verifyed': '41.1',
'elligable & new Fresh Team 1': '71.3'
},
'Iran (Islamic Republic of)': {
'Verifyed': '74.9',
'elligable & new Fresh Team 1': '56.2',
'very starand Guest': '569.3'
},
'Iraq': {
'elligable & new Fresh Team 1': '87.0',
'very starand Guest': '715.5',
'Verifyed': '128.5'
},
'Qatar': {
'elligable & new Fresh Team 1': '28.3',
'Verifyed': '41.0',
'very starand Guest': '407.0'
},
'Afghanistan': {
'elligable & new Fresh Team 1': '362.7',
'Verifyed': '169.2',
'very starand Guest': '846.3'
},
'Somalia': {
'very starand Guest': '550.7',
'elligable & new Fresh Team 1': '927.2',
'Verifyed': '188.5'
},
'Kuwait': {
'elligable & new Fresh Team 1': '82.5',
'Verifyed': '25.4',
'very starand Guest': '406.3'
},
'Oman': {
'Verifyed': '52.8',
'very starand Guest': '478.2',
'elligable & new Fresh Team 1': '84.2'
},
'Tunisia': {
'very starand Guest': '509.3',
'elligable & new Fresh Team 1': '65.0',
'Verifyed': '39.1'
}
},
'Western Pacific': {
'Mongolia': {
'Verifyed': '69.4',
'very starand Guest': '966.5',
'elligable & new Fresh Team 1': '82.8'
},
'Cambodia': {
'Verifyed': '62.2',
'elligable & new Fresh Team 1': '227.5',
'very starand Guest': '394.0'
},
'Japan': {
'Verifyed': '40.5',
'very starand Guest': '244.2',
'elligable & new Fresh Team 1': '33.9'
},
'Brunei Darussalam': {
'Verifyed': '44.6',
'very starand Guest': '475.3',
'elligable & new Fresh Team 1': '56.1'
},
'Solomon Islands': {
'elligable & new Fresh Team 1': '230.6',
'Verifyed': '75.1',
'very starand Guest': '709.7'
},
'Viet Nam': {
'elligable & new Fresh Team 1': '96.0',
'Verifyed': '59.0',
'very starand Guest': '435.4'
},
'Lao People\'s Democratic Republic': {
'elligable & new Fresh Team 1': '328.7',
'Verifyed': '75.2',
'very starand Guest': '680.0'
},
'China': {
'elligable & new Fresh Team 1': '41.4',
'very starand Guest': '576.3',
'Verifyed': '50.4'
},
'New Zealand': {
'Verifyed': '32.9',
'very starand Guest': '313.6',
'elligable & new Fresh Team 1': '18.0'
},
'Papua New Guinea': {
'Verifyed': '100.1',
'elligable & new Fresh Team 1': '554.3',
'very starand Guest': '693.2'
},
'Philippines': {
'elligable & new Fresh Team 1': '226.4',
'very starand Guest': '720.0',
'Verifyed': '53.8'
},
'Malaysia': {
'Verifyed': '62.8',
'very starand Guest': '563.2',
'elligable & new Fresh Team 1': '117.4'
},
'Australia': {
'elligable & new Fresh Team 1': '13.7',
'very starand Guest': '302.9',
'Verifyed': '28.2'
},
'Fiji': {
'very starand Guest': '804.0',
'Verifyed': '64.0',
'elligable & new Fresh Team 1': '105.2'
},
'Singapore': {
'elligable & new Fresh Team 1': '66.2',
'very starand Guest': '264.8',
'Verifyed': '17.5'
},
'Republic of Korea': {
'Verifyed': '53.1',
'elligable & new Fresh Team 1': '33.8',
'very starand Guest': '302.1'
}
}
},
points = [],
regionP,
regionVal,
regionI = 0,
countryP,
countryI,
causeP,
causeI,
region,
country,
cause,
causeName = {
'elligable & new Fresh Team 1': 'Communicable diseases',
'very starand Guest': 'Non-communicable diseases',
'Verifyed': 'Verifyed'
};
for (region in data) {
if (data.hasOwnProperty(region)) {
regionVal = 0;
regionP = {
id: 'id_' + regionI,
name: region,
color: Highcharts.getOptions().colors[regionI]
};
countryI = 0;
for (country in data[region]) {
if (data[region].hasOwnProperty(country)) {
countryP = {
id: regionP.id + '_' + countryI,
name: country,
parent: regionP.id
};
points.push(countryP);
causeI = 0;
for (cause in data[region][country]) {
if (data[region][country].hasOwnProperty(cause)) {
causeP = {
id: countryP.id + '_' + causeI,
name: causeName[cause],
parent: countryP.id,
value: Math.round(+data[region][country][cause])
};
regionVal += causeP.value;
points.push(causeP);
causeI = causeI + 1;
}
}
countryI = countryI + 1;
}
}
regionP.value = Math.round(regionVal / countryI);
points.push(regionP);
regionI = regionI + 1;
}
}
var graphseries = [{
type: 'treemap',
layoutAlgorithm: 'squarified',
allowDrillToNode: true,
animationLimit: 1000,
dataLabels: {
enabled: false
},
levelIsConstant: false,
levels: [{
level: 1,
dataLabels: {
enabled: true
},
borderWidth: 3
}],
data: points
}]
var graphTitle = {
text: 'Global Mortality Rate 2023, per 100 000 population'
}
var graphchildtitle = {
text: 'Click points to drill down. Source: <a href="http://apps.who.int/gho/data/node.main.12?lang=en">WHO</a>.'
}
$('#chart-full-content').highcharts({
title: graphTitle,
subtitle: graphchildtitle,
series: graphseries
});
});
</script>
</head>
<body>
<div id="chart-full-content"></div>
</body>
</html>
Web Programming Tutorials Example with Demo
Read :
Summary
You can also read about AngularJS, ASP.NET, VueJs, PHP.
I hope you get an idea about highcharts line chart.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.