graph interpolation example

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 = {
    color :"red",
    cont:0,
    numView:0,
    marginX:20,
    marginY:25,
    canvas:document.getElementById('canvas'),
    ctx:canvas.getContext('2d'),
    data:[{id:'coche',vals:[30]},
          {id:'moto',vals:[10]},
          {id:'avion',vals:[15]},
           {id:'tren',vals:[20]},
          {id:'tren',vals:[33]},
          {id:'bici',vals:[9]}],
    fig:[{id:'coche',color:'red',vals:[[0,0],[0,30],[10,30],[10,0]]}],
    colores:['#f55','#0A0','#07F','#fB0','#AAf','#f0f'],
    
    //////// RENDER //////////////////////
 render: function(requestFrame) {
    var _this=this;
   // if(requestFrame)
    //    window.requestAnimFrame(function(){_this.render(true);});

    this.cont=this.cont>300?0:this.cont+1;    ctx=this.ctx;
    ctx.fillStyle = '#EEE';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
     /*
    ctx.fillStyle = this.color;
    ctx.beginPath();
    ctx.arc(100+this.cont, 100 ,20,0,2*Math.PI,true);
    ctx.fill();*/
     if((this.numView % 2)==0){
         this.genFigPie();
         this.drawPie();
     }else{
       this.genFigBars();
       this.drawFig();
     }
},
    genFigPie:function(){
        var mx=this.marginX;
        var my=this.marginY;
        //Primero TOTAL y tanto por ciento para cada valor.
        var centerX=canvas.width /2;
        var centerY=canvas.height /2;
        var r=Math.min(centerX-mx,centerY-my);
        var yy=canvas.height;
        //Sin espacio entre barras x ahora
        var total=0;
        for(var i=0;i<this.data.length;i++){
            total=total+this.data[i].vals[0];
        };
        this.fig=[];
        var incG=Math.PI/4;
        for(var i=0;i<this.data.length;i++){
            var d=this.data[i];
            var val=d.vals[0];
            var obj={};
            obj['id']=d.id;
            obj.color=this.colores[i];
            var vals=[];
            vals[0]=centerX;
            vals[1]=centerY;
            vals[2]=r;
         ...