Football Analytics Dashboard

Football Match Analytics Dashboard

Bangladesh Championship League

Uttar Baridhara SC vs Arambagh KS

01-05-2025 12:30 Thursday

Expected Goals (xG) Analysis

Betting Trends & Probabilities

Attacking Threat

Defensive Metrics

Recommended Bets

Bet Type	Selection	Probability	Odds	Value	Trend	Reasoning

body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f8f9fa; color: #333; } .card { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); border: none; border-radius: 8px; } .card-header { background-color: #343a40; color: white; border-radius: 8px 8px 0 0 !important; } .match-info { background-color: #e9ecef; padding: 15px; border-radius: 8px; margin-bottom: 20px; } .table th { background-color: #343a40; color: white; } canvas { width: 100% !important; height: 300px !important; } // Match data const matchData = { homeTeam: "Uttar Baridhara SC", awayTeam: "Arambagh KS", date: "01-05-2025 12:30", day: "Thursday", league: "Bangladesh Championship League", // xG data xg: { home: { total: 1.42, longDistance: 0.32, head: 0.28, penalties: 0.12, openPlay: 1.06, setPiece: 0.36, avgPerShot: 0.11, foot: 1.02 }, away: { total: 1.18, longDistance: 0.25, head: 0.22, penalties: 0.08, openPlay: 0.92, setPiece: 0.26, avgPerShot: 0.09, foot: 0.88 } }, // Attacking threat attackingThreat: { home: 68, away: 62 }, // Defensive metrics defensive: { home: { groundDuelsWon: 52, aerialDuelsWon: 48, interceptions: 18, tackles: 22 }, away: { groundDuelsWon: 48, aerialDuelsWon: 45, interceptions: 15, tackles: 19 } }, // Betting probabilities bettingProbabilities: { winner: { home: 45, draw: 25, away: 30 }, totalGoals: { over1_5: 72, over2_5: 55, over3_5: 38 }, totalCorners: { over7_5: 65, over8_5: 58, over9_5: 49, over10_5: 42, over11_5: 35 }, btts: 62, halfTime: { home: 38, draw: 42, away: 20 } } }; // Recommended bets const recommendedBets = [ { type: "Winner", selection: matchData.homeTeam, probability: matchData.bettingProbabilities.winner.home, odds: 2.10, value: "Good", trend: "Up", reasoning: "Higher xG and better attacking threat" }, { type: "Total Goals", selection: "Over 1.5", probability: matchData.bettingProbabilities.totalGoals.over1_5, odds: 1.40, value: "Excellent", trend: "Up", reasoning: "Both teams have decent xG and attacking stats" }, { type: "Total Corners", selection: "Over 8.5", probability: matchData.bettingProbabilities.totalCorners.over8_5, odds: 1.85, value: "Good", trend: "Up", reasoning: "Teams average 9.2 corners per game combined" }, { type: "Both Teams to Score", selection: "Yes", probability: matchData.bettingProbabilities.btts, odds: 1.75, value: "Good", trend: "Up", reasoning: "Defensive stats show vulnerabilities" } ]; // Initialize charts document.addEventListener('DOMContentLoaded', function() { // xG Chart const xgCtx = document.getElementById('xgChart').getContext('2d'); new Chart(xgCtx, { type: 'bar', data: { labels: ['xG Total', 'Open Play xG', 'Set Piece xG', 'xG per Shot', 'xG Head', 'xG Foot'], datasets: [ { label: matchData.homeTeam, data: [ matchData.xg.home.total, matchData.xg.home.openPlay, matchData.xg.home.setPiece, matchData.xg.home.avgPerShot, matchData.xg.home.head, matchData.xg.home.foot ], backgroundColor: 'rgba(54, 162, 235, 0.7)' }, { label: matchData.awayTeam, data: [ matchData.xg.away.total, matchData.xg.away.openPlay, matchData.xg.away.setPiece, matchData.xg.away.avgPerShot, matchData.xg.away.head, matchData.xg.away.foot ], backgroundColor: 'rgba(255, 99, 132, 0.7)' } ] }, options: { responsive: true, scales: { y: { beginAtZero: true } } } }); // Betting Chart const bettingCtx = document.getElementById('bettingChart').getContext('2d'); new Chart(bettingCtx, { type: 'radar', data: { labels: ['Home Win', 'Draw', 'Away Win', 'Over 1.5', 'Over 2.5', 'BTTS'], datasets: [{ label: 'Probability %', data: [ matchData.bettingProbabilities.winner.home, matchData.bettingProbabilities.winner.draw, matchData.bettingProbabilities.winner.away, matchData.bettingProbabilities.totalGoals.over1_5, matchData.bettingProbabilities.totalGoals.over2_5, matchData.bettingProbabilities.btts ], backgroundColor: 'rgba(75, 192, 192, 0.2)', borderColor: 'rgba(75, 192, 192, 1)', pointBackgroundColor: 'rgba(75, 192, 192, 1)', pointBorderColor: '#fff', pointHoverBackgroundColor: '#fff', pointHoverBorderColor: 'rgba(75, 192, 192, 1)' }] }, options: { responsive: true, scales: { r: { angleLines: { display: true }, suggestedMin: 0, suggestedMax: 100 } } } }); // Attacking Chart const attackingCtx = document.getElementById('attackingChart').getContext('2d'); new Chart(attackingCtx, { type: 'doughnut', data: { labels: [matchData.homeTeam, matchData.awayTeam], datasets: [{ data: [matchData.attackingThreat.home, matchData.attackingThreat.away], backgroundColor: [ 'rgba(54, 162, 235, 0.7)', 'rgba(255, 99, 132, 0.7)' ], borderColor: [ 'rgba(54, 162, 235, 1)', 'rgba(255, 99, 132, 1)' ], borderWidth: 1 }] }, options: { responsive: true, plugins: { legend: { position: 'top', }, title: { display: true, text: 'Attacking Threat Index' } } } }); // Defensive Chart const defensiveCtx = document.getElementById('defensiveChart').getContext('2d'); new Chart(defensiveCtx, { type: 'bar', data: { labels: ['Ground Duels Won', 'Aerial Duels Won', 'Interceptions', 'Tackles'], datasets: [ { label: matchData.homeTeam, data: [ matchData.defensive.home.groundDuelsWon, matchData.defensive.home.aerialDuelsWon, matchData.defensive.home.interceptions, matchData.defensive.home.tackles ], backgroundColor: 'rgba(54, 162, 235, 0.7)' }, { label: matchData.awayTeam, data: [ matchData.defensive.away.groundDuelsWon, matchData.defensive.away.aerialDuelsWon, matchData.defensive.away.interceptions, matchData.defensive.away.tackles ], backgroundColor: 'rgba(255, 99, 132, 0.7)' } ] }, options: { responsive: true, scales: { y: { beginAtZero: true } } } }); // Populate bets table const betsTable = document.getElementById('betsTable'); recommendedBets.forEach(bet => { const row = document.createElement('tr'); const typeCell = document.createElement('td'); typeCell.textContent = bet.type; row.appendChild(typeCell); const selectionCell = document.createElement('td'); selectionCell.textContent = bet.selection; row.appendChild(selectionCell); const probCell = document.createElement('td'); probCell.textContent = `${bet.probability}%`; row.appendChild(probCell); const oddsCell = document.createElement('td'); oddsCell.textContent = bet.odds; row.appendChild(oddsCell); const valueCell = document.createElement('td'); valueCell.textContent = bet.value; row.appendChild(valueCell); const trendCell = document.createElement('td'); const trendIcon = document.createElement('i'); trendIcon.className = bet.trend === 'Up' ? 'bi bi-arrow-up text-success' : 'bi bi-arrow-down text-danger'; trendCell.appendChild(trendIcon); trendCell.appendChild(document.createTextNode(` ${bet.trend}`)); row.appendChild(trendCell); const reasoningCell = document.createElement('td'); reasoningCell.textContent = bet.reasoning; row.appendChild(reasoningCell); betsTable.appendChild(row); }); });