<canvas width = "600" height = "400"></canvas>
<script>
var serie2015 = [50, 25, 20, 5];
var serie2016 = [65, 20, 13, 2];
var cores = ["blue", "green", "yellow", "red"];
function desenhaRetangulo(x, y, largura, altura, cor) {
var tela = document.querySelector("canvas");
var pincel = tela.getContext ("2d");
pincel.fillStyle = cor;
pincel.fillRect(x, y, largura, altura);
pincel.strokeStyle = "black";
pincel.strokeRect(x, y, largura, altura);
}
function desenhaTexto(x, y, texto) {
var tela = document.querySelector("canvas");
var pincel = tela.getContext("2d");
pincel.font= "15px Georgia";
pincel.fillStyle = "black";
pincel.fillText(texto, x, y);
}
function desenhaBarra (x, y, serie, cores, texto) {
if(serie == serie2015){
desenhaRetangulo(x, y, largura=x, altura=serie2015[0], cores[0], texto);
desenhaRetangulo(x, y+50, largura=x, altura=serie2015[1], cores[1], texto);
desenhaRetangulo(x, y+75, largura=x, altura=serie2015[2], cores[2], texto);
desenhaRetangulo(x, y+95, largura=x, altura=serie2015[3], cores[3], texto);
desenhaTexto(x, y+115, texto);
} else {
desenhaRetangulo(x, y,largura=50, altura=serie2016[0], cores[0], texto);
desenhaRetangulo(x, y+65, largura=50, altura=serie2016[1], cores[1], texto);
desenhaRetangulo(x, y+85, largura=50, altura=serie2016[2], cores[2], texto);
desenhaRetangulo(x, y+98, largura=50, altura=serie2016[3], cores[3], texto);
desenhaTexto(x, y+115, texto);
}
}
desenhaBarra (50, 50, serie2015, cores, "2015");
desenhaBarra (150, 50, serie2016, cores, "2016");
</script>