Commit 256bc940 authored by Zixian Cai's avatar Zixian Cai

Implement boxplot and barplot properly

parent d806d35b
{% extends 'base.html' %}
{% macro responsive_header(elementID) -%}
(function () {
var d3 = Plotly.d3;
var WIDTH_IN_PERCENT_OF_PARENT = 100,
HEIGHT_IN_PERCENT_OF_PARENT = 100;
var gd3 = d3.select('#{{ elementID }}')
.style({
width: WIDTH_IN_PERCENT_OF_PARENT + '%',
'margin-left': (100 - WIDTH_IN_PERCENT_OF_PARENT) / 2 + '%',
height: HEIGHT_IN_PERCENT_OF_PARENT + 'vh',
'margin-top': (100 - HEIGHT_IN_PERCENT_OF_PARENT) / 2 + 'vh'
});
var gd = gd3.node();
window.addEventListener("resize", function () {Plotly.Plots.resize(gd);});
{%- endmacro %}
{% macro responsive_footer() -%}
})();
{%- endmacro %}
{% block body %}
<div class="panel panel-info">
<div class="panel-heading">Platform information</div>
......@@ -23,56 +45,68 @@
<code>{{ ts["callback"]["param"] }}</code>
</li>
</ul>
<div id="plot_ts_{{ ts["name"] }}"></div>
<div id="barplot_ts_{{ ts["name"] }}"></div>
<div id="boxplot_ts_{{ ts["name"] }}"></div>
</div>
</div>
<script>
(function () {
var d3 = Plotly.d3;
var WIDTH_IN_PERCENT_OF_PARENT = 100,
HEIGHT_IN_PERCENT_OF_PARENT = 100;
var gd3 = d3.select('#plot_ts_{{ ts["name"] }}')
.style({
width: WIDTH_IN_PERCENT_OF_PARENT + '%',
'margin-left': (100 - WIDTH_IN_PERCENT_OF_PARENT) / 2 + '%',
{{ responsive_header("barplot_ts_"+ts["name"]) }}
var data = [];
{% for metric in ts["metrics"] %}
var temp_x = [];
var temp_y = [];
var temp_yerr = [];
height: HEIGHT_IN_PERCENT_OF_PARENT + 'vh',
'margin-top': (100 - HEIGHT_IN_PERCENT_OF_PARENT) / 2 + 'vh'
});
var gd = gd3.node();
var data = [];
{% for metric in ts["metrics"] %}
var temp_x = [];
var temp_y = [];
var temp_yerr = [];
{% for task in ts["datapoints_grouped"] %}
temp_x.push("{{ task }}");
temp_y.push({{ ts["datapoints_grouped"][task][metric].mean }});
temp_yerr.push({{ ts["datapoints_grouped"][task][metric].std }});
{% endfor %}
var trace_{{ metric }} = {
x: temp_x,
y: temp_y,
name: '{{ metric }}',
error_y: {
type: 'data',
array: temp_yerr,
visible: true
},
type: 'bar'
};
data.push(trace_{{ metric }});
{% for task in ts["datapoints_grouped"] %}
temp_x.push("{{ task }}");
temp_y.push({{ ts["datapoints_grouped"][task][metric].mean }});
temp_yerr.push({{ ts["datapoints_grouped"][task][metric].std }});
{% endfor %}
var trace_{{ metric }} = {
x: temp_x,
y: temp_y,
name: '{{ metric }}',
error_y: {
type: 'data',
array: temp_yerr,
visible: true
},
type: 'bar'
};
data.push(trace_{{ metric }});
{% endfor %}
var layout = {barmode: 'group'};
Plotly.newPlot('barplot_ts_{{ ts["name"] }}', data, layout);
{{ responsive_footer() }}
</script>
<script>
{{ responsive_header("boxplot_ts_"+ts["name"]) }}
var data = [];
{% for metric in ts["metrics"] %}
var temp_x = [];
var temp_y = [];
{% for task in ts["datapoints_grouped"] %}
var rawArr = {{ ts["datapoints_grouped"][task][metric].raw }};
rawArr.forEach(
function (val) {
temp_x.push("{{ task }}");
temp_y.push(val);
}
);
{% endfor %}
var layout = {barmode: 'group'};
Plotly.newPlot('plot_ts_{{ ts["name"] }}', data, layout);
window.onresize = function () {
Plotly.Plots.resize(gd);
var trace_{{ metric }} = {
x: temp_x,
y: temp_y,
name: '{{ metric }}',
type: 'box'
};
})();
data.push(trace_{{ metric }});
{% endfor %}
var layout = {
boxmode: 'group'
};
Plotly.newPlot('boxplot_ts_{{ ts["name"] }}', data, layout);
{{ responsive_footer() }}
</script>
{% endfor %}
{% endblock %}
\ No newline at end of file
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment