graph

HTML

<button onclick="teste()">teste</button>

<div id="ctn" style="width:50%;margin:auto"></div>

<div id="legende" style="float:right;margin-right:30%;padding:10px"></div>

CSS

body {
  background-color: gray;
}

.deco {
  display: inline-block;
  border: solid 1px;
}

JavaScript

var echelle=5;
var largeur=2;

var data=[
			{ matiere: "math", y: 3 },
			{ matiere: "francais", y: 11 },
			{ matiere: "science", y: 14 },
			{ matiere: "anglais", y: 16 },
			{ matiere: "histoire", y: 19 },
			{ matiere: "javascript", y: 20 },
			{ matiere: "geographie", y: 12 },
			{ matiere: "css", y: 10 }
			];
			
var couleur=['red','blue','green','brown','yellow','purple','orange','white'];

function teste(){


	for(var i=0; i<data.length;i++){
	
	var rect=document.createElement("div");
		rect.className="deco";
		rect.style.left=largeur*i*echelle+"%";
		rect.style.width=largeur*echelle+"%";
		rect.style.height=data[i].y*echelle+"px";
		rect.style.backgroundColor=couleur[i];

		document.getElementById("ctn").appendChild(rect);
		
		var leg=document.createElement("div");

		leg.style.width=10+"px";
		leg.style.height=10+"px";
		leg.style.backgroundColor=couleur[i];

		document.getElementById("legende").appendChild(leg);
		
		var texte=data[i].matiere+" : "+data[i].y
		
		var txt=document.createTextNode(texte);
		
		document.getElementById("legende").appendChild(txt);
	}
}