<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Maths Example</title>
<link rel="stylesheet" type="text/css" href="stylesheet_coding.css">
</head>
<body>
<b class="title">Favourite Colour of Each Student from Red, Yellow, Blue, Pink, Green and Orange</b>
<br>
<canvas id="myCanvas" width="900" height="600" style="border:2px solid #000000;">Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var drawing = canvas.getContext("2d");
drawing.moveTo(100, 500);
drawing.lineTo(100, 50);
drawing.stroke();
drawing.moveTo(100, 500);
drawing.lineTo(800, 500);
drawing.stroke();
//Y Axis Headings code below
var start_position_y = 500;
for (var y = 0; y < 9; y++) {
drawing.moveTo(100, start_position_y);
drawing.lineTo(80, start_position_y);
drawing.stroke();
drawing.font = "14px Arial";
drawing.fillStyle = "black";
drawing.fillText(y, 70, start_position_y);
start_position_y = start_position_y - 50;
}
drawing.font = "10px Arial";
drawing.fillStyle = "black";
drawing.fillText("Frequency", 10, 300);
//X Axis Headings code below
var start_position_x = 100;
var x_axis_titles = ["Red", "Yellow", "Blue", "Pink", "Green", "Orange"];
for (var x = 0; x < 7; x++) {
drawing.moveTo(start_position_x, 500);
drawing.lineTo(start_position_x, 520);
drawing.stroke();
if (x < 6) {
drawing.font = "14px Arial";
drawing.fillStyle = "black";
drawing.fillText(x_axis_titles[x], start_position_x + 30, 520);
}
start_position_x = start_position_x + 100;
}
drawing.font = "10px Arial";
drawing.fillStyle = "black";
drawing.fillText("Colours", 400, 550);
//reset_graph function backs the graph bars blank
function reset_graph() {
drawing.fillStyle = "white";
drawing.fillRect(100, 500, 800, (-50 * 9));
return 0;
}
function create_graph() {
reset_graph();
var red_frequency = document.forms["update_graph"]["red_frequency"].value * -50;
var yellow_frequency = document.forms["update_graph"]["yellow_frequency"].value * -50;
var blue_frequency = document.forms["update_graph"]["blue_frequency"].value * -50;
var pink_frequency = document.forms["update_graph"]["pink_frequency"].value * -50;
var green_frequency = document.forms["update_graph"]["green_frequency"].value * -50;
var orange_frequency = document.forms["update_graph"]["orange_frequency"].value * -50;
drawing.fillStyle = "red";
drawing.fillRect(100, 500, 100, red_frequency);
drawing.fillStyle = "yellow";
drawing.fillRect(200, 500, 100, yellow_frequency);
drawing.fillStyle = "blue";
drawing.fillRect(300, 500, 100, blue_frequency);
drawing.fillStyle = "pink";
drawing.fillRect(400, 500, 100, pink_frequency);
drawing.fillStyle = "green";
drawing.fillRect(500, 500, 100, green_frequency);
drawing.fillStyle = "orange";
drawing.fillRect(600, 500, 100, orange_frequency);
return 0;
}
</script>
<form method="post" name="update_graph" action="">
<table class="data_table">
<tr>
<td class="table_title"><b>Favourite Colour</b></td>
<td class="table_title"><b>Frequency</b></td>
</tr>
<tr>
<td>Red</td>
<td><input type="number" name="red_frequency" class="input_box" value="0" min="0" max="8" onchange="return create_graph()"/></td>
</tr>
<tr>
<td>Yellow</td>
<td><input type="number" name="yellow_frequency" class="input_box" value="0" min="0" max="8" onchange="return create_graph()"/></td>
</tr>
<tr>
<td>Blue</td>
<td><input type="number" name="blue_frequency" class="input_box" value="0" min="0" max="8" onchange="return create_graph()"/></td>
</tr>
<tr>
<td>Pink</td>
<td><input type="number" name="pink_frequency" class="input_box" value="0" min="0" max="8" onchange="return create_graph()"/></td>
</tr>
<tr>
<td>Green</td>
<td><input type="number" name="green_frequency" class="input_box" value="0" min="0" max="8" onchange="return create_graph()"/></td>
</tr>
<tr>
<td>Orange</td>
<td><input type="number" name="orange_frequency" class="input_box" value="0" min="0" max="8" onchange="return create_graph()"/></td>
</tr>
<tr>
<td colspan="2"><input type="reset" class="reset_button" value="Reset All Values and Graph" onclick="return reset_graph();"></td>
</tr>
</table>
</form>
</body>
</html>