forked from mfontanini/packet-capture-benchmarks
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathhtml-graphics-template.html
89 lines (81 loc) · 2.97 KB
/
html-graphics-template.html
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
<html>
<head>
<title></title>
<style type="text/css">
.table-title {
font-weight: bold;
font-size: 22px;
}
.table-body {
font-size: 20px;
}
.chart {
width: 1200px;
height: 900px;
margin-left: auto;
margin-right: auto;
}
</style>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1.0', {'packages':['corechart']});
google.setOnLoadCallback(draw_charts);
function find_upper_bound(input) {
maximum = 0;
for(i = 0; i < input.length; ++i) {
if(input[i][0] != "scapy" && input[i][1] > maximum) {
maximum = input[i][1];
}
}
return maximum * 1.05;
}
function convert_to_seconds(input) {
for(i = 0; i < input.length; ++i) {
input[i][1] = (input[i][1] / 1000);
}
return input;
}
function draw_graphic(name, output_div, input) {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Library');
data.addColumn('number', 'Seconds');
input.sort(
function(a, b) {
return a[1] > b[1];
}
);
data.addRows(convert_to_seconds(input));
// Set chart options
var options = {
'title' : name,
'width' : 1200,
'height' : 900,
vAxis: {
viewWindowMode: 'explicit',
viewWindow:{
max:find_upper_bound(input),
min:0
}
},
};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.ColumnChart(
document.getElementById(output_div)
);
chart.draw(data, options);
}
function draw_charts() {
draw_graphic('TCP - no options', 'tcp_no_options', {TEST1_DATA});
draw_graphic('TCP - with options', 'tcp_with_options', {TEST2_DATA});
draw_graphic('DNS', 'dns', {TEST3_DATA});
}
</script>
</head>
<body>
<div>
<div id="tcp_no_options" class="chart"></div>
<div id="tcp_with_options" class="chart"></div>
<div id="dns" class="chart"></div>
</div>
</body>
</html>