<div id="box_plot_{{PLOT_TYPE}}"></div>
<div class='caption'>
        <p>
            This plot depicts boxplots for the models indicating
            individual subject performance. The data used for the plot is
            {{COMPARATOR}} for individuals. Consequently, min and max refer to
            the {{COMPARATOR}} of the worst and best matching subjects. The dots
            refer to the mean {{COMPARATOR}} of individual participants.
        </p>

        <button name="figsave" type="button" class="button_result" plot_type="box_plot_{{PLOT_TYPE}}">Save Plot</button>
    </div>

<script>
    evaluationContents['box_plot_{{PLOT_TYPE}}'] = {
        data: {{PLOT_DATA}},
        layout: {
            hovermode: 'closest',
            showlegend: true,
            legend: {
                x: 0,
                y: -0.25,
                orientation: 'h'
            },
            title: {text: 'Subject Performance Boxplot ({{PLOT_TYPE}})'},
            yaxis: {title: {text: '{{COMPARATOR}}'}, rangemode: '{{RANGEMODE}}'},
            xaxis: {categoryarray: {{ORDERING}}}
        },
        config: {
            modeBarButtonsToRemove: ['toImage',
                                    'sendDataToCloud',
                                    'select2d',
                                    'toggleSpikelines',
                                    'hoverCompareCartesian',
                                    'hoverClosestCartesian',
                                    'lasso2d',
                                    'zoom2d',
                                    'pan2d',
                                    'autoScale2d'],
            displaylogo: false
        }
    }

    // Plot the data
    Plotly.newPlot("box_plot_{{PLOT_TYPE}}",
                    evaluationContents['box_plot_{{PLOT_TYPE}}'].data,
                    evaluationContents['box_plot_{{PLOT_TYPE}}'].layout,
                    evaluationContents['box_plot_{{PLOT_TYPE}}'].config);
</script>

<script class="trigger_resize_script">
	var el = document.getElementById("box_plot_{{PLOT_TYPE}}");
	var update = {
		width: el.offsetWidth,
		height: el.offsetHeight
	};

	Plotly.relayout("box_plot_{{PLOT_TYPE}}", update);
</script>
