Gráficos.

Assim ficou minha programação. Sei que pode ser melhorada, mas ainda não sei como melhorar, imagino que muitos desses usando looping melhora bastante, mas preciso melhorar meu conhecimento sobre o assunto. Porém vamos aprendendo:

<canvas width="1200" height="800"></canvas> 

<script>

    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');



    function desenhaBarra(x,y,cor,comprimento,altura) {

        pincel.fillStyle = cor;
        pincel.fillRect(x,y,comprimento,altura);
        pincel.strokeStyle = "black";
        pincel.strokeRect(x,y,comprimento,altura);
    }

    function desenhaTexto(x,y,texto,fonte) {

        pincel.font = fonte
        pincel.fillStyle = 'black';
        pincel.fillText(texto,x,y);
    }    

    function grafico(x1,y1,x2,y2,p1,p2,p3,p4) {            //p1 = % azul, p2 = % amarelo, p3 = % verde, p4 = % vermelho)

        desenhaBarra(x1,y1,'blue',x2,(p1*y2));
        desenhaBarra(x1,y1+(p1*y2),'yellow',x2,(p2*y2));
        desenhaBarra(x1,y1+(p1*y2)+(p2*y2),'green',x2,(p3*y2));
        desenhaBarra(x1,y1+(p1*y2)+(p2*y2)+(p3*y2),'red',x2,(p4*y2));
    }

    function legenda(y,texto,cor){

        desenhaBarra(100,y,cor,20,20);
        desenhaTexto(130,y+15,texto,"20px Georgia");    

    }

    grafico(100,100,100,200,0.5,0.25,0.2,0.05);
    grafico(300,100,100,200,0.65,0.2,0.13,0.02);

    desenhaTexto(115,80,"2015","30px Georgia");
    desenhaTexto(315,80,"2016","30px Georgia");

    legenda(400,"Chrome",'blue');
    legenda(430,"Firefox",'yellow');
    legenda(460,'Safari','green');
    legenda(490,'Outros','red');

</script>