function drawBarChart(elmId, value) {
	clearCanvas(elmId);
	var canvas = document.getElementById(elmId);
	var ctx = canvas.getContext('2d');
	var heightRate = canvas.height / 200;

	var barWidth = canvas.width / value.length;
	var x = 0;
	for(var i = 0; i < value.length; i++) {
		var resCount = value[i];
		var barColor = "#0000ff";
		if(resCount > 50) {
			barColor = "#ffff00";
		}
		if(resCount > 150) {
			barColor = "#ff0000";
		}
		var barHeight = resCount > 200 ? 200 : resCount * heightRate;

		ctx.beginPath();
		ctx.fillStyle = barColor;
		ctx.fillRect(x,canvas.height-barHeight,barWidth,barHeight);

		x += barWidth;
	}

}

function drawPieChart(elmId, value) {
	clearCanvas(elmId);
	var canvas = document.getElementById(elmId);
	var ctx = canvas.getContext('2d');

	var radius = canvas.width / 2;
	var x = canvas.width / 2;
	var y = canvas.height / 2;

	var startAngle = - Math.PI / 2;
	for(var i = 0; i < value.length; i++) {
		if(value[i] < 0) {
			continue;
		}
		var angle = value[i] / 100 * 2 * Math.PI;
		var endAngle = startAngle + angle;

		var color = "#ffffff";
		switch(i) {
			case 0:
				color = "#CCCCFF";
				break;
			case 1:
				color = "#dddddd";
				break;
			case 2:
				color = "#FFCC66";
				break;
			case 3:
				color = "#99CC99";
				break;
			case 4:
				color = "#FFCCCC";
				break;
			case 5:
				color = "#99CCFF";
				break;
			case 6:
				color = "#66CCCC";
				break;
		}

		ctx.beginPath();
		ctx.fillStyle = color;
		ctx.arc(x,y,radius,startAngle,endAngle, angle == 2 * Math.PI);
		ctx.lineTo(x,y);
		ctx.fill();

		startAngle = endAngle;
	}
}

function drawLineChart(elmId, value, boardId, append) {
	if(!append) {
		clearCanvas(elmId);
	}
	var canvas = document.getElementById(elmId);
	var ctx = canvas.getContext('2d');

	var color = "#000000";
	switch(boardId) {
		case 12:
			color = "#CCCCFF";
			break;
		case 13:
			color = "#dddddd";
			break;
		case 14:
			color = "#FFCC66";
			break;
		case 15:
			color = "#99CC99";
			break;
		case 16:
			color = "#FFCCCC";
			break;
		case 17:
			color = "#99CCFF";
			break;
		case 18:
			color = "#66CCCC";
			break;
	}

	ctx.strokeStyle = color;
	ctx.lineWidth = 2;
	ctx.beginPath();

	var width = canvas.width / ((value.length < 13 ? 13 : value.length) - 1);
	var x = 0;
	for(var i = 0; i < value.length; i++) {
		var y = canvas.height - (canvas.height * value[i] / 100);
		if(i == 0) {
			ctx.moveTo(x,y);
		} else {
			ctx.lineTo(x,y);
		}
		x += width;
	}

	ctx.stroke();
}

function clearCanvas(elmId) {
	var canvas = document.getElementById(elmId);
	var ctx = canvas.getContext('2d');
	ctx.clearRect(0,0,canvas.width,canvas.height);
}