Treemap Demo

author(s): Jon Arild Nygård

by hardiksondagar

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 points = [
    {
      "name": "A/C 7",
      "parent": "id_4907_4307",
      "is_virtual": false,
      "is_appliance": false,
      "values": {
        "1001": null
      },
      "id": "id_4907_4307_6151"
    },
    {
      "name": "A/C 4",
      "parent": "id_4907_4307",
      "is_virtual": false,
      "is_appliance": false,
      "values": {
        "1001": null
      },
      "id": "id_4907_4307_6152"
    },
    {
      "name": "Utility PDB-2(2)",
      "parent": "id_4881_4882_132_135",
      "is_virtual": false,
      "is_appliance": false,
      "values": {
        "1001": 2319.21
      },
      "id": "id_4881_4882_132_135_4646"
    },
    {
      "name": "Short blast-(20)",
      "parent": "id_4881_4882_132_135",
      "is_virtual": false,
      "is_appliance": false,
      "values": {
        "1001": 691.536
      },
      "id": "id_4881_4882_132_135_4647"
    },
    {
      "name": "GA-75-(3)",
      "parent": "id_4881_4882_132_135",
      "is_virtual": false,
      "is_appliance": false,
      "values": {
        "1001": 1.84375
      },
      "id": "id_4881_4882_132_135_4648"
    },
    {
      "name": "APFC Unit-(24)",
      "parent": "id_4881_4882_132_135",
      "is_virtual": false,
      "is_appliance": false,
      "values": {
        "1001": 0.169872
      },
      "id": "id_4881_4882_132_135_4649"
    },
    {
      "name": "Utility PDB-1(1)",
      "parent": "id_4881_4882_132_135",
      "is_virtual": false,
      "is_appliance": false,
      "values": {
        "1001": 1722.56
      },
      "id": "id_4881_4882_132_135_4650"
    },
    {
      "name": "RRL PDB-2(15)",
      "parent": "id_4881_4882_132_135",
      "is_virtual": false,
      "is_appliance": false,
      "values": {
        "1001": 931.001
      },
      "id": "id_4881_4882_132_135_4651"
    },
    {
      "name": "Design (51)",
      "parent": "id_4881_4882_132_135",
      "is_virtual": false,
      "is_appliance": false,
      "values": {
        "1001": 109.489
     ...