<html>
<head>


<script type="text/javascript" src="{{ STATIC_URL }}trainings/css/mootools.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}trainings/css/Chart.js"></script>
<script type="text/javascript">

  function drawChart() {

  option = {

  //Boolean - If we show the scale above the chart data
  scaleOverlay : false,

  //Boolean - If we want to override with a hard coded scale
  scaleOverride : false,

  //** Required if scaleOverride is true **
  //Number - The number of steps in a hard coded scale
  scaleSteps : null,
  //Number - The value jump in the hard coded scale
  scaleStepWidth : null,
  //Number - The centre starting value
  scaleStartValue : null,

  //Boolean - Whether to show lines for each scale point
  scaleShowLine : true,

  //String - Colour of the scale line
  scaleLineColor : "rgba(0,0,0,.1)",

  //Number - Pixel width of the scale line
  scaleLineWidth : 1,

  //Boolean - Whether to show labels on the scale
  scaleShowLabels : false,

  //Interpolated JS string - can access value
  scaleLabel : "<%=value%>",

  //String - Scale label font declaration for the scale label
  scaleFontFamily : "'Arial'",

  //Number - Scale label font size in pixels
  scaleFontSize : 12,

  //String - Scale label font weight style
  scaleFontStyle : "normal",

  //String - Scale label font colour
  scaleFontColor : "#666",

  //Boolean - Show a backdrop to the scale label
  scaleShowLabelBackdrop : true,

  //String - The colour of the label backdrop
  scaleBackdropColor : "rgba(255,255,255,0.75)",

  //Number - The backdrop padding above & below the label in pixels
  scaleBackdropPaddingY : 2,

  //Number - The backdrop padding to the side of the label in pixels
  scaleBackdropPaddingX : 2,

  //Boolean - Whether we show the angle lines out of the radar
  angleShowLineOut : true,

  //String - Colour of the angle line
  angleLineColor : "rgba(0,0,0,.1)",

  //Number - Pixel width of the angle line
  angleLineWidth : 1,

  //String - Point label font declaration
  pointLabelFontFamily : "'Arial'",

  //String - Point label font weight
  pointLabelFontStyle : "normal",

  //Number - Point label font size in pixels
  pointLabelFontSize : 12,

  //String - Point label font colour
  pointLabelFontColor : "#666",

  //Boolean - Whether to show a dot for each point
  pointDot : true,

  //Number - Radius of each point dot in pixels
  pointDotRadius : 3,

  //Number - Pixel width of point dot stroke
  pointDotStrokeWidth : 1,

  //Boolean - Whether to show a stroke for datasets
  datasetStroke : true,

  //Number - Pixel width of dataset stroke
  datasetStrokeWidth : 2,

  //Boolean - Whether to fill the dataset with a colour
  datasetFill : true,

  //Boolean - Whether to animate the chart
  animation : true,

  //Number - Number of animation steps
  animationSteps : 60,

  //String - Animation easing effect
  animationEasing : "easeOutQuart",

  //Function - Fires when the animation is complete
  onAnimationComplete : null

}

  {% for graph in a_json.graphs %}


  var data{{forloop.counter}} = {
  labels : [{% for crit in graph.attributes %}"{{crit.0}}",{% endfor %}],
  datasets : [
  {
  fillColor : "rgba(220,220,220,0.5)",
  strokeColor : "rgba(220,220,220,1)",
  pointColor : "rgba(220,220,220,1)",
  pointStrokeColor : "#fff",
  data : [{% for crit in graph.attributes %}{{crit.1.2|stringformat:"f"}},{% endfor %}]
  },
  {
  fillColor : "rgba(220,220,220,0.5)",
  strokeColor : "rgba(220,220,220,1)",
  pointColor : "rgba(220,220,220,1)",
  pointStrokeColor : "#fff",
  data : [{% for crit in graph.attributes %}100,{% endfor %}]
  }
  ]
  }

  var ctx{{forloop.counter}} = document.getElementById("myChart{{forloop.counter}}").getContext("2d");
  var myNewChart{{forloop.counter}} = new Chart(ctx{{forloop.counter}}).Radar(data{{forloop.counter}}, option);

  {% endfor %}


  }

  window.addEvent('domready', function() {
  drawChart();
  });
</script>

<script>
</script>
</head>

<body>
  <h1>Synthèse {{candidate.first_name}} {{candidate.last_name}}</h1>
  <img src="{{candidate.photo.img.url}}" />

  <h3>Graphiques:</h3>
  <canvas id="myChart1" width="400" height="400"></canvas>
  <canvas id="myChart2" width="400" height="400"></canvas>
  <canvas id="myChart3" width="400" height="400"></canvas>
  <canvas id="myChart4" width="400" height="400"></canvas>

  <h3>Résultats test:</h3>
  <dl>
    {% for quiz in a_json.percent %}
    <dt>{{quiz.label}}</dt><dd>{{quiz.value}}%</dd>
    {% endfor %}
  </dl>

  {% for criteria in a_json.criterias%}
  <h3>{{criteria.label}}</h3>
  <ul>
    {% for item in criteria.items %}
    <li>{{item.text}}</li>
    {% endfor %}
  </ul>
  {% endfor %}

</body>
</html>
