Skip to content

Commit

Permalink
Data sports (#203)
Browse files Browse the repository at this point in the history 
* Sports Request - Swimmers

* changes to sports-swimming

* changed m to yards

* Sports swimming request editor upload

* backstroke/illinois

* changed record times

* Final

---------

Co-authored-by: ayukadakia <ayukadakia@gmail.com>
  • Loading branch information
@cjunwon @ayukadakia
cjunwon and ayukadakia committed Apr 23, 2024
1 parent 6675dd9 commit 3c802b4
Show file tree
Hide file tree
Showing 8 changed files with 875 additions and 0 deletions.
79 changes: 79 additions & 0 deletions collaborations/sports-swimming-2024/IM.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>chart.js</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!-- <link rel="stylesheet" href="styles.css"> -->
<style>
div{
font-family: 'PT Sans'; /*default font, change if requested*/
}
.header{
font-size: 20px;
text-align: center;
align-content: center;
}
.explainer{
font-size: 16px;
padding-left: 10px;
padding-right: 10px;
}
.chart{
margin: 1%;
margin-top: -1%;
}
hr{
border: white solid 1px;
}
.byLine{
font-size: 10px;
text-align: center;
}
.viz_box{
border: 2px white solid
}
@media only screen and (max-width: 800px) {
.chart{
display: 'block';
width: 98% !important;
float: left;
height: 400px;
}
}
@media only screen and (min-width: 800px) {
.chart{
display: 'block';
width: 98% !important; /*CHANGE THIS IF THERE IS MORE THAN ONE CHART */
float: left;
height: 500px;
}
.viz_box{
width: 100%;
height: 100%;
}}
</style>
</head>

<body>
<div class = "selectBox" >
<select id = "studentType">
<option value="sportGraph2"
label = "400 Yards" selected></option>
<option value="sportGraph"
label = "200 Yards" selected></option>
</select>
</div>




<div class = "chartBox" >
<canvas id="sportGraph2" width="400" height="320"></canvas>
</div>

<script src="IM.js"></script>
</body>


</html>
292 changes: 292 additions & 0 deletions collaborations/sports-swimming-2024/IM.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,292 @@
Chart.defaults.font.family = 'PT Sans';
const ctxt2 = document.getElementById('sportGraph2');
const pointImage = new Image(25, 25);
pointImage.src = 'icons8-star-48.png';
const costGraph2 = new Chart(ctxt2, {
type: 'line',
data: {
labels: [
'Fresno State Invite',
'Washington State Dual Meet',
'UC Santa Barbara Dual Meet',
'Illinois Dual Meet',
'Arizona State Dual Meet',
'Arizona Dual Meet',
'Art Adamson Invitational',
'UC San Diego-Wisconsin Tri-Meet',
'Utah Dual Meet',
'Stanford Dual Meet',
'California Dual Meet',
'USC Dual Meet',
'Pac-12 Championship Preliminary Round',
'Pac-12 Championship Finals',
'NCAA Preliminary Round',
'NCAA Finals',
],
datasets: [
{
label: 'Rosie Murphy',
data: [
124.38,
null,
123.55,
123.55,
121.92,
null,
117.93,
123.34,
122.95,
null,
121.64,
117.45,
115.93,
116.41,
116.32,
null,
],
backgroundColor: ['#191970'],
borderColor: ['#191970'],
spanGaps: true,
pointStyle: [
'circle',
'circle',
'circle',
'circle',
'circle',
'circle',
'circle',
'circle',
'circle',
'circle',
'circle',
'circle',
pointImage,
'circle',
'circle',
],
},
{
label: 'Paige MacEachern',
data: [
null,
null,
123.66,
null,
119.53,
null,
117.2,
122.99,
122.71,
null,
124.01,
119.27,
115.97,
116.29,
118.16,
null,
],
backgroundColor: ['#F07857'],
borderColor: ['#F07857'],
spanGaps: true,
pointStyle: [
'circle',
'circle',
'circle',
'circle',
'circle',
'circle',
'circle',
'circle',
'circle',
'circle',
'circle',
'circle',
pointImage,
'circle',
'circle',
],
},
{
label: 'School Record-Breaking Times',
backgroundColor: ['#939033'],
borderColor: ['#939033'],
},
],
},
options: {
scales: {
y: {
min: 115,
title: {
display: true,
text: 'Time in Seconds',
},
},
},
plugins: {
legend: {
display: true,
title: {
display: true,
text: ['UCLA Swimmers', 'IM'],
padding: 20,
font: {
size: 20,
},
},
},
},
},
});
const selectElement = document.querySelector('select');
selectElement.addEventListener('change', changeGraph);
function changeGraph() {
if (selectElement.value === 'sportGraph2') {
costGraph2.data.datasets[0].data = [
262.52,
264.46,
null,
null,
null,
255.93,
250.67,
null,
null,
257.03,
null,
null,
248.88,
246.0,
246.23,
245.01,
];
costGraph2.data.datasets[1].data = [
261.04,
null,
null,
null,
null,
253.92,
246.15,
null,
null,
259.71,
null,
null,
248.47,
243.47,
245.38,
248.95,
];
costGraph2.options.scales.y.min = 242;
costGraph2.data.datasets[0].pointStyle = [
[
'circle',
'circle',
'circle',
'circle',
'circle',
'circle',
'circle',
'circle',
'circle',
'circle',
'circle',
'circle',
'circle',
'circle',
'circle',
],
];
costGraph2.data.datasets[1].pointStyle = [
'circle',
'circle',
'circle',
'circle',
'circle',
'circle',
pointImage,
'circle',
'circle',
'circle',
'circle',
'circle',
'circle',
pointImage,
'circle',
];
} else {
costGraph2.data.datasets[0].data = [
124.38,
null,
123.55,
123.55,
121.92,
null,
117.93,
123.34,
122.95,
null,
121.64,
117.45,
115.93,
116.41,
116.32,
null,
];
costGraph2.data.datasets[1].data = [
null,
null,
123.66,
null,
119.53,
null,
117.2,
122.99,
122.71,
null,
124.01,
119.27,
115.97,
116.29,
118.16,
null,
];
costGraph2.options.scales.y.min = 115;
costGraph2.data.datasets[0].pointStyle = [
'circle',
'circle',
'circle',
'circle',
'circle',
'circle',
'circle',
'circle',
'circle',
'circle',
'circle',
'circle',
pointImage,
'circle',
'circle',
];
costGraph2.data.datasets[1].pointStyle = [
'circle',
'circle',
'circle',
'circle',
'circle',
'circle',
'circle',
'circle',
'circle',
'circle',
'circle',
'circle',
pointImage,
'circle',
'circle',
];
}
costGraph2.update();
}
Loading

0 comments on commit 3c802b4

Please sign in to comment.