<!DOCTYPE html>
<html>
<head>
	<title>RadarChart</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
</head>
<body>

<canvas id="radar" height="400" width="600"></canvas>

<script>
	
var chartData={
	 labels : [{% for item in labels %}
             "{{item}}",
            {% endfor %}],
     datasets:[{
     	label:"User",
     	fill:true,
     	backgroundColor: "rgba(200,0,0,0.2)",
     	borderColor: "rgba(200,0,0,0.6)",
     	borderWidth:2,
     	pointRadius:5,
     	pointHoverRadius:8,
     	pointStyle:"circle",
     	pointHoverBackgroundColor:"#000",
     	pointHitRadius:5,
     	pointBackgroundColor:"rgba(153,255,51,0.4)",
     	 data : [{% for item1 in value1 %}
                "{{item1}}",
              {% endfor %}]
     },
     {
     	label:"All Patients",
     	fill:true,
     	 backgroundColor: "rgba(0,0,200,0.2)",
     	borderColor: "rgba(200,0,0,0.6)",
     	borderWidth:1,
     	pointRadius:5,
     	pointHoverRadius:8,
     	pointStyle:"circle",
     	pointHoverBackgroundColor:"#000",
     	pointHitRadius:5,
     	pointBackgroundColor:"rgba(255,153,0,0.4)",
     	 data : [{% for item2 in value2 %}
                "{{item2}}",
              {% endfor %}]
     }
     ]
}
var ctx=document.getElementById("radar").getContext("2d");
	var radar=new Chart(ctx,{
    type:"radar",
    data:chartData,
    options:{
    	animation:{
easing:"easeOutCirc"
    	},
    	scale:{
    		display:true
    	},
    	 layout:{
          padding:{                                    // padding to the sides of the chart canvas
            left: 0,
            right:0,
            top:0,
            bottom:0
          }
        }
    }
	});
</script>

</body>
</html>