jQuery UI Widgets Forums Gauges and Maps TreeMap Using JSON with Treemap

This topic contains 4 replies, has 2 voices, and was last updated by  robf 6 years, 3 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • Using JSON with Treemap #54852

    robf
    Participant

    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

    Using JSON with Treemap #54893

    Dimitar
    Participant

    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/

    Using JSON with Treemap #55057

    robf
    Participant

    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

    • This reply was modified 6 years, 4 months ago by  robf.
    Using JSON with Treemap #55060

    Dimitar
    Participant

    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/

    Using JSON with Treemap #55147

    robf
    Participant

    Excellent. That did it. Thank you!

    Robert

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

You must be logged in to reply to this topic.