<!doctype html> <html>

<head>
        <title>Radar Chart</title>
        <script src="../Chart.js"></script>
        <meta name = "viewport" content = "initial-scale = 1, user-scalable = no">
        <style>
                canvas{
                }
        </style>
</head>
<body>
        <div style="width:30%">
                <canvas id="canvas" height="450" width="450"></canvas>
        </div>

<script>
var radarChartData = {
        labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
        datasets: [
                {
                        label: "My First dataset",
                        fillColor: "rgba(220,220,220,0.2)",
                        strokeColor: "rgba(220,220,220,1)",
                        pointColor: "rgba(220,220,220,1)",
                        pointStrokeColor: "#fff",
                        pointHighlightFill: "#fff",
                        pointHighlightStroke: "rgba(220,220,220,1)",
                        data: [65,59,90,81,56,55,40]
                },
                {
                        label: "My Second dataset",
                        fillColor: "rgba(151,187,205,0.2)",
                        strokeColor: "rgba(151,187,205,1)",
                        pointColor: "rgba(151,187,205,1)",
                        pointStrokeColor: "#fff",
                        pointHighlightFill: "#fff",
                        pointHighlightStroke: "rgba(151,187,205,1)",
                        data: [28,48,40,19,96,27,100]
                }
        ]
};

window.onload = function(){
        window.myRadar = new Chart(document.getElementById("canvas").getContext("2d")).Radar(radarChartData, {
                responsive: true
        });
}

</script>
</body>

</html>