graph interpolation with Arc

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:400,//miliseconds
    initT:new Date(),
    updating:false,
    initFig:'pie',
    endFig:'pie', 
    inc:0.02,
    cont:0,
    numView:0,
    marginX:20,
    marginY:25,
    figs:['pie','bar','semiPie','donut'],
    canvas:document.getElementById('canvas'),
    ctx:canvas.getContext('2d'),
    data:[{id:'coche',vals:[110]},
         {id:'moto',vals:[30]},
       {id:'moto',vals:[22]},
          {id:'KTP',vals:[44]},
          {id:'rrr',vals:[14]},
          {id:'patin',vals:[6]},
        {id:'avion',vals:[150]},
          {id:'skate',vals:[14]},
          {id:'skate2',vals:[140]},
          {id:'KTP',vals:[24]},
          {id:'rrr',vals:[14]},
          {id:'patin',vals:[6]},
          {id:'tren',vals:[90]},
          {id:'bici',vals:[50]}],
    fig:[{id:'coche',color:'red',vals:[[0,0],[0,30],[10,30],[10,0]]}],
    colores:['#f55','#0A0','#07F','#fB0','#AAf','#f0f','#0ff','#AfA','#AD0','#f0A'],
    
    //////// 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;
        if(this.t>=1) { this.t=1; this.updating=false;}
        this.redraw();
    }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.drawFigs2(fig);
    //this.drawPointsFigs2(fig);
  },
    
    drawFigs2:function(figs){
        //console.log('drawFig:'+figs.length);
       ...