{% load fullpath %}

<div id="widgetvisualization-{{widget.pk}}" width="727" height="700" rel="{{widget.pk}}" class="widgetvisualizationdialog" title="{{widget.name}} results">

<div id="widget-eval-bar-chart-{{widget.pk}}" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
<script src="{% static_fullpath request 'cf_perfeval/js/jquery-1.7.1.min.js' %}" type="text/javascript"></script>
<script src="{% static_fullpath request 'cf_perfeval/js/highcharts-2.2.5-tooltip-id.js' %}" type="text/javascript"></script>
<script src="{% static_fullpath request 'cf_perfeval/js/highcharts-exporting.js' %}" type="text/javascript"></script>
<script type="text/javascript">
$(function () {

    var chart;
    $(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'widget-eval-bar-chart-{{widget.pk}}',
                type: 'column',
				height: 600,
                width: 700,
            },
            title: {
                text: 'Performance Evaluation Results'
            },
            subtitle: {
                //text: ''
            },
			credits: {
				enabled: false
			},
            xAxis: {
                categories: [
                    {% for item in input_dict.eval_results %}
					'{{ item.name }}',
					{% endfor %}
                ],
				labels: {
                    rotation: -45,
                    align: 'right',
                    style: {
                        fontSize: '10pt',
						color: 'black',
                    }
                }
            },
            yAxis: {
                min: 0,
				max: 1,
				labels: {
					style: {
						color: 'black'
					}
				},
                title: {
                    text: 'Performance',
					style: {
						color: 'black',
						fontSize: '12pt'
					}
                },
				
            },
            legend: {
				enable: true,
				//useHTML: true,
                layout: 'horizontal',
                backgroundColor: '#FFFFFF',
                align: 'center',
                verticalAlign: 'bottom',
                floating: false,
                //shadow: true
            },
            tooltip: {
				useHTML: true,
                formatter: function() {
					var perf_measure = this.series.index;
					var st_dev = "";
					{% with 'std_re std_pr std_fs' as options %}
					{% for item in options.split %}
					{% if item in input_dict.eval_results.0 %}
					if({{forloop.counter0}} == perf_measure)
						st_dev = ' ± ' + chart.series[perf_measure+3].data[this.point.index].y.toFixed(2);
					{% endif %}
					{% endfor %}
					{% endwith %}
                    return '<b>'+this.x +'</b><br/>'+
					this.series.name+' : '+ this.y.toFixed(2) + st_dev; 
					
                }
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
				
            },
                series: [{
                name: 'Recall',
                data: [
				{% for item in input_dict.eval_results %}
					{ y: {{ item.recall }}, index: {{forloop.counter0}} },
				{% endfor %}
				]
            },{
                name: 'Precision',
                data: [
				{% for item in input_dict.eval_results %}
					{ y: {{ item.precision }}, index: {{forloop.counter0}} },
				{% endfor %}
				]
            },{
				{% with beta=input_dict.eval_results.0.fbeta %}
                name: '<i>F</i><span style="vertical-align:-20%; font-size:70%;">{% if beta == 1 %}1{% else %}{{beta}}{% endif %}</span>-score',
                {% endwith %}
				data: [
				{% for item in input_dict.eval_results %}
					{ y: {{ item.fscore }}, index: {{forloop.counter0}} },
				{% endfor %}
				]
            },
			{% if 'std_re' in input_dict.eval_results.0 %}{
                name: 'std_re',
                data: [
				{% for item in input_dict.eval_results %}
					{{ item.std_re }},
				{% endfor %}
				],
                visible: false,
                showInLegend: false
            },
			{% endif %}
			{% if 'std_pr' in input_dict.eval_results.0 %}{
                name: 'std_pr',
                data: [
				{% for item in input_dict.eval_results %}
					{{ item.std_pr }},
				{% endfor %}
				],
                visible: false,
                showInLegend: false
            },
			{% endif %}
			{% if 'std_fs' in input_dict.eval_results.0 %}{
                name: 'std_fs',
                data: [
				{% for item in input_dict.eval_results %}
					{{ item.std_fs }},
				{% endfor %}
				],
                visible: false,
                showInLegend: false
            },
			{% endif %}
            {% if 'accuracy' in input_dict.eval_results.0 %}{
                name: 'Accuracy',
                data: [
                {% for item in input_dict.eval_results %}
                    { y: {{ item.accuracy }}, index: {{forloop.counter0}} },
                {% endfor %}
                ],
                visible: true,
                showInLegend: true
            },
            {% endif %}
            {% if 'auc' in input_dict.eval_results.0 %}{
                name: 'AUC',
                data: [
                {% for item in input_dict.eval_results %}
                    { y: {{ item.auc }}, index: {{forloop.counter0}} },
                {% endfor %}
                ],
                visible: true,
                showInLegend: true
            },
            {% endif %}
			]
        });
    });

});
		</script>
</div>