﻿<!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.common.dynamic.js"></script>
    <script src="ms_/libraries/RGraph.common.tooltips.js"></script>
    <script src="ms_/libraries/RGraph.common.effects.js"></script>
    <script src="ms_/libraries/RGraph.radar.js"></script>
    <script src="ms_jQuery.js"></script>
    <title>A Basic Radar Chart</title>
    <style>
        .legendtext {
            width: 120px;
            height: 20px;
            float: left;
        }
        .series1 {
            border: 1px solid black;
            background-color: rgba(200,200,0,0.5);
            margin: 0 5px 3px 0;
            width: 35px;
            height: 20px;
            float: left;
        }
        .series2 {
            border: 1px solid black;
            background-color: rgba(20,200,20,0.35);
            margin: 0 5px 3px 0;
            width: 35px;
            height: 20px;
            float: left;
        }
    </style>
</head>
<body>
    <canvas id="cvs" width="500" height="400">[No canvas support]</canvas>
    <script>
        $(document).ready(function () {
            var radar2 = new RGraph.Radar({
                id: 'cvs',
                data: [
                       [8, 5, 5, 8, 7],
                       [6, 9, 7, 8, 5]
                ],
                options: {
                    labels: ['Consumer Debt', 'Retirement', 'Investments', 'Life Cover', 'Disability'],
                    tooltips: ['Consumer Debt Insurance', 'Retirement Funds', 'Investments', 'Life Insurance', 'Disability Insurance'],
                    clearto: 'white',
                    background: {
                        circles: {
                            poly: true,
                            spacing: 30
                        }
                    },
                    colors: ['rgba(200,200,0,0.5)', 'rgba(20,200,20,0.35)'],
                    axes: {
                        color: 'transparent'
                    },
                    highlights: true,
                    strokestyle: ['red', 'black']
                }
            }).on('beforedraw', function (obj) {
                RGraph.clear(obj.canvas, 'white');
            }).grow();
        });
    </script>
    <div class="legend">
        <div class="series1"></div><div class="legendtext">Actual Portfolio</div>
        <div class="series2"></div><div class="legendtext">Target Portfolio</div>
    </div>
</body>
</html>