How do i change color of childblocks in jqwidgets treemaps

Question

I have been using Jqwidgets for building treemaps. There was this one particular sample code which i was interested in.But my problem is i dont know how to add color to every individual child nodes or blocks in the treemap.Right now its all in different shades of the base color.

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();


var records = dataAdapter.getRecordsHierarchy('id', 'parentid', 'items', [{ name: 'text', map: 'label' }]);
$('#treemap').jqxTreeMap({
    width: 600,
    height: 600,
    source: records,
    baseColor: '#fa320a',
    renderCallbacks: {
        '*': function (element, data) {
            if (!data.parent) {
                element.css({
                    backgroundColor: '#fff',
                    border: '3px solid #000'
                });
            }
            else {
                var nThreshold = 105;
                var bgDelta = (data.rgb.r * 0.299) + (data.rgb.g * 0.587) + (data.rgb.b * 0.114);
                var foreColor = (255 - bgDelta < nThreshold) ? 'Black' : 'White';
                element.css({
                    color: foreColor
                });
            }
        }
    }
});

How do i do that?

Answer 1

add 'color' property to each parent object with different hex codes.

{
    "text": "Chocolate Beverage",
    "id": "1",
    "parentid": "-1",
    "value": "$1.1",
    "color": '#95FF7A'
}

put one more object witch has name:'color' to source's datafields array.

var source =
{
    datatype: "json",
    datafields: [
        { name: 'id' },
        { name: 'parentid' },
        { name: 'text' },
        { name: 'value' },
        { name: 'color' }
    ],
    id: 'id',
    localdata: data
};

then you can see each block has its own color band. http://jsfiddle.net/kn92gc1q/