﻿<!DOCTYPE HTML>
<html>
<head>
    <link rel="stylesheet" href="ms_BasicStyles.css" type="text/css" media="screen" />
    <script src="ms_/libraries/RGraph.common.core.js"></script>
    <script src="ms_/libraries/RGraph.radar.js"></script>
    <script src="ms_DataAccessLibraryAsyncReadOnly.js"></script>
    <script src="ms_jQuery.js"></script>
    <title>A Basic Radar Chart</title>
</head>
<body>
    <canvas id="cvs" width="500" height="400">[No canvas support]</canvas>
    <script>
        var ms = {};
        $(document).ready(function () {
            ms.currentId = parent.parent.Xrm.Page.data.entity.getId();
            if (ms.currentId == null) {
                return
            }
            var filter = "Record1Id/Id eq guid'" + ms.currentId + "'";
            var fieldList = "ConnectionId,Record1Id,Record1ObjectTypeCode,Record1RoleId,Record2Id,Record2ObjectTypeCode,Record2RoleId";
            retrieveMultiple("ConnectionSet", filter, fieldList, null, processResults, null, false);
        });

        function processResults(results) {
            var t = getDistribution(results, "Record2Id.LogicalName");
            var radar = new RGraph.Radar({
                id: 'cvs',
                data: t.data, 
                options: {
                    labels: t.labels, 
                }
            });
            radar.grow()
        }

        function getDistribution(results, categoryField) {
            var distr = {};
            for (var i = 0; i < results.length; i++) {
                category = results[i].Record2Id.LogicalName;
                if (isNaN(distr[category])) { distr[category] = 1 } else { distr[category]++ }
            }
            var t = { data: [], labels: [] };
            for (var i in distr) {
                var label = i;
                label = label[0].toUpperCase() + label.substr(1);
                t.labels.push(label); t.data.push(distr[i]);
            }
            t.labels.push("Other"); t.data.push(0);
            return t;
        }

    </script>
</body>
</html>