Esse é meu código...
Demorei séculos para terminar... Ficou um resultado "okay"... Não sei se ficou igual ao gráfico do exercício... Fiz algumas coisinhas a mais ... Tive que aprender umas coisinhas a mais tipo um array object... Eu estava muito afim de fazer um desafio. Mesclei as ultima aulas com esse do gráfico para me gerar um gráfico do meu "banco de dados", ou seja, minha array object...
NASA ME CONTRATA - HEHEHE
<canvas width="600" height="400"></canvas>
<h1>Encontre os graficos <br> </h1> <input/> <button>Digite o ano</button>
<script>
function paint(sy, color){
var screen = document.querySelector("canvas");
var pincel = screen.getContext('2d');
pincel.fillStyle = color;
pincel.strokeStyle = 'Black';
pincel.fillRect(0,sy,50,400);
pincel.strokeRect(0,sy,50,400);
}
function rect (sy,id){
switch(id){
case 0:
paint(sy,"blue");
break;
case 1:
paint(sy,"red");
break;
case 2:
paint(sy,"green");
break;
case 3:
paint(sy,"yellow");
break;
}
}
function data (y,ix,id) {
var data = [{ id:"y2015",value:[50, 25, 20, 5]},{id:"y2016",value:[65,20,13,2] }];
var value = 'value';
if (data[ix][id] == y){
var datay = data[ix][value];
for (var i = 0 ; i < datay.length ; i++){
var pixel = 400-((datay[i]*400)/100);
rect(pixel,i);
continue;
}
}
}
var input = document.querySelector("input");
input.focus();
function years() {
var years = ["2015","2016"];
for (var i = 0; i < years.length ; i++){
if (years[i] == input.value){
data("y"+years[i],i,'id');
}
}
input.value="";
input.focus();
}
var button = document.querySelector("button");
button.onclick = years;
</script>