heatmap.js is not rendering in my website

Question

I am trying heat map for my app, but I think there is something missing in my code because it's not working.

JSFiddle

Below is my code:

<div  class="example-1" style="position: relative;">
    <canvas id="heatmapf" width="320" height="270" style="position: absolute; left: 0px; top: 0px;"></canvas>
</div>

<script>
    var domElement = document.getElementById( "heatmapf" );
    var heatmap = h337.create({
        container: domElement
    });

    heatmap.setData({
        max: 5,
        data: [{ x: 10, y: 15, value: 5}, { x: 20, y: 25, value: 8}]
    });
</script>

I am new to this heat map and want a very basic example in my app. Any help will be appreciated.

Answer 1

creator of heatmap.js here. It seems that you are trying to use the <canvas> element as a heatmap container.

That won't work because heatmap.js automatically appends its own <canvas> to the container element thus you'd need a container element such as <div>, <p> so you should rather pass

document.querySelector( ".example-1" );

as the container element. If it still doesn't work you most likely have not set a container size (the container element should either have a width, height set, or width and height should be passed in the heatmap configuration.

You can also find more basic heatmap examples on the heatmap.js website