Commit 5c362e1e authored by Kjetil Thuen's avatar Kjetil Thuen
Browse files

Added play/pause button

parent fc7d1f62
......@@ -5,6 +5,7 @@ chartWidth = -> 900
chartHeight = -> 500
numBars = -> 100
speed = -> 100
margin = -> 10
next = (prev) ->
prv = (if prev?rvalue then prev.rvalue else 25)
......@@ -26,7 +27,6 @@ y = d3.scale.linear()
.rangeRound [ 0, chartHeight() ]
addBar = (newBar) ->
console.log "Adding a bar"
barGroup = newBar.append "g"
.attr "class", "valuepoint"
.attr "transform", (d, i) ->
......@@ -34,13 +34,13 @@ addBar = (newBar) ->
barGroup.append "rect"
.attr "class", "right"
.attr "x", chartWidth() / 2
.attr "x", chartWidth() / 2 - margin()
.attr "width", (d) -> x d.rvalue
.attr "height", barThickness()
barGroup.append "rect"
.attr "class", "left"
.attr "x", (d) -> (chartWidth() / 2) - x d.lvalue
.attr "x", (d) -> (chartWidth() / 2) - x d.lvalue + margin()
.attr "width", (d) -> x d.lvalue
.attr "height", barThickness()
......@@ -74,16 +74,27 @@ setupChart = (containerId, data) ->
updateData = (data) ->
lodash.rest(lodash.clone(data).concat(next(lodash.last(data))))
# State (data and intervals) stored in the window object
window.initTimeBars = (containerId) ->
window._ = lodash
window.data = d3.range numBars()
.map ->
next lodash.last(window.data)
setupChart(containerId, window.data)
setInterval ->
data = updateData window.data
updateChart(containerId, data)
window.data = data
, speed()
updateChart(containerId, data)
window.animateBarChart = (containerId) ->
if window.timeBarAnim?
console.log("stopp")
clearInterval(window.timeBarAnim)
window.timeBarAnim = undefined
document.getElementById("playBtn").innerHTML = "<i class='fa fa-play'></i>"
else
console.log("start")
window.timeBarAnim = setInterval ->
data = updateData window.data
updateChart(containerId, data)
window.data = data
, speed()
document.getElementById("playBtn").innerHTML = "<i class='fa fa-pause'></i>"
undefined
......@@ -3,8 +3,8 @@
<head>
<title>Nesstar backed animated barcharts</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<link href="css/timebars.css" rel="stylesheet">
<script src="js/timebars.js"></script>
</head>
......@@ -17,6 +17,9 @@
<div>&nbsp;</div>
<div>&nbsp;</div>
<section id="content"> </section>
<button id="playBtn" class="btn btn-primary" onclick="window.animateBarChart('#content')">
<i class="fa fa-play"></i>
</button>
<script>
window.initTimeBars("#content");
</script>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment