Mapping Heatmap to click event
HTML
<script src="https://raw.github.com/pa7/heatmap.js/master/heatmap.js"></script>
<div id="heatmap" style="width:400px;height:400px;background:#333333;">
</div>
JavaScript
var data = [{point:[0,0],value:1,url:'http://www.google.com'},
{point:[0,1],value:2,url:'http://www.yahoo.com'},
{point:[1,0],value:5,url:'http://www.apple.com'},
{point:[1,1],value:10,url:'http://www.netflix.com'}];
var config = {
"radius": 30,
"element": "heatmap",
"visible": true,
"opacity": 40,
"gradient": {
0.45: "rgb(0,0,255)",
0.55: "rgb(0,200,255)",
0.65: "rgb(0,255,0)",
0.95: "yellow",
1.0: "rgb(255,0,0)"
}
};
var heatMap = $("#heatmap"),
offsetX = heatMap.width() / 4,
offsetY = heatMap.height() / 4,
heatmap = heatmapFactory.create(config);
function isInHeat(x, y, center_x, center_y) {
return Math.pow((x-heatMap.offset().left-center_x),2) +
Math.pow((y-heatMap.offset().top-center_y),2) <
Math.pow(config.radius,2);
}
heatmap.store.setDataSet({
max: 10,
data: data.map(function(e) {
// map each element to heat map data and attach event handler to heatmap
var center_x = e.point[0] * offsetX + offsetX;
var center_y = e.point[1] * offsetY + offsetY;
var radius = 30;
var url = e.url;
// handle click event for current element
$("#heatmap").click(function(event) {
if (isInHeat(event.pageX, event.pageY, center_x, center_y)){
window.open(url, "_blank");
return false;
}
});
return {
x: center_x,
y: center_y,
count: e.value
};
})
});