console.log("test");
$(function() {

//var data = [{% for cat in categories %} {{ cat.sum_cat|escapejs }}, {% endfor %}];
//var data_cat = [{% for cat in categories %} "{{ cat.cat_name|escapejs }}", {% endfor %}];
var sum = 0;
for (var i=0; i < data.length; i++){sum += data[i]}
var r = 3.6;
var centerX = 180;
var centerY = 180;
var radius = 180;
var far = 108;
var start = (Math.PI/180)*0-Math.PI/2;
var colors = ['#5E35B1', '#43A047', '#E53935', '#1E88E5', '#D81B60', '#C0CA33', '#4e342e', '#00acc1', '#f9a825', '#546e7a', '#7b1fa2', '#689f38', '#ff6f00', '#6d4c41', '#3f51b5', '#00acc1'];
var canvas = document.getElementById('canvas');
var total = 0;
  if (canvas.getContext){
    var ctx = canvas.getContext('2d');
    ctx.strokeStyle = '#fff';
    ctx.lineWidth = 2;
    ctx.lineCap = 'round';
    ctx.lineJoin = 'bevel';
        for (var i=0; i < data.length;i++) {
        ctx.beginPath();
        total += data[i]*100/sum;
        var end = (Math.PI/180)*r*total-Math.PI/2;
        ctx.arc(centerX,centerY,radius, start, end);
        ctx.lineTo(centerX,centerY);
        ctx.fillStyle = colors[i];
        ctx.fill();
        ctx.stroke();
        ctx.fillStyle = "white";
        ctx.font = "10pt calibri";
        ctx.fillText(data_cat[i], centerX-15 + far * Math.cos((start + end) / 2), centerY + far * Math.sin((start + end) / 2));
        start = end+0.01;
        }
  ctx.beginPath();
  ctx.shadowBlur = 7;
  ctx.shadowColor = "rgba(0, 0, 0, 0.2)";
  ctx.arc(centerX,centerY,radius, 0, 2*Math.PI);
  ctx.stroke();

  }

})