<!DOCTYPE html>
<html>
<head>
<title>Tax forms: Bar chart with lines</title>
<meta charset="UTF-8">
<script src="taxForms.js"></script>
</head>
<body>
<canvas id="chart" width="700" height="550"></canvas>
<script>
const canvas = document.getElementById('chart');
const context = canvas.getContext('2d');
/* Draw a line from (fromX, fromY) to (toX, toY) */
function drawLine(fromX, fromY, toX, toY) {
context.beginPath();
context.moveTo(toX, toY);
context.lineTo(fromX, fromY);
context.stroke();
}
/* Draw a text (string) on (x, y) */
function drawText(text, x, y) {
context.fillStyle = 'black';
context.fillText(text, x, y);
}
/* Draw a text and with a line to its right */
function drawLineWithText(text, fromX, fromY, toX, toY) {
drawText(text, fromX - 50, fromY + 10);
drawLine(fromX, fromY, toX, toY);
}
/* Insert your code here. */
/**
* Draw lines on the y axis of the canvas
*
* @param {number} n - Number of lines to draw
* @param {number} step - Number to add to y axis
*/
const drawNLines = (n, step) => {
for (let i = 1; i <= n; i++) {
const y = canvas.height * (n - i + 1 ) / (n+1);
const text = step * i;
drawLineWithText(text, 50, y, canvas.width - 100, y);
}
}
/**
* Draws a rectangle onto the canvas
*
* @param {number} x - x value of the upper left corner of the rectangle
* @param {number} y - y value of the upper left corner of the rectangle
* @param {number} width - Width of the rectangle
* @param {number} height - Height of the rectangle (DOWNWARDS)
* @param {string} color - Color of the rectangle
*/
const drawRectangle = (x, y, width, height, color='red') => {
context.fillStyle = color;
context.fillRect(x, y, width, height);
}
/**
* Cycle a list of colors
*
* @generator
*
* @param {string[]} colors - List of colors to cycle
* @yields {string} A color
*/
function* colorCycler(colors) {
let i = 0;
while (true) {
yield colors[i];
i = (i + 1) % colors.length;
}
}
/**
* Draw a legend on the canvas
*
* @param {string[]} properties - An array of labels
* @param {[string[]} colorList - An array of colors to cycle when making labels
*/
const drawLabels = (properties, colorList) => {
const colors = colorCycler(colorList);
const drawLabel = (text, color, y) => {
drawText(text, canvas.width-45, y + 15)
drawRectangle(canvas.width - 90, y, 40, 20, color);
}
const yOffset = canvas.height / 12
for (i in properties) {
drawLabel(properties[i], colors.next().value, yOffset+30*i);
}
}
drawNLines(10, 100000);
const taxData = taxForms;
taxData.forEach(form => delete form.realName);
drawLabels(Object.getOwnPropertyNames(taxData[0]), ['red', 'blue']);
</script>
</body>
</html>