how to add collor to the child blocks when loading data from json?

[ramesh7128Participant]

I have made use of a sample code provided, im loading a json data which has parent and child nodes. I wish to give specif color for every child node. How do i go about doing it??

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
                            });
                        }
                    }
                }
            });
        });
    </script>

my json data:
var data = [{"text": "Github", "id": "1", "parentid": "-1"}, {"text": "Codecademy", "id": "2", "parentid": "-1"}, {"text": "TeamTreeHouse", "id": "3", "parentid": "-1"}, {"text": "Python", "id": "4", "value": "12", "parentid": "1"}, {"text": "C#", "id": "5", "value": "4", "parentid": "1"}, {"text": "JavaScript", "id": "6", "value": "10", "parentid": "1"}, {"text": "PHP", "id": "7", "value": "14", "parentid": "1"}, {"text": "CSS", "id": "8", "value": "15", "parentid": "1"}, {"text": "JavaScript ", "id": "9", "value": "10", "parentid": "2"}, {"text": "YouTube API", "id": "10", "value": "10", "parentid": "2"}, {"text": "Python", "id": "11", "value": "10", "parentid": "2"}, {"text": "jQuery", "id": "12", "value": "10", "parentid": "2"}, {"text": "Business", "id": "13", "value": "3", "parentid": "3"}, {"text": "JavaScript", "id": "14", "value": "16", "parentid": "3"}, {"text": "HTML", "id": "15", "value": "15", "parentid": "3"}, {"text": "Design", "id": "16", "value": "1", "parentid": "3"}, {"text": "CSS", "id": "17", "value": "11", "parentid": "3"}, {"text": "Development Tools", "id": "18", "value": "1", "parentid": "3"}]
for example in my json data i want a specific color for all python blocks, PHP blocks and so on.

How do i go about doing it??

R.Ramesh

[Peter StoevKeymaster]

Hi Ramesh,

I wrote you about that by email and pointed you out this demo: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtreemap/customcolors.htm?arctic

Best Regards,
Peter Stoev

[ramesh7128Participant]

Hey Peter,

The problem is in that example there is no parent child relation, its all individual nodes. My requirement is, i have parent ans child nodes and i need to color code them as well with the data being passed in json. It would be great if you could jus tell me in this piece of code what changes i need to make.
Thanks.

R.Ramesh

[Peter StoevKeymaster]

hi Ramesh,

In the renderCallback function, you have element and data. Taking these into account, you can evaluate whether and under what condition the Element should be styled.As far as I see, each data item has parentid and id.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[ramesh7128Participant]

Hey Peter,

That really helped. I was going in circles before knowing which variable to target.That element and data, really helped.
Thanks. Keep up the good service.

R.Ramesh.

[Author]

Posts