javascript - How to animate this peak chart? -

i'm new css , javascript, struggeling trying animate peak (bar) chart found on codepen... : http://codepen.io/anna_123/pen/qbqqqb

/* pie chart based on pen aaronlsilber (http://codepen.io/aaronlsilber/pen/iqrkl) based on article 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( = 0; < peakdata.length; i++) {          start = === 0 ? 0 : * plotbase - * 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'>      browser 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 create same graph animation in following example: http://codepen.io/boars/pen/bnafc, after quite trial , errors, don't succeed working... can me out here? ! :-)

just add animation loop around part draws triangular bars, so

var animationsteps = 60; var animationstepcounter = 0; var animation = setinterval(function () {     ctx.clearrect(0, 0, canvas.width, canvas.height);      (i = 0; < peakdata.length; i++) {         start = === 0 ? 0 : * plotbase - * overlap;         peakpoint = canvas.height - math.round(canvas.height * (peakdata[i] / max) * animationstepcounter / animationsteps);         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();     }      if (animationstepcounter === animationsteps)         clearinterval(animation);     else         animationstepcounter++; }, 10); 

all draw bars 60 times (waiting 10 ms between redraws), each time increasing height of bar till reaches actual height.

you can change 60 or 10ms if want animation proceed faster (reduce either or both) / smoother, etc.

---

codepen - http://codepen.io/anon/pen/mwqovg