1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Benchmark visualization</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
function buildSeries(obj) {
const colorSerial = 'rgba(119, 152, 191, .5)';
const colorAsync = 'rgba(223, 83, 83, .5)';
return [].concat.apply([], obj.map((group, groupIndex) => (
group.versions.map((version, versionIndex) => ({
name: `${group.name} ${version.name}`,
color: versionIndex === 0 ? colorSerial : colorAsync,
data: version.runs.map((run) => (
[ groupIndex, Math.round((run.kernel + run.user) * 1000) ]
))
}))
)));
}
const result = JSON.parse('[{"name":"AmericanKamikazePilots","versions":[{"name":"Serial","runs":[{"kernel":0.00,"user":0.80,"memory":70216},{"kernel":0.00,"user":0.78,"memory":70156},{"kernel":0.00,"user":0.79,"memory":70160},{"kernel":0.00,"user":0.79,"memory":70212},{"kernel":0.00,"user":0.78,"memory":70984}]},{"name":"Async","runs":[{"kernel":0.02,"user":2.06,"memory":43812},{"kernel":0.01,"user":2.05,"memory":43880},{"kernel":0.01,"user":2.08,"memory":43960},{"kernel":0.00,"user":2.09,"memory":43692},{"kernel":0.01,"user":2.05,"memory":43712}]}]},{"name":"Quivering_Sharks","versions":[{"name":"Serial","runs":[{"kernel":0.00,"user":1.10,"memory":3372},{"kernel":0.00,"user":1.09,"memory":3304},{"kernel":0.00,"user":1.09,"memory":3268},{"kernel":0.00,"user":1.09,"memory":3332},{"kernel":0.00,"user":1.09,"memory":3364}]},{"name":"Async","runs":[{"kernel":0.00,"user":1.27,"memory":42164},{"kernel":0.00,"user":1.35,"memory":42228},{"kernel":0.01,"user":1.38,"memory":42220},{"kernel":0.01,"user":1.33,"memory":42148},{"kernel":0.00,"user":1.26,"memory":42128}]}]},{"name":"D","versions":[{"name":"Serial","runs":[{"kernel":0.00,"user":0.65,"memory":2280},{"kernel":0.00,"user":0.64,"memory":2548},{"kernel":0.00,"user":0.64,"memory":2532},{"kernel":0.00,"user":0.64,"memory":2524},{"kernel":0.00,"user":0.64,"memory":2504}]},{"name":"Async","runs":[{"kernel":0.34,"user":4.45,"memory":512368},{"kernel":0.29,"user":4.51,"memory":493020},{"kernel":0.29,"user":4.46,"memory":498560},{"kernel":0.30,"user":4.50,"memory":476372},{"kernel":0.35,"user":4.45,"memory":471544}]}]},{"name":"ro","versions":[{"name":"Serial","runs":[{"kernel":0.00,"user":0.47,"memory":3124},{"kernel":0.00,"user":0.47,"memory":3128},{"kernel":0.00,"user":0.46,"memory":3148},{"kernel":0.00,"user":0.46,"memory":3248},{"kernel":0.00,"user":0.47,"memory":3120}]},{"name":"Async","runs":[{"kernel":0.00,"user":0.88,"memory":3284},{"kernel":0.00,"user":0.97,"memory":3336},{"kernel":0.00,"user":0.97,"memory":3240},{"kernel":0.00,"user":0.84,"memory":3324},{"kernel":0.00,"user":0.88,"memory":3336}]}]},{"name":"ReferenceStd","versions":[{"name":"Serial","runs":[{"kernel":0.00,"user":0.61,"memory":2836},{"kernel":0.00,"user":0.60,"memory":2912},{"kernel":0.00,"user":0.59,"memory":2588},{"kernel":0.00,"user":0.60,"memory":2904},{"kernel":0.00,"user":0.59,"memory":2620}]},{"name":"Async","runs":[{"kernel":0.14,"user":1.41,"memory":299872},{"kernel":0.15,"user":1.38,"memory":299608},{"kernel":0.13,"user":1.39,"memory":299684},{"kernel":0.13,"user":1.41,"memory":299588},{"kernel":0.14,"user":1.41,"memory":299856}]}]},{"name":"RefernceCustom","versions":[{"name":"Serial","runs":[{"kernel":0.00,"user":0.22,"memory":2580},{"kernel":0.00,"user":0.22,"memory":2580},{"kernel":0.00,"user":0.22,"memory":2776},{"kernel":0.00,"user":0.22,"memory":2776},{"kernel":0.00,"user":0.22,"memory":2508}]},{"name":"Async","runs":[{"kernel":0.03,"user":0.66,"memory":41848},{"kernel":0.03,"user":0.67,"memory":42304},{"kernel":0.02,"user":0.67,"memory":43768},{"kernel":0.01,"user":0.69,"memory":42228},{"kernel":0.01,"user":0.69,"memory":40956}]}]}]');
const style = {
title: { fontSize: '1.625em' },
label: { fontSize: '1.4em', color: '#3e90e5' }
};
Highcharts.chart('container', {
chart: {
animation: false,
type: 'scatter',
zoomType: 'y',
},
title: {
text: 'Async IO Challenge Results | 10m Tasks'
},
xAxis: {
//type: 'logarithmic',
title: {
enabled: true,
text: 'Solution Name',
style: style.title
},
labels: {
style: style.label
},
startOnTick: true,
endOnTick: true,
showLastLabel: true,
categories: result.map(elem => elem.name)
},
yAxis: {
title: {
text: 'Time in ms',
style: style.title
},
labels: {
style: style.label
},
min: 0
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 80,
y: 10,
floating: true,
backgroundColor: '#FFFFFF',
borderWidth: 1
},
plotOptions: {
scatter: {
marker: {
radius: 7,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.y} ms'
}
}
},
series: buildSeries(result)
});
}); // addEventListener
</script>
</head>
<body>
<div
id="container"
style="height: 95vh"
>
</div>
</body>
</html>