By Marone: December 2019

Visualize champions league winners

Goal

This article describes how to make diagrams and charts about champions league competition.

Used technologies

Canvasjs
Maven 3.2
VSCODE as IDE

Json Data

[
    {
        "name": "Real Madrid",
        "founded": "1902",
        "won": 13,
        "country": "Spain"
    },
    {
        "name": "AC Milan",
        "founded": "1899",
        "won": 7,
        "country": "Italy"
    },
	....

The json file contains a list of clubs, each club consists of: name, founding year, the number of won competitions and the country

Html page

<!DOCTYPE HTML>
<html>
<head>
    <script>
        window.onload = function () {
            var dataPoints = [];
            var chart = new CanvasJS.Chart("chartContainer", {
                animationEnabled: true,
                title: {
                    text: "Champions league winners by country"
                },
                data: [{
                    indexLabelFontWeight: "bold",
                    type: "pie",
                    startAngle: 240,
                    indexLabelFontSize: 20,
                    indexLabel: "{label} {y}",
                    dataPoints: dataPoints
                }]
            });
            function addData(data) {
                var sortedMap = prepareData(data);
                sortedMap.forEach((value, key, sortedMap) => {
                    dataPoints.push({
                        y: value,
                        label: key
                    });
                });
                chart.render();
            }
            $.getJSON("champions_league.json", addData);
        }
    </script>
</head>
<body>
    <br />
    <div id="chartContainer" style="height: 370px; width: 100%;"></div>
    <script src="prepare.js" type="text/javascript"></script>
    <script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
    <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</body>
</html>

Javascript file

function prepareData(data) {
    console.log("perpareData");
    var map = new Map();
    var mapResult = new Map();
    
    for (var i = 0; i < data.length; i++) {
        var wonValue = data[i].won;
        var countryValue = data[i].country;
        var value = map.get(countryValue);
        if (value == null) {
            map.set(countryValue, wonValue);
        } else {
            var newValue = value + wonValue;
            map.set(countryValue, newValue);
        }
    }

    map.forEach((value, key, map) => {
        mapResult.set(key, value)
    });
    return new Map([...mapResult.entries()].sort((a, b) => b[1] - a[1]));
}

Notes:

Transform the data to a map, the map contains the country name and the won number
The map will sorted based on the value of won number

Pie diagram

References

The complete code can be found in GitHub