Loading Gif

Castrol Edge Euro 2012 predictor

A canvas web app that visualised live football results

The Castrol Edge website was a mammoth of a project and is still going on now. Its not the kind of project that is ever finished. Its constantly changing and evolving.

My involvement with the site rested mainly around the 2012 Euros. It is one of the most ambitious projects I have ever worked on and really pushed me to the limit.

The project started when we were told we had access to hundreds and thousand of stats in json format to be provided be a company called Opta and not only that but we would have access to stats less than a minute old when actual games were being played!

After much debate the Castrol Live Predictor was born.

The Predictor its self was an entire section of the Edge site with multiple pages. We built a fixtures page which not only filled its self out as the match progressed but it looked into the future and predicted the outcomes of actual games. The wall chart download which would populate its self as games were played and create a downloadable graphic with php’s GD library everyday. And the main feature… A live predictor in which you could watch as a game was being played which plotted graphs using the canvas tag brought up live alerts and statistics when events such as red cards and goals happened and gave you the predicted chances of winning as the match progressed. It also saved all matches giving you a chance to revisit them later.

Live football results plotted on a canvas using JS

castrol-euro-predictor

The Predictor homepage on iPad

castrol-euro-predictor-app-mockup

The Predictor view when no live matches were in play

castrol-euro-predictor-2

The Predictor homepage

castrol-euro-predictor-3