FanPost

Extra graphs week 11 vs NMSU 2021

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:

Alabama-2021-wk11-New-Mexico-State-01-success-drive-bar

Alabama, 2021, wk11, Success rate by drive table vs New Mexico State
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


Alabama-2021-wk11-New-Mexico-State-02-drive-fac

Alabama-2021-wk11-New-Mexico-State-03-drive

Alabama-2021-wk11-New-Mexico-State-04-all4-downs-fac

Alabama-2021-wk11-New-Mexico-State-05-all4-downs-fac-noscale

Alabama, 2021, wk11, Success by down table vs New Mexico State
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


Alabama-2021-wk11-New-Mexico-State-06-yards-success-gained

Alabama-2021-wk11-New-Mexico-State-07-drive-extra-yards-gained

Alabama-2021-wk11-New-Mexico-State-08-drive-yards-to-success

Alabama-2021-wk11-New-Mexico-State-09-fac-yards-to-success

Alabama-2021-wk11-New-Mexico-State-e5-drive-success-play

Alabama-2021-wk11-New-Mexico-State-e6-success-drive-bar-down

Alabama-2021-wk11-New-Mexico-State-e7-success-drive-bar-down2

Alabama-2021-wk11-New-Mexico-State-e8-success-drive-down-bar-yards-to-goal-fac

NMSU:

New-Mexico-State-2021-wk11-Alabama-01-success-drive-bar

New Mexico State, 2021, wk11, Success rate by drive table vs Alabama
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


New-Mexico-State-2021-wk11-Alabama-02-drive-fac

New-Mexico-State-2021-wk11-Alabama-03-drive

New-Mexico-State-2021-wk11-Alabama-04-all4-downs-fac

New-Mexico-State-2021-wk11-Alabama-05-all4-downs-fac-noscale

New Mexico State, 2021, wk11, Success by down table vs Alabama
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


New-Mexico-State-2021-wk11-Alabama-06-yards-success-gained

New-Mexico-State-2021-wk11-Alabama-07-drive-extra-yards-gained

New-Mexico-State-2021-wk11-Alabama-08-drive-yards-to-success

New-Mexico-State-2021-wk11-Alabama-09-fac-yards-to-success

New-Mexico-State-2021-wk11-Alabama-e5-drive-success-play

New-Mexico-State-2021-wk11-Alabama-e6-success-drive-bar-down

New-Mexico-State-2021-wk11-Alabama-e7-success-drive-bar-down2

New-Mexico-State-2021-wk11-Alabama-e8-success-drive-down-bar-yards-to-goal-fac

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">
bydrive-chartjs

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.

success-gained

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:

drive-chart-q1

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.

FanPosts are just that; posts created by the fans. They are in no way indicative of the opinions of SBN and the authors of Roll Bama Roll.