JavaScript TreeMap

Set the displayMember property of the jqxTreeMap. Author: http://jqwidgets.com

by jqwidgets

HTML

<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<div id="treemap"></div>

JavaScript

var data = [{
      "id": "2",
          "parentid": "1",
          "text": "Hot Chocolate",
          "value": "$5.2"

  }, {
      "id": "3",
          "parentid": "1",
          "text": "Peppermint Hot Chocolate",
          "value": "$4.0"
  }, {
      "id": "4",
          "parentid": "1",
          "text": "Salted Caramel Hot Chocolate",
          "value": "$2.4"

  }, {
      "id": "5",
          "parentid": "1",
          "text": "White Hot Chocolate",
          "value": "$2.5"

  }, {
      "text": "Chocolate Beverage",
          "id": "1",
          "parentid": "-1",
          "value": "$1.1"
  }, {
      "id": "6",
          "text": "Espresso Beverage",
          "parentid": "-1",
          "value": "$0.9"
  }, {
      "id": "7",
          "parentid": "6",
          "text": "Caffe Americano",
          "value": "$1.2"
  }, {
      "id": "8",
          "text": "Caffe Latte",
          "parentid": "6",
          "value": "$3.3"
  }, {
      "id": "9",
          "text": "Caffe Mocha",
          "parentid": "6",
          "value": "$2.5"
  }, {
      "id": "10",
          "text": "Cappuccino",
          "parentid": "6",
          "value": "$1.5"
  }, {
      "id": "11",
          "text": "Pumpkin Spice Latte",
          "parentid": "6",
          "value": "$1.6"
  }, {
      "id": "12",
          "text": "Frappuccino",
          "parentid": "-1"
  }, {
      "id": "13",
          "text": "Caffe Vanilla Frappuccino",
          "parentid": "12",
          "value": "$1.2"

  }];
  // prepare the data
  var source =
   {
      datatype: "json",
      datafields: [
      {
          name: 'id'
      },
      {
          name: 'parentid'
      },
      {
          name: 'text'
      },
      {
          name: 'value'
      }
      ],
      id: 'id',
      localdata: data
  };
  // create data adapter.

  var dataAdapter = new $.jqx.dataAdapter(source);

  // perform Data Binding.

  dataAdapter.dataBind();

  // get the treemap sectors. The first parameter is the...