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.
Loading comments...