CODEWITHSUNDEEP
javascriptjsonrestcal-heatmap
Michael Ruhnau
Michael Ruhnau

Reputation: 1399

cal-HeatMap issue with data from REST service

I am playing around with cal-HeatMap and got a few examples with static json-data running. Now I want to load the json-data dynamically using a REST service. Unfortunataly, this does not work as expected when I consume the data from the REST service.

This is the code of the cal-HeatMap (RESTful version which does not work): 

var heatData = dojo.xhr.get({
    url:"http://localhost:8080/webapp/xfull2.nsf/services.xsp/heatdata",
    handleAs:"json"
});

var cal = new CalHeatMap();
cal.init(
{
    itemSelector:"#cal-heatmap",
    range: 10,
    start: new Date(2016, 3,4,1),
    data: heatData
}
);

The REST call seems to fire and returns a JSON result: 

{
    "1459742400":1,
    "1459749600":1,
    "1459753200":1,
    "1459756800":1,
    "1459767600":1
}

On the browser console I see this error: TypeError: a is undefined cal-hea....min.js (Line 8, Column 30282) (in cal-heatmap.min.js)

I saved the JSON from the REST call as .json-file and tested the cal-HeatMap with this file. In that case, it works properly. This is the static version of my code:

var cal = new CalHeatMap();
cal.init(
{
    itemSelector:"#cal-heatmap",
    range: 10,
    start: new Date(2016, 3,4,1),
    data: "js/cal-heatmap/sample-json/testdata.json"
}
);

The testdata.json file looks like this (same as above): 

{
    "1459742400":1,
    "1459749600":1,
    "1459753200":1,
    "1459756800":1,
    "1459767600":1
}

The result looks like this (which is OK): enter image description here

What am I missing here? Any help or hoint is appreciated.

Upvotes: 0

Views: 205

Answers (1)

Michael Ruhnau
Michael Ruhnau

Reputation: 1399

Well, I finally found the issue with my code - and the answer to the question is rather obvious. As I use an asynchronous REST call with xhr.get I have to create the HeatMap object in the callback. Otherwise the data is not yet available when the HeatMap object is being created.

The correct code looks like this: 

var heatData = dojo.xhr.get({
    url:"http://localhost:8080/webapp/xfull2.nsf/services.xsp/heatdata",
    handleAs:"json",
    load: function(data) {
        var cal = new CalHeatMap();
        cal.init({
                itemSelector:"#cal-heatmap",
                range: 10,
                start: new Date(2016, 3,4,1),
                data: data
                });
    }
})

Upvotes: 0

Related Questions