Treemap Demo

author(s): Jon Arild Nygård

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 = {
          'TotalSales': {
            	'Cat1': {
                    'Subcat1':{
                        'Prod1': '200',
                        'Prod2': '500',
                        'Prod3': '300'
                  	},
                    'Subcat2':{
                      'Prod1': '400',
                      'Prod2': '100',
                      'Prod3': '600'
                    } 
            	},
             'Cat2': {
                    'Subcat1':{
                      'Prod1': '200',
                      'Prod2': '500',
                      'Prod3': '300'
                  	},
                  	'Subcat2':{
                      'Prod1': '400',
                      'Prod2': '100',
                      'Prod3': '600'
                  	}   
            	},
            'Cat3': {
              'Subcat1':{
                'Prod1': '100',
                'Prod2': '200',
                'Prod3': '300'
              }
            },
            'Cat4': {
              'Subcat1':{
                'Prod1': '100',
                'Prod2': '200',
                'Prod3': '300'
              }
            },
            'Cat5': {
                'Subcat1':{
                  'Prod1': '200',
                  'Prod2': '500',
                  'Prod3': '300'
              	},
              'Subcat2':{
                  'Prod1': '400',
                  'Prod2': '100',
                  'Prod3': '600'
              }   
            }
          }
        },
        points = [],
        allP,
        allVal,
        allI = 0,
        catP,
        catI,
        subcatP,
        subcatI,
        prodP,
        prodI,
        all,
        cat,
        subcat,
        prod,
        prodName = {
            'Prod1': 'Product1',
            'Prod2': 'Product2',
            'Prod3': 'Product3'
        };

for (all in data) {
    if (data.hasOwnProperty(all)) {
        allVal = 0;
        allP = {
            id: 'id_' + allI,
            name: all,
          ...