62 lines
2.2 KiB
HTML
62 lines
2.2 KiB
HTML
|
<!DOCTYPE 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>
|