Using JSON with Treemap

[robfParticipant]

Hello,
I have a question about using the treemap with json.

I was able to use the homeprices.txt file (with datatype=’tab’) and this works fine, per your example. I then converted the file to json e.g.

[
  [
    1951,
    103.8986687,
    59.2786986,
    154.287,
    0.0257
  ],
  [
    1952,
    103.9743275,
    58.94343772,
    156.954,
    0.0268
  ],
  [
    1953,
    113.8451588,
    60.8392201,
    159.565,
    0.0283
  ],
  [
    1954,
    115.6204181,
    62.25447619,
    162.391,
    0.0248
  ],
  [
    1955,
    115.5419272,
    65.95528267,
    165.275,
    0.0261
  ],
  [
    1956,
    113.7942463,
    68.79148786,
    168.221,
    0.029
  ],...
]

The code is then:

var source =
             {
                 datatype: "json",
                 datafields: [
                      { name: 'Year' },
                      { name: 'HPI' },
                      { name: 'BuildCost' },
                      { name: 'Population' },
                      { name: 'Rate' }
                  ],
                 url: 'homeprices.json'
             };
            var dataAdapter = new $.jqx.dataAdapter(source, { async: true, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });

        $('#treemap').jqxTreeMap({
                width: '600',
                height: '500',
                source: dataAdapter,
                displayMember: 'Year',
                valueMember: 'Rate',
                colorMode: 'rangeColors',
                colorRanges: [
                    { min: 0.02, max: 0.03, color: '#ff0300' },
                    { min: 0.03, max: 0.04, color: '#fe2e00' },
                    { min: 0.04, max: 0.05, color: '#fe3900' },
                    { min: 0.05, max: 0.06, color: '#ff5400' },
                    { min: 0.06, max: 0.07, color: '#fe7500' },
                    { min: 0.07, max: 0.08, color: '#fe8200' },
                    { min: 0.08, max: 0.09, color: '#ffed00' },
                    { min: 0.09, max: 0.1, color: '#b8db00' },
                    { min: 0.1, max: 0.11, color: '#7fbf00' },
                    { min: 0.11, max: 0.12, color: '#50a600' },
                    { min: 0.12, max: 0.15, color: '#008000' }
                ],
                legendScaleCallback: function (v) {
                    return v;
                },
                renderCallbacks: {
                    '*': function (element, data) {
                        var content = '<div><div style="font-weight: bold; font-family: verdana; font-size: 13px;">Year: ' + data.record.Year + '</div>';
                        content += '<div style=" font-family: verdana; font-size: 12px;">HPI: ' + data.record.HPI + '</div>';
                        content += '<div style=" font-family: verdana; font-size: 12px;">Build Cost: ' + data.record.BuildCost + '</div>';
                        content += '<div style=" font-family: verdana; font-size: 12px;">Population: ' + data.record.Population + '</div>';
                        content += '<div style=" font-family: verdana; font-size: 12px;">Interest Rate: ' + data.record.Rate + '</div>';
                        content += '</div>';
                        element.jqxTooltip({
                            content: content,
                            position: 'mouse',
                            autoHideDelay: 6000
                        });
                    }
                },
                legendLabel: 'Interest Rate'
            });

——
When I try to execute this code my request just runs indefinitely in the browser. I have tried a similar operation with the “coffee” example and file – e.g.

[
  {
    "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"
  },...
]

Not sure what the issue is. My JSON validates fine via JSONLint. Any help appreciated!

Thanks.
Rob

[DimitarParticipant]

Hello Rob,

Is any error alerted by the data adapter which loads the JSON? Do you experience any issues trying to run the demo Binding to JSON?

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[robfParticipant]

Hello Dimitar,
Thank you kindly for your response. I do not get any error from the data adapter. I have used the ‘COFFEE’ example from your site as follows

</head>
<body>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                var theme = "";

                var url = 'coffee.json';   //toggle use of this ** see below
                
                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     // ** when I use this it works
                    //url: url          // if I comment out 'localdata' and use the url it simply hangs
                };

                // create data adapter.
                var dataAdapter = new $.jqx.dataAdapter(source);
                // perform Data Binding.
                dataAdapter.dataBind();
                // get the treemap sectors. The first parameter is the item's id. The second parameter is the parent item's id. The 'items' parameter represents 
                // the sub items collection name. Each jqxTreeMap item has a 'label' property, but in the JSON data, we have a 'text' field. The last parameter 
                // specifies the mapping between the 'text' and 'label' fields.  
                var records = dataAdapter.getRecordsHierarchy('id', 'parentid', 'items', [{ name: 'text', map: 'label'}]);
                $('#treemap').jqxTreeMap({
                    width: 600,
                    height: 600,
                    source: records,
                    theme: theme,
                    baseColor: '#0afaaa',
                    renderCallbacks: {
                        '*': function (element, data) {
                            if (!data.parent) {
                                element.css({
                                    backgroundColor: '#fff',
                                    border: '1px solid #aaa'
                                });
                            }
                            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>
        <div id='treemap'>
        </div>
    </div>

I created a ‘coffee.json’ file that mirrors the data array (and is valid json)

[
  {
    "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"
  }
]

As I say, I see no errors in Firebug, but when I use URL it will not load treemap.

Any further help is greatly appreciated!

Thank you.
Rob

[DimitarParticipant]

Hi Rob,

This behaviour occurs because loading from an external data source is slower and by the time you are setting records, the data adapter has not yet finished loading the data. Please set the async source property to false and your issue should be solved, i.e.:

var source =
{
    datatype: "json",
    datafields: [
        { name: 'id' },
        { name: 'parentid' },
        { name: 'text' },
        { name: 'value' }
    ],
    id: 'id',
    url: url,
    async: false
};

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[robfParticipant]

Excellent. That did it. Thank you!

Robert

[Author]

Posts