Treemap Demo

author(s): Jon Arild Nygård

by dimitrisv

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/treemap.js"></script>
<div id="container"></div>

CSS

#container {
    min-width: 300px;
    max-width: 600px;
    margin: 0 auto;
}

JavaScript

var data = {
        
        'Cards': {
        
            'Activate 3-D Secure': {
            		'User is able to activate additional security measures for card transactions':{
                    'Description': '3',
                    
                    //'Frequency': '1'
                    },
                
                
                'Alior':{
                    'Description': '1',

                    //'Frequency': '1'
                    },
                    
                    'BBVA':{
                    'Description': '1',

                    //'Frequency': '1'
                    },
                    'ING':{
                    'Description': '1',

                    //'Frequency': '1'
                    },
            },
            'Activate CC': {
            		'User is able to complete the activation process of a credit card. No offline steps are required':{
                    'Description': '1',
                    //'Frequency': '1'
                    },
                'Activate CC is found in 1 Bank: Alior':{
                    'Description': '1',

                   // 'Frequency': '1'
                   },
                
            },
            'Activate DC': {
            		'User is able to complete the activation process of a debit card. No offline steps are required':{
                    'Description': '2',

                    //'Frequency': '1'
            },
            
            		'BBVA':{
                    'Description': '1',

                    //'Frequency': '1'
                    },
                    
                    
            		'ING':{
                    'Description': '1',

                    //'Frequency': '1'
                    },
            
                    },
            
            
        }
    },
    points = [],
    regionP,
    regionVal,
    regionI = 0,
    countryP,
    countryI,
    descP,
    descI = 0,
    causeP,
    causeI,
    desc,
    region,
   ...