## mako
<%! from django.utils.translation import ugettext as _ %>
<%! from course_dashboard.problem_stats.utils import percentage %>

<script>
 $.plot($("#${question_id}.correctness-chart"),
        [ {label: "${_("Correct")}",
           data: ${correctness['correct']},
           color: "#5cb85c" },
          { label: "${_("Incorrect")}",
            data: ${correctness['incorrect']},
            color: "#d44950"}],
        { series: {
            pie : {
                show: true,
                radius: 1,
                label: {
                    show: true,
                    radius: 3/4,
                    formatter: function (label, series) {
                        return '<div style="border:0.5px solid gray;font-size:8pt;text-align:center;padding:3px;color:white;">' +
                                                            series.data[0][1] +  '<br/>' + Math.round(series.percent) + '%</div>';},
                    background: {
                        opacity: 0.50,
                        color: '#000'
                    }
                }

            }

        },
          legend : { position : '', show : 'true'}
 });
</script>

<div class="panel panel-default">
    <div class="panel-heading">
        % for element in title:
            <p>${element.text}</p>
        % endfor
    </div>
    <div class="panel-body">
        <div class='row'>
            <div id="distributed-stat" class="col-xs-10">
                <%block name="answers_distribution">
                </%block>
            </div>
            <div id="global-stat" class="col-xs-2">
                <div  id='${question_id}' class="correctness-chart" style="width:175px; height:116px"></div>
            </div>
        </div>
    </div>
</div>