Introduction
For a long time I’ve wanted to build something around stats and now I had the perfect opportunity to also utilize the Best Grid in the World: AG Grid. I tried very hard to avoid scope creep (which causes me to give up on 95% of my projects lol). I wanted to keep it simple: find an API for all the football stats I am interested in, retrieve them and display them in AG Grid. That’s it. You can view it at https://footballstatsdirect.com/.
Architecture
I built the website (or app) using React. For the API, I retrieve the stats from Rapid API. They seem to have a huge market place of all sorts of API’s and their pricing was suitable for a bit of fun. Although their pricing was very reasonable, if someone decided to refresh my app enough times or press enough buttons constantly, this could land me quite the bill with RapidApi, therefore to circumvent this, I decided to retrieve all the data on a daily basis from RapidApi and store it in Firebase. My app would then retrieve the data from Firebase every time it was visited as opposed to going directly to the API. The refreshing of the data in my Firebase database (or Firestore should I say) is done by Firebase Scheduled Functions which run once a day.
What’s so good about it?
The main draw to statistical analysis here compared to other places is the fact that you can compare both teams and players from Europe’s top 5 leagues. Sure other website can show you the top goal scorers across all of Europe but I’ve found very few that allow you to compare all stats such as yellow cards, minutes played, appearances and even height and weight.
Moreover, Football Stats Direct uses AG Grid: the Best Grid in the World. With AG Grid, we can perform powerful data visualizations and view the data in graphs, whether there are pre-defined or custom.
AG Grid makes it incredibly easy to transform the data on the go. The simple features (which are made easy to use) include sorting, filtering, rearranging column order, pinning columns etc. Other more enterprise grade features is where the real cool stuff starts!
Row Grouping: say I am looking at all the players in the English Premier League and I’d like to see which nationality averages the most goals. To do this, I would need to group by the nationality column and drag the Goals column to the Values section in the Columns sidebar, then order by descending the avg(Goals) column:
From my table, I can see players (just the one as denoted by the 1 in brackets) of nationality Korea Republic averages the most goals in the English Premier League.
Pivot: pivoting will allow you to summarize data using sums, averages etc. For example, I could be looking at all teams in the top 5 European leagues, and I want to see which champion (teams that finished first in the league) conceded the least number of goals. To do this, I would need to row group by the Team, Column group by the League Position and have a values field Goals Against:
Here I can see that Lille (from France) have conceded the least number of goals, where the teams League Position was 1.
Charts
Moving on, the AG Grid library also comes equipped with the functionality to display charts. All chart type you can think of are available whether it be bar, pie, donut, histogram chart etc. There are two modes for charting: user created charts and application created charts. Let’s look at the former first.
User created charts allow you to create charts on the fly using the data from the Grid. Simply highlight a cell range, right click and select your chart. For example, if we wanted to create a pie chart of the top 5 European club champions goals conceded (from the above pivot example), it would look like this:
Other charts include application created charts, these are created by the application for your viewing. Each section of Football Stats Direct allows you to view the data in graph form as opposed to in a data grid (although the data won’t be the same every time). For example, while viewing a league, if you enable the “Show Graph” toggle, you can view each team’s cumulative points accumulated across the season:
The above timeseries graph shows the cumulative points accumulated for the season for the English Premier League. You can click on the labels to select and deselect teams as well as narrowing the time range (by game week) using the navigator at beneath the graph:
Conclusion
This project took me approximately 2 weeks in my spare time. I could’ve done a lot more (and I really wanted to) by adding many more graphs, more data points, more leagues, the ability to browse across multiple seasons etc. but that’s where scope creep starts to get out of control. I’ve been using AG Grid for a few years now and knew this would be the best way to analyse stats for football, something which I could personally relate to instead of using mundane example data. This was a really fun project to do and it was made even easier by using Firebase as a backend and hosting due to the ease of which you can build and deploy apps. Hopefully the next one will run just as smoothly!
Comments