As always this is an addendum to balloons' All the Graphs from Alabama vs. New Mexico State
I had to make a fumble recovery for the opponent an unsuccessful play because of the one play drive for NMSU broke my code. I'll have to fix this once I can think of how to do it.
Alabama:
| Drive | Total | Successful | Unsuccessful | Success rate | Scoring drive |
|---|---|---|---|---|---|
| 1 | 4 | 2 | 2 | 0.5000000 | FALSE |
| 2 | 2 | 2 | 0 | 1.0000000 | TRUE |
| 3 | 7 | 5 | 2 | 0.7142857 | TRUE |
| 4 | 3 | 2 | 1 | 0.6666667 | TRUE |
| 5 | 2 | 1 | 1 | 0.5000000 | TRUE |
| 6 | 4 | 2 | 2 | 0.5000000 | TRUE |
| 7 | 6 | 3 | 3 | 0.5000000 | TRUE |
| 8 | 8 | 6 | 2 | 0.7500000 | TRUE |
| 9 | 6 | 4 | 2 | 0.6666667 | FALSE |
| 10 | 6 | 1 | 5 | 0.1666667 | FALSE |
| 11 | 11 | 10 | 1 | 0.9090909 | TRUE |
| 12 | 13 | 6 | 7 | 0.4615385 | FALSE |
| 13 | 6 | 1 | 5 | 0.1666667 | FALSE |
| Down | Total | Successful | Unsuccessful | TD/1st |
|---|---|---|---|---|
| 1 | 39 | 22 | 17 | 10 |
| 2 | 27 | 15 | 12 | 14 |
| 3 | 12 | 8 | 4 | 8 |
| 4 | 0 | 0 | 0 | 0 |
NMSU:
| Drive | Total | Successful | Unsuccessful | Success rate | Scoring drive |
|---|---|---|---|---|---|
| 1 | 5 | 1 | 4 | 0.2000000 | FALSE |
| 2 | 9 | 3 | 6 | 0.3333333 | FALSE |
| 3 | 4 | 1 | 3 | 0.2500000 | FALSE |
| 4 | 3 | 0 | 3 | 0.0000000 | FALSE |
| 5 | 3 | 0 | 3 | 0.0000000 | FALSE |
| 6 | 5 | 1 | 4 | 0.2000000 | FALSE |
| 7 | 1 | 0 | 1 | 0.0000000 | FALSE |
| 8 | 8 | 3 | 5 | 0.3750000 | FALSE |
| 9 | 1 | 0 | 1 | 0.0000000 | FALSE |
| 10 | 7 | 1 | 6 | 0.1428571 | FALSE |
| 11 | 3 | 0 | 3 | 0.0000000 | FALSE |
| 12 | 6 | 1 | 5 | 0.1666667 | FALSE |
| 13 | 3 | 0 | 3 | 0.0000000 | FALSE |
| Down | Total | Successful | Unsuccessful | TD/1st |
|---|---|---|---|---|
| 1 | 23 | 3 | 20 | 1 |
| 2 | 19 | 4 | 15 | 4 |
| 3 | 15 | 3 | 12 | 3 |
| 4 | 1 | 1 | 0 | 1 |
Technical stuff
Since my problem posting fancy graphs is not a me failure, lol, I started playing with ChartJS. I'm slowly beginning to see what you are doing with your code (I think). This is what I have so far.
The links I am using are:
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.0.0/chartjs-plugin-datalabels.min.js" integrity="sha512-R/QOHLpV1Ggq22vfDAWYOaMd5RopHrJNMxi8/lJu8Oihwi4Ho4BRFeiMiCefn9rasajKjnx9/fTQ/xkWnkDACg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/1.0.2/chartjs-plugin-annotation.min.js" integrity="sha512-FuXN8O36qmtA+vRJyRoAxPcThh/1KJJp7WSRnjCpqA+13HYGrSWiyzrCHalCWi42L5qH1jt88lX5wy5JyFxhfQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
let driveLength=[7, 3, 5, 9, 12, 5, 2, 3, 3, 3, 8, 3];
//For drive length in SRbyDrive chart
let SRbyDrive = document.getElementById('SRbyDrive').getContext('2d');
let SRbyDriveData = {
type:'bar',
data:{
labels:[
'1', '2', '3', '4', '5', '6',
'7', '8', '9', '10', '11', '12'
],
datasets:[{
label: 'False',//TD
data:[
0.4285714,0.0000000,0.2000000,
0.4444444,,,,0.0000000,0.0000000,
0.3333333,0.6250000,0.0000000
],
backgroundColor: 'grey',
grouped: false
//Makes bar full width instead of side-by-side
},
{
label: 'True',//TD
data:[,,,,0.7500000,0.6000000,0.5000000,,,,,],
backgroundColor: 'crimson',
grouped: false
}]
},
plugins: [ChartDataLabels],
options:{
plugins:{
title:{
display: true,
text: 'SR by Drive',
fontSize: 15
},
legend:{
display: true,
position:'right',
title:{
display: true,
text: 'TD'
},
font:{
weight: 'bold'
}
},
datalabels:{
anchor: 'end',
align: 'top',
formatter: function(value, context){
return driveLength[context.dataIndex];
//getting multiple numbers from the 2 datasets
}
}
},
scales:{
x:{
title:{
display: true,
text: 'Drive number'
}
},
y:{
title:{
display: true,
text: 'SR'
}
}
}
}
}
let SRbyDriveChart = new Chart(SRbyDrive,SRbyDriveData);
The reason there are two sets of drive length numbers is because of the two datasets. I don't know if there is a way to only loop over one dataset in the formatter function.
let yardsSuccessYardsGained = document.getElementById('yardsSuccessYardsGained').getContext('2d');
let yardsSuccessYardsGainedData = {
type: 'scatter',
data:{
datasets:[{
label: 'SuccessfulPassTD',
data:[
{x:8, y:22},{x:5, y:11},{x:5, y:8},
{x:7.7, y:15},{x:7.5, y:14},{x:7, y:8},
{x:5, y:7},{x:2.1, y:5},{x:2.1, y:8},
{x:5.6, y:24},{x:14, y:21},{x:5, y:14},
{x:5, y:17},{x:8, y:8},{x:7, y:58},
{x:5, y:7},{x:7, y:15},{x:5, y:7},
{x:5, y:16},{x:5, y:16}
],
backgroundColor: 'green',
pointStyle: 'triangle'
},
{
label: 'SuccessfulRushTD',
data:[
{x:10, y:12},{x:0.7, y:1},{x:5, y:7},
{x:4.2, y:5},{x:1, y:2},{x:1, y:2},
{x:2.1, y:4},{x:14, y:15},{x:14, y:15}
],
backgroundColor: 'green',
pointStyle: 'circle'
},
{
label: 'UnsuccessfulPass',
data:[
{x:5, y:0},{x:1.4, y:0},{x:2, y:0},
{x:4.2, y:0},{x:5, y:0},{x:7, y:0},
{x:2, y:0},{x:5, y:0},{x:4, y:0},
{x:5.6, y:0},{x:5, y:0},{x:2.1, y:0},
{x:5, y:0},{x:5, y:0}
],
backgroundColor: 'red',
pointStyle: 'triangle'
},
{
label: 'UnsuccessfulRush',
data:[
{x:7, y:2},{x:5, y:4},{x:5, y:-1},
{x:5, y:1},{x:2, y:0},{x:5, y:2},
{x:5, y:1},{x:6.3, y:0},{x:5, y:-2},
{x:3, y:1},{x:5, y:2},{x:5.6, y:-2},
{x:10, y:-5},{x:10, y:-5}
],
backgroundColor: 'red',
pointStyle: 'circle'
}
]
},
options:{
plugins:{
title:{
display: true,
text: 'Yards to Success vs Yards gained',
fontSize: 15
},
legend:{
display: true,
position:'right',
title:{
display: true,
text: 'TD'
},
font:{
weight: 'bold'
}
},
autocolors: false,
annotation:{
annotations:{
line1:{
type: 'line',
xMin: 0,
yMin: 0,
xMax: 14,
yMax: 14,
borderColor: 'black',
borderWidth:1
}
}
}
},
scales:{
x:{
title:{
display: true,
text: 'Yards to success'
}
},
y:{
title:{
display: true,
text: 'Yards gained'
}
}
}
}
}
let yardsSuccessYardsGainedChart = new Chart(yardsSuccessYardsGained,yardsSuccessYardsGainedData);
For this graph:
I also need this code and svg file saved in the directory:
<div style="visibility: hidden;">
<img id="boxtriangle_succ" src="boxtriangle_succ.svg" style="width: 20px;">
</div">
This gives me the box-triangle symbol for a pass TD.
let offenseDrives = document.getElementById('offenseDrives').getContext('2d');
let offenseDrivesData = {
type: 'scatter',
data:{
datasets:[{
label: 'SuccessfulPass',
data:[
{x:1, y:13},{x:6, y:21},
{x:10, y:26},{x:11, y:17}
],
backgroundColor: 'green',
pointStyle: 'triangle',
pointRadius:9
},
{
label: 'UnsuccessfulPass',
data:[
{x:3, y:1},{x:4, y:1},
{x:9, y:-2},{x:13, y:2}
],
backgroundColor: 'red',
pointStyle: 'triangle',
pointRadius:9
},
{
label: 'SuccessfulRun',
data:[{x:2, y:5},{x:8, y:19},{x:12, y:12}],
backgroundColor: 'green',
pointStyle: 'circle',
pointRadius:7
},
{
label: 'UnsuccessfulRun',
data:[],
backgroundColor: 'red',
pointStyle: 'circle',
pointRadius:7
},
{
label: 'PassTD',
data:[{x:7, y:50},{x:14, y:12}],
backgroundColor: 'green',
pointStyle: boxtriangle_succ
},
{
label: 'punt',
data:[{x:5, y:0}],
backgroundColor: 'gray',
pointStyle: 'rectRot',
pointRadius:7
},
{
type: 'line',
label: 'Drive 1',
data:[
{x:1,y:13},{x:2,y:5},
{x:3,y:1},{x:4,y:1},
{x:5,y:0}
],
pointRadius: 0,
borderColor: 'crimson'
},
{
type: 'line',
label: 'Drive 2',
data:[{x:6,y:21},{x:7,y:50}],
pointRadius: 0,
borderColor: 'grey'
},
{
type: 'line',
label: 'Drive 3',
data:[
{x:8,y:19},{x:9,y:-2},
{x:10,y:26},{x:11,y:17},
{x:12,y:12},{x:13,y:2},
{x:14,y:12}
],
pointRadius: 0,
borderColor: 'crimson'
},
]
},
options:{
plugins:{
title:{
display: true,
text: 'Offense Drives Q1',
fontSize: 15
},
legend:{
display: true,
position:'right',
title:{
display: true,
text: 'Play type/Drive #'
},
font:{
weight: 'bold'
}
},
autocolors: false,
annotation:{
annotations:{
}
}
},
scales:{
x:{
title:{
display: true,
text: 'Offense play count including penalites'
}
},
y:{
title:{
display: true,
text: 'Yards gained'
}
}
}
}
}
let offenseDrivesChart = new Chart(offenseDrives,offenseDrivesData);
Are these helpful? Also I don't know if you saw my final response to you in my last FanPost.
