As a newcomer to CSS and Javascript, I am currently struggling with animating a peak (bar) chart that I came across on codepen. If anyone can provide assistance or guidance, it would be greatly appreciated! The chart can be found here: http://codepen.io/Anna_123/pen/QbQqQb
/* Pie chart based on the pen by aaronlsilber (http://codepen.io/aaronlsilber/pen/IqrkL) which is based on an article by James Litten (http://html5.litten.com/graphing-data-in-the-html5-canvas-element-part-iv-simple-pie-charts/) */
/* Peak Chart Javascript
=====================================================================*/
var peakColors = ['rgb(236, 208, 120)', 'rgba(217, 91, 67, 0.7)', 'rgba(192, 41, 66, 0.7)', 'rgba(84, 36, 55, 0.7)', 'rgba(83, 119, 122, 0.7)', 'rgba(119, 146, 174, 0.7)'];
function drawPeakChart(canvasId) {
var i, start, peakPoint,
canvas = document.getElementById(canvasId),
peakData = canvas.dataset.values.split(',').map(function(x) { return parseInt(x, 10) }),
ctx = canvas.getContext('2d'),
max = Math.max.apply(Math, peakData),
plotBase = canvas.width / peakData.length,
overlap = plotBase * .4;
plotBase += canvas.width * .05;
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (i = 0; i < peakData.length; i++) {
start = i === 0 ? 0 : i * plotBase - i * overlap;
peakPoint = canvas.height - Math.round(canvas.height * (peakData[i] / max));
ctx.fillStyle = peakColors[i];
ctx.beginPath();
ctx.moveTo(start, canvas.height);
ctx.lineTo(start + plotBase * .5, peakPoint);
ctx.lineTo(start + plotBase, canvas.height);
ctx.lineTo(start, canvas.height);
ctx.fill();
}
}
drawPeakChart('canPeak');body {
font: normal normal 400 1rem/1.5 "Segoe UI", "Helvetica Neue", "DejaVu Sans", Helvetica, Arial, sans-serif;
}
aside {
float: left;
margin-right: 100px;
}
.chart {
margin-bottom:0;
margin-top:0;
}
.vert > canvas, .vert > ol {
display:inline-block
}
.horiz > li {
display: inline;
padding-right: 20px;
}
.legend {
vertical-align:top;
padding-left:15px;
list-style: none;
}
.key {
position:relative;
}
.key:before {
content:"";
position:absolute;
top:35%;
left:-15px;
width:10px;
height:10px;
}
.one:before{background:rgb(236, 208, 120)}
.two:before{background:rgba(217, 91, 67, 0.7)}
.three:before{background:rgba(192, 41, 66, 0.7)}
.four:before{background:rgba(84, 36, 55, 0.7)}
.five:before{background:rgba(83, 119, 122, 0.7)}
.six:before{background:rgba(119, 146, 174, 0.7)}<aside class="chart">
<canvas id="canPeak" width="300" height="200" data-values='40, 30, 20, 60, 10, 50'>
This browser does not support HTML5 Canvas.
</canvas>
<ol class="legend horiz">
<li class="key one">One</li>
<li class="key two">Two</li>
<li class="key three">Three</li>
<li class="key four">Four</li>
<li class="key five">Five</li>
<li class="key six">Six</li>
</ol>
</aside>I am attempting to replicate the animated graph seen in this example: http://codepen.io/boars/pen/bnAfC, but despite my best efforts so far, I have been unsuccessful. Any assistance or advice would be much appreciated. Thank you! :-)