JavaScript TreeMap

Set the valueMember 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...