2016 is an exciting year for the Olympic games as it is attended by a record number of countries competing in a record number of games. To help keep track of the country leaderboard for this year’s games, we built an OlympicTracker sample. Beginning August 5th we’ll provide real time updates to the medal totals for each nation.

We used AngularJS as our framework, Wijmo for our data visualizations and Material Design for our user interface and UX. You can use these three technologies together to quickly build a full featured application. A great benefit of choosing any of these three technologies is that you can use each one of them independently from the other libraries.

This sample uses a web service to retrieve the number of medals won by each country in real time during the event and then presents that information in two different ways:

1. Wijmo FlexGrid


2. Wijmo Stacked FlexChart.

Working with this type of live data feed (just like working with historical data) is relatively simple. We’ll use AngularJS $http to read a JSON file from a server and then build a CollectionView out of our dataset to use for our data layer.

The CollectionView is not just a simple array, but includes advanced are features like Record Management which we will utilize. We can then load that data into a grid employing features such as cell templates, pagination, searching or filtering capabilities, and sorting. The FlexChart provides an alternate means of visualizing the same data that makes it easier to compare results at a glance.

Stay tuned throughout the Olympics as the data updates in our OlympicTracker sample!