Graph-the-Spire/index.html at master · calbe-r/Graph-the-Spire · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html>
<html>

<head>
	<canvas id="myChart" width="500" height="500"></canvas>
	<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
	<script>
		var ctx = document.getElementById('myChart').getContext('2d');

		fetch("http://localhost:3000/json")
			.then(response => {
				if (response.status === 200) {
					return response.json();
				} else {
					throw new Error('Something went wrong on api server!');
				}
			})
			.then(response => {

				var chart = new Chart(ctx, {
					// The type of chart we want to create
					type: 'line', // also try bar or other graph types

					// The data for our dataset
					data: {
						labels: response.gold_per_floor.map((x, i) => i),
						datasets: [{
							label: "Gold",
							backgroundColor: 'lightblue',
							borderColor: 'royalblue',
							data: response.gold_per_floor
						}]
					},

					// Configuration options
					options: {
						layout: {
							padding: 10,
						},
						legend: {
							position: 'bottom',
						},
						title: {
							display: true,
							text: 'Gold Per Floor'
						}
					}
				});
			}).catch(error => {
				console.error(error);
			});

	</script>

</head>

<body>
	<form enctype='multipart/form-data' action='/json' method='POST'>
		<input type="hidden" name="MAX_FILE_SIZE" value="1000000" />
		Send this file: <input name="sampleFile" type="file" />
		<input type="submit" value="Send File" />
	</form>
</body>

</html>