-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathscores-by-call.php
146 lines (116 loc) · 3.72 KB
/
scores-by-call.php
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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<!DOCTYPE html>
<head>
<title>CWops Award Scores (ACA, ACMA, CMA, DXCC, WAS, WAE, WAZ)</title>
<link rel="stylesheet" type="text/css" href="/style.css">
</head>
<h2>Sortable and searchable table</h2>
<a href="/">Back</a> - <a href="/scores">Score overview</a><br><br>
<?php
session_start();
include("functions.php");
?>
<?
echo score_table_by_call();
?>
<div style="position:fixed;top:50px;left:550px">
<h2>ACA Graph</h2>
<canvas id="c" width="800" height="600"></canvas>
<p>The graph shows the ACA score of the selected station(s) on each week's Tuesday (i.e. before the CWTs) of the current year, and the latest/current score.</p>
</div>
<script>
var plot_calls = ["<? if ($_SESSION['callsign']) { echo $_SESSION['callsign']; } else { echo "DJ5CW"; }?>"];
var plot_colors = {};
function rc (c) {
if (plot_colors[c]) {
// nothing :-)
}
else {
var a = '0123456789';
var ret = '#';
for (var i = 0; i < 6; i++) {
ret += a[Math.floor(Math.random() * a.length)];
}
plot_colors[c] = ret;
}
return plot_colors[c];
}
// called when a checkbox changes
function plot_update(c, e) {
console.log("plot_update: " + c + " " + e);
console.log(plot_calls);
var j = plot_calls.indexOf(c);
if (e == false) {
if (j >= 0) {
plot_calls.splice(j, 1);
}
}
else {
if (j == -1) {
plot_calls.push(c);
}
}
console.log(plot_calls);
plot();
}
function plot() {
console.log("plot...");
var request = new XMLHttpRequest();
var pc = plot_calls.join(",");
request.open("GET", "/api.php?action=plot&type=ACA&year=2025&calls="+pc, true);
request.onreadystatechange = function() {
var done = 4, ok = 200;
if (request.readyState == done && request.status == ok) {
var data = JSON.parse(request.responseText);
var c = document.getElementById('c');
var ctx = c.getContext("2d");
var w = c.width;
var h = c.height;
ctx.clearRect(0,0, w, h);
ctx.fillStyle = '#efefef';
ctx.fillRect(0,0, w, h);
// find max value for scaling
var max = 0;
for (call in data) {
data[call].forEach(d => { d = parseInt(d); if (d > max) { max = d; } });
}
// set top value to next full 500
var max = max - max % 500 + 500;
// horizontal: keep 100 pixels at the end for callsigns
var hw = w - 50;
// draw a horizontal line for each 500
ctx.strokeStyle = '#999999';
for (var i = 500; i < max; i += 500) {
ctx.fillStyle = 'black';
ctx.fillText(i, 0, h - h/max * i + 4);
ctx.beginPath();
ctx.moveTo(30, h - h/max * i);
ctx.lineTo(hw, h - h/max * i);
ctx.stroke();
}
for (call in data) {
ctx.beginPath();
var xpos = 0;
var ypos = h;
ctx.moveTo(xpos,ypos);
for (var i = 0; i < data[call].length; i++) {
xpos = i * (hw / 52);
ypos = h - h/max * data[call][i];
ctx.lineTo(xpos, ypos);
ctx.arc(xpos, ypos, 1, 0, Math.PI * 2, true);
ctx.lineTo(xpos, ypos);
}
var col = rc(call);
ctx.strokeStyle = col;
ctx.stroke();
ctx.fillStyle = col;
ctx.fillText(call, xpos + 5, ypos + 3);
ctx.stroke();
}
}
}
request.send();
}
plot();
</script>
<br>
<a href="/">Back</a>