heatmap.js
Version:
Dynamic JavaScript Heatmaps for the Web
62 lines (52 loc) • 2.23 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title>SvgAreaHeatmap Plugin Example</title>
<style>
body, html { margin:0; padding:0; height:100%; font-family:Arial;}
#heatmapContainerWrapper { width:100%; height:100%; position:absolute; }
#heatmapContainer { width:100%; height:100%;}
h1 { position:absolute; background:black; color:white; padding:10px; font-weight:200;}
#all-examples-info { position:absolute; background:white; font-size:16px; padding:20px; top:100px; width:350px; line-height:150%; border:1px solid rgba(0,0,0,.2);}
img { background:black; }
</style>
</head>
<body>
<div id="heatmapContainerWrapper">
<div id="heatmapContainer">
</div>
</div>
<h1>Adding datapoints in real time with heatmap.js</h1>
<div id="all-examples-info">
<strong style="font-weight:bold;line-height:200%;font-size:18px;">Looking for more examples?</strong> <br />Check out the full <a href="http://www.patrick-wied.at/static/heatmapjs/examples.html?utm_source=gh_local" target="_blank">list of all heatmap.js examples</a> with more pointers & inline documentation.
</div>
<script src="/build/heatmap.js"></script>
<script src="/plugins/svg-area-heatmap.js"></script>
<script>
window.onload = function() {
// create heatmap instance
var heatmap = h337.create({
container: document.getElementById('heatmapContainer'),
svgUrl: 'austria.svg',
plugin: 'SvgAreaHeatmap'
});
window.heatmap = heatmap;
window.randomize = function(){
var max = (Math.random()*100) >> 0;
var dataPoints = [];
var dataKeys = ['oberoesterreich', 'niederoesterreich', 'wien', 'burgenland', 'kaernten', 'steiermark', 'tirol', 'vorarlberg', 'salzburg'];
for (var i = 0; i < dataKeys.length; i++) {
dataPoints.push({ id: dataKeys[i], value: max - (Math.random() * max/2) >> 0 });
}
heatmap.setData({
max: max,
min: 0,
data: dataPoints
});
};
randomize();
};
</script>
</body>
</html>