visualize/example.html (126 lines of code) (raw):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Data visualization report</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f0f0f0;
}
h1, h2 {
color: #333;
}
.chart-container {
background-color: white;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
margin-bottom: 20px;
padding: 20px;
overflow: hidden;
}
.button-container {
margin-bottom: 10px;
}
.iter-button {
margin-right: 5px;
padding: 5px 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
.iter-button:hover {
background-color: #45a049;
}
.timeline-chart {
width: 100%;
height: 400px;
}
.ratio-pie {
width: 100%;
height: 400px;
margin-top: 20px;
}
</style>
</head>
<body>
<h1>Data visualization report</h1>
<div class="chart-container">
<h2>Communication type pie chart</h2>
<div id="pie_chart" style="width:100%; height:400px;"></div>
</div>
<div class="chart-container">
<h2>Communication type scatter</h2>
<div id="scatter_by_commtype" style="width:100%; height:600px;"></div>
</div>
<div class="chart-container">
<h2>message size CDF</h2>
<div id="cdf_chart" style="width:100%; height:600px;"></div>
</div>
<div class="chart-container">
<h2>Communication group scatter</h2>
<div id="scatter_by_group" style="width:100%; height:600px;"></div>
</div>
<div class="chart-container">
<h2>Computation Communication Pattern</h2>
<div class="button-container">
{% for i in range(iteration_count) %}
<button class="iter-button" onclick="showIteration({{ i }})">Iteration {{ i + 1 }}</button>
{% endfor %}
</div>
<div id="timeline_chart" class="timeline-chart"></div>
<div id="ratio_pie" class="ratio-pie"></div>
</div>
<div class="chart-container">
<h2>Ratio Pie</h2>
<div id="all_ratio_pie" style="width:100%; height:400px;"></div>
</div>
<script>
var timelineCharts = {{ timeline_charts_js | safe }};
var ratioPies = {{ ratio_pies_js | safe }};
var currentIteration = 0;
document.addEventListener('DOMContentLoaded', function() {
var pieChart = echarts.init(document.getElementById('pie_chart'));
pieChart.setOption({{ pie_chart_js | safe }});
var scatterByCommtype = echarts.init(document.getElementById('scatter_by_commtype'));
scatterByCommtype.setOption({{ scatter_by_commtype_js | safe }});
var cdfChart = echarts.init(document.getElementById('cdf_chart'));
cdfChart.setOption({{ cdf_chart_js | safe }});
var scatterByGroup = echarts.init(document.getElementById('scatter_by_group'));
scatterByGroup.setOption({{ scatter_by_group_js | safe }});
var allRatioPie = echarts.init(document.getElementById('all_ratio_pie'));
allRatioPie.setOption({{ all_ratio_pie | safe }});
showIteration(0);
});
function showIteration(iterIndex) {
var timelineChart = echarts.init(document.getElementById('timeline_chart'));
timelineChart.setOption(JSON.parse(timelineCharts[iterIndex]));
var ratioPie = echarts.init(document.getElementById('ratio_pie'));
ratioPie.setOption(JSON.parse(ratioPies[iterIndex]));
currentIteration = iterIndex;
var buttons = document.getElementsByClassName('iter-button');
for (var i = 0; i < buttons.length; i++) {
if (i === iterIndex) {
buttons[i].style.backgroundColor = '#45a049';
} else {
buttons[i].style.backgroundColor = '#4CAF50';
}
}
}
window.addEventListener('resize', function() {
pieChart.resize();
scatterByCommtype.resize();
cdfChart.resize();
scatterByGroup.resize();
timelineChart.resize();
ratioPie.resize();
allRatioPie.resize();
});
</script>
</body>
</html>