How to use Heatmap Animation Example? #355
Description
I saw the code below the Heatmap Animation Example
.
But How can I use the example?
I try to add the code in html but ut not work.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Legend Example (DOM Legends) | heatmap.js</title>
<style>
body,
html,
h2 {
margin: 0;
padding: 0;
height: 100%;
}
body {
font-family: sans-serif;
}
body * {
font-weight: 200;
}
#heatmapContainerWrapper {
width: 100%;
height: 100%;
position: absolute;
background: rgba(0, 0, 0, 0.1);
}
#heatmapContainer {
width: 100%;
height: 100%;
}
#heatmapLegend {
background: white;
position: absolute;
bottom: 0;
right: 0;
padding: 10px;
}
#min {
float: left;
}
#max {
float: right;
}
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, 0.2);
}
</style>
</head>
<body>
<div class="timeline-wrapper"></div>
<div class="heatmap"></div>
<script src="/build/heatmap.js"></script>
<script>
window.onload = function () {
// creating a class to wrap the heatmap cycling logic
function AnimationPlayer(options) {
this.heatmap = options.heatmap
this.data = options.data
this.interval = null
this.animationSpeed = options.animationSpeed || 300
this.wrapperEl = options.wrapperEl
this.isPlaying = false
this.init()
}
// define the prototype functions
AnimationPlayer.prototype = {
init: function () {
var dataLen = this.data.length
this.wrapperEl.innerHTML = ''
var playButton = (this.playButton =
document.createElement('button'))
playButton.onclick = function () {
if (this.isPlaying) {
this.stop()
} else {
this.play()
}
this.isPlaying = !this.isPlaying
}.bind(this)
playButton.innerText = 'play'
this.wrapperEl.appendChild(playButton)
var events = document.createElement('div')
events.className = 'heatmap-timeline'
events.innerHTML = ''
for (var i = 0; i < dataLen; i++) {
var xOffset = (100 / (dataLen - 1)) * i
var ev = document.createElement('div')
ev.className = 'time-point'
ev.style.left = xOffset + '%'
ev.onclick = function (i) {
return function () {
this.isPlaying = false
this.stop()
this.setFrame(i)
}.bind(this)
}.bind(this)(i)
events.appendChild(ev)
}
this.wrapperEl.appendChild(events)
this.setFrame(0)
},
play: function () {
var dataLen = this.data.length
this.playButton.innerText = 'pause'
this.interval = setInterval(
function () {
this.setFrame(++this.currentFrame % dataLen)
}.bind(this),
this.animationSpeed
)
},
stop: function () {
clearInterval(this.interval)
this.playButton.innerText = 'play'
},
setFrame: function (frame) {
this.currentFrame = frame
var snapshot = this.data[frame]
this.heatmap.setData(snapshot)
var timePoints = $('.heatmap-timeline .time-point')
for (var i = 0; i < timePoints.length; i++) {
timePoints[i].classList.remove('active')
}
timePoints[frame].classList.add('active')
},
setAnimationData: function (data) {
this.isPlaying = false
this.stop()
this.data = data
this.init()
},
setAnimationSpeed: function (speed) {
this.isPlaying = false
this.stop()
this.animationSpeed = speed
},
}
var heatmapInstance = h337.create({
container: document.querySelector('.heatmap'),
})
// animationData contains an array of heatmap data objects
var animationData = []
// generate some heatmap data objects
for (var i = 0; i < 20; i++) {
animationData.push(generateRandomData(300))
}
var player = new AnimationPlayer({
heatmap: heatmapInstance,
wrapperEl: document.querySelector('.timeline-wrapper'),
data: animationData,
animationSpeed: 100,
})
}
</script>
</body>
</html>Thank you.