graph interpolation example 2

by jpeter06

HTML

<canvas id="canvas"></canvas>

CSS

* { margin:0; padding:0; } /* to remove the top and left whitespace */
html, body { width:100%; height:100%; } /* j full screen*/
canvas { display:block; } /* remove  scrollbars */
canvas {    background: #eee;}

JavaScript

//////////////////DRAWER //////////////////////
var Drawer = {
    ang90:Math.PI*0.5,
    color :"red",
    t:0,
    ttime:4000,//miliseconds
    initT:new Date(),
    updating:false,
    initFig:'bar',
    endFig:'bar',
    inc:0.02,
    cont:0,
    numView:0,
    marginX:20,
    marginY:25,
    canvas:document.getElementById('canvas'),
    ctx:canvas.getContext('2d'),
    data:[//{id:'coche',vals:[30]},
   //      {id:'moto',vals:[22]},
  //      {id:'moto',vals:[22]},
   //       {id:'avion',vals:[15]},
          {id:'skate',vals:[14]},
     //     {id:'patin',vals:[6]},
   //       {id:'tren',vals:[30]},
          {id:'bici',vals:[19]}],
    fig:[{id:'coche',color:'red',vals:[[0,0],[0,30],[10,30],[10,0]]}],
    colores:['#f55','#0A0','#07F','#fB0','#AAf','#f0f','#0ff','#AfA'],
    
    //////// RENDER //////////////////////
 render: function(requestFrame) {
    var _this=this;
    if(requestFrame)
       window.requestAnimFrame(function(){_this.render(true);});
     
    if(this.updating){
        this.t=(new Date().getTime()-this.initT.getTime())/this.ttime;
        this.redraw();
        if(this.t>=1) { this.t=1; this.updating=false;}
      //this.t=this.t+this.inc;

    }else{
        this.redraw();
    }

},
    genInitFigs:function(){
        this.fig1=this.getFig(this.initFig);
        this.fig2=this.getFig(this.endFig);
        this.fig=this.fig1; //
       this.adaptFigs();
    },
    
    redraw:function(){
    ctx=this.ctx;
    ctx.fillStyle = '#EEE';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    
    var fig=this.interpolate2(this.tfig1,this.tfig2,this.t);
    //this.drawPoints(fig);
    this.drawFigs2(fig);
        this.drawPointsFigs2(fig);
    },
    
    drawFigs2:function(figs){
        //console.log('drawFig:'+figs.length);
        this.drawText('Pie','Gray',10,10,12);
        ctx.strokeStyle = "#fff";
        ctx.lineWidth = 0;
        for(var i=0;i<figs.length;i++){
            var fig=figs[i];
            var vals=fig.vals;
    ...