Question

I’m using heatmap.js on my website, which looks great. One slight issue is that when the event to generate the heat map is triggered, the page becomes unusable for a few seconds while the canvas loads.

I’ve created a modal dialog with a load bar that will eventually hide the page during this process, I’m just having difficulty creating a function to call the modal.

On another (slightly less useful) heat map library called heatcanvas, there are two functions to handle this:

heatmap.onRenderingStart = function(){document.getElementById('status').innerHTML = 'rendering...'}
heatmap.onRenderingEnd = function(){document.getElementById('status').innerHTML = 'ready'}

Is there a way I can create two similar functions with the heatmap.js (http://www.patrick-wied.at/static/heatmapjs/) library?

Thanks

Answer 1

Unfortunately, it seems that heatmap.js does not provide such callbacks by default. The best you can do is to fork the project and add this functionality by yourself. I will try to point you some places which need to be changed.

First of all, you need to provide functionality to add callbacks:

// heatmap object constructor
var heatmap = function heatmap(config){
    // private variables
    var _ = {
        radius : 40,
        element : {},
        canvas : {},
        acanvas: {},
        ctx : {},
        actx : {},
        legend: null,
        visible : true,
        width : 0,
        height : 0,
        max : false,
        gradient : false,
        opacity: 180,
        premultiplyAlpha: false,
        bounds: {
            l: 1000,
            r: 0,
            t: 1000,
            b: 0
        },
        debug: false,
        onRenderingStart: null,
        onRenderingEnd: null
    };

configure method:

   me.set("onRenderingStart", config.onRenderingStart || null);
   me.set("onRenderingEnd", config.onRenderingEnd || null);

The last thing is to call these callbacks if they are attached. I guess that the best place to do this is a setDataSet method:

   setDataSet: function(obj, internal){
        var me = this,
            heatmap = me.get("heatmap"),
            onRenderingStart = heatmap.get("onRenderingStart"),
            onRenderingEnd= heatmap.get("onRenderingEnd"),
            data = [],
            d = obj.data,
            dlen = d.length;

        if(typeof onRenderingStart === "function") {
            onRenderingStart(/* maybe it'd be a good idea to pass reference to heatmap or sth */);
        }

        // the rest of the code

        heatmap.colorize();
        this.set("data", d);

        if(typeof onRenderingEnd === "function") {
            onRenderingEnd(/* maybe it'd be a good idea to pass reference to heatmap or sth */);
        }
    }

Please note that I’ve not tested this solution and it may need some fixes and improvements. Hope it will help you.