How to show complex data visual representation using ReportServer
Back to posts
In the last decade, recent advances in data collection have extended sports analytics’ value significantly. As humankind, we excelled in every part of our lives, and technology followed. Extensive analytics became an essential part of many aspects of almost every sport known to humans. It is impossible to imagine any widely popular sport without data collection and extensive research. The very essence of every sports category is a competitive trait that runs throughout the blood of professionals. Being able to analyze data and get a competitive advantage out of that analysis became essential throughout the time.
However, extensive data collection is only worth as much as the ability to analyze that data and present it in the best possible way to the end-user. The main goal is to help our clients to make the right decisions. In cooperation with our clients from Benchmark 54, we gather a lot of data about various sports activities. Most of the time, we get the data from different devices, surveys, user inputs, and analytics systems.
Using Global Positioning System (GPS) trackers, we can thoroughly investigate the physical activity of any athlete. For example, in football (US soccer), consistency of physical condition is a key to injury prevention. If a player suddenly changed his morning cardio routine, his coach and physio team can help him to accommodate a different training regime and prevent possible injuries. Furthermore, deeper analysis and investigation can even show the percentage of acceleration for each player helping the team’s head coach re-consider team selection and get the maximum value of the team in every match.
Another way to collect data for analysis is the use of individual surveys. Based on the survey results, fitness coaches and physiotherapists can discover potential fitness challenges, and anticipate or even discover injuries. Based on this analysis, it is possible to understand various mental and physical issues of specific age groups and appropriate team medical actions and processes. On another note, using survey data, the head coach can create the right mental environment for players and investigate positive/negative feedback from players on their football team backroom staff.
It sounds good, right? But, it’s not that easy. Most of the time, the analysis report is a bunch of numbers in the linear or table form, and some data can have more than three dimensions. It is hard to understand and get the value out of it unless you are a skillful mathematician or analyst. We decided to use ReportServer as a foundation for data presentation in the Benchmark54 application. This solution helped us to aggregate simple tables that are easy to understand and analyze. Furthermore, we enabled data organization in charts, which opened a whole new way of data representation. It is easy to compare different variables, and it provides various insights to key decision-makers.
ReportServer supports creating graphical reports using the OpenSource library JasperReports, which can specify pixel-perfect graphical reports.
From the side of UX in the Benchmark54 application, it was crucial to establish an independent area on the dashboard that will focus on showing this extensive graphical representation of data. However, it was necessary to make it as flexible as possible. Each layout is adjustable with size and position, and it can be organized in a different order with drag and drop options. The end-user can input different variables (e.g. age, group, session) and after acquiring a certain data representation, the end-user can easily export the chart as a PDF document.
One of the interesting features we added was interactivity. However, JasperReports did not offer proper interactivity changes nor the option to get data from the API. We deepened our research and checked several options for this feature, such as Eclipse Birt and SAP Crystal Reports. Unfortunately, these two options were not customizable to suit our needs. After some time, at some point of research, we found an article that explained how we could use ReportServer table reports as API and use any JS library to make customizable charts on top of that data. We decided to go with a single-page application that takes data from ReportServer API and provides chart interactivity. We opted for ChartJS which fits perfectly with our needs. We enabled the option to inspect data with dropdowns to review any specific category from the chart.
Our implementation started from the PDF export functionality, where we used the jsPDFlibrary and manually created reports in A4 format.
Later on, one of the requests was to enable PDF export for the entire report on multiple pages. After some brainstorming, we realized that the best way to do this task is to do a set of different charts as screenshots and merge them into one whole document. The question is how to scrap these images? For that challenge, we used Laravel Dusk. Its primary usage is for automation testing, but it can mimic a browser's functionality. We wrote a script that can open the dashboard, adjust charts to the needs of a report, and then take the screenshot. To avoid a scrollbar we take a screenshot of a long browser window with 10k px height and get the entire dashboards as one hefty image, crop the specific charts, and join it together on the backend with a PDF parser (FPDI).
Automating these reports, we saved up to several hours of work per each report. Our major victory was the satisfaction of our clients. Now, they can generate reports, perform a thorough investigation of data and analysis, and reinforce their actions with the best possible approach.
Visit our website to get more info on all of our services.
