<!DOCTYPE html>
<html>
<head>
<title>Grafico de barras</title>
<script>
//variables
let pincel, pizarron;
let g2009 = [6, 47, 41, 3, 3];
let g2019 = [81, 9, 3, 3, 4];
let titulos = ["2009", "2019"];
let totalSeries = [g2009, g2019];
let coloresBarras = ["blue", "green", "yellow", "red", "purple"];
//funciones
//Funcion que se carga con la pagina, y es la que ejecuta todo
window.onload = function () {
pizarron = document.getElementById("pizarron");
pincel = pizarron.getContext("2d");
let ancho = pizarron.width;
let alto = pizarron.height;
let botoncito = document.getElementById("botoncito");
//carga el marco
automarco();
//manejador del botoncito
botoncito.onclick = function () {
imprimebarras(totalSeries);
poneTitulos(titulos);
}
}
//Funcion que limpia e canvas y redibuja el marco
function limpiarCanvas() {
let ancho = pizarron.width;
let alto = pizarron.height;
pincel.clearRect(0, 0, ancho, alto);
automarco();
}
//funcion que crea el marco alrededor del canvas, con un grosor determinado
function automarco() {
let ancho = pizarron.width;
let alto = pizarron.height;
let grosorLinea = 2;
pincel.fillStyle = "lightgrey";
pincel.fillRect(0, 0, ancho, alto);
pincel.fillStyle = "Black";
pincel.fillRect(0, 0, ancho, grosorLinea);//arriba
pincel.fillRect(0, 0, grosorLinea, alto);//izquierda
pincel.fillRect((ancho - grosorLinea), 0, grosorLinea, alto);//derecha
pincel.fillRect(0, (alto - grosorLinea), ancho, grosorLinea);//abajo
}
function poneTitulos(titulos){
let ancho = pizarron.width;
let alto = pizarron.height;
let textoX, textoY;
textoX = 10+7;
textoY = alto - 210;
for (let i = 0; i < titulos.length; i++) {
pincel.font = "15px Georgia";
pincel.fillStyle = "black";
pincel.fillText(titulos[i], textoX, textoY);
textoX = textoX +60;
}
}
//funcion que crea el grafico para una serie y con los colores dados como parametros ambos
//ambos arreglos tienen que ser iguales
function creaBarra(serie, colores, X) {
let ancho = pizarron.width;
let alto = pizarron.height;
let inicioX = X;
let anchoBarra = 50;
let inicioBarra = alto - 200;
//Pone la etiqueta
//recorre la serie
for (let idNavegador = 0; idNavegador < serie.length; idNavegador++) {
//se va a formar la grafica desde abajo, con y hasta el maximo alto y con x dando un espacio de 10 pixeles
pincel.fillStyle = colores[idNavegador];
pincel.fillRect(inicioX, inicioBarra, anchoBarra, serie[idNavegador] * 2);
inicioBarra = inicioBarra + (serie[idNavegador] * 2);
}
}
function imprimebarras(totalSeries) {
let separador = 10;
for (let i = 0; i < totalSeries.length; i++) {
creaBarra(totalSeries[i], coloresBarras, separador)
separador = separador + 60;
}
}
</script>
</head>
<body>
<header>
<h2>Final de clase, Grafico de barras - ^__^</h2>
</header>
<button id="botoncito">Puchale</button>
<br>
<br>
<canvas id="pizarron" width="800" height="400"></canvas>
<br>
</body>
</html>
