jQuery UI Widgets Forums Gauges and Maps TreeMap how to add collor to the child blocks when loading data from json?

Tagged: 

This topic contains 4 replies, has 2 voices, and was last updated by  ramesh7128 5 years, 1 month ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author

  • ramesh7128
    Participant

    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 Stoev
    Keymaster

    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


    ramesh7128
    Participant

    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 Stoev
    Keymaster

    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


    ramesh7128
    Participant

    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.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.