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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
|
<!DOCTYPE html>
<!--
* Copyright (c) 2012 The Chromium Authors. All rights reserved. Use of this
* source code is governed by a BSD-style license that can be found in the
* LICENSE file.
-->
<html>
<head>
<title>Device Stats Monitor</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<style>
body {
font-family: sans-serif
}
</style>
</head>
<body>
<h2>Device Stats Monitor</h2>
<ul>
<li>Pass path to trace data via the <code>results</code> querystring param.
<li>Combine charts with the <code>combine</code> querystring param (e.g. <code>&combine=sectors_read,sectors_written</code>).
<li>Use <code>stacked=true</code> to stack combined charts instead of overlaying (default).
</ul>
</body>
<script>
google.load("visualization", "1", {packages:["corechart"]});
/**
* @returns The querystring param value for |name| or an empty string.
*/
function getQuerystringParam(name) {
name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
var regexS = "[\\?&]" + name + "=([^&#]*)";
var regex = new RegExp(regexS);
var results = regex.exec(window.location.search);
if (results == null)
return "";
else
return decodeURIComponent(results[1].replace(/\+/g, " "));
}
/**
* @returns An array of keys in |obj| sorted by value.
*/
function sortedKeys(obj) {
var keys = [];
for (var key in obj) {
keys.push(key);
}
keys.sort();
return keys;
}
/**
* Removes by value all params from array.
*/
Array.prototype.remove = function() {
var what, a = arguments, l = a.length, ax;
while (l && this.length) {
what = a[--l];
while ((ax = this.indexOf(what)) != -1) {
this.splice(ax, 1);
}
}
return this;
}
/**
* Displays a new chart.
*
* @param {Number} hz Number of sample per second of the data.
* @param {String} name Name to display on top of chart.
* @param {Number[][]} values Array of value arrays to display.
* @param {Boolean} stacked Whether to display values as stacked.
*/
function displayChart(hz, name, values, units, stacked) {
var data = new google.visualization.DataTable();
data.addColumn('number', 'ms');
var names = name.split(',');
for (var i = 0; i < names.length; i++) {
data.addColumn('number', names[i]);
}
var rows = [];
var interval = 1000.0 / hz;
for (var i = 0; i < values[0].length; i++) {
var row = [i*interval];
for (var j = 0; j < values.length; j++) {
row.push(values[j][i]);
}
rows.push(row);
}
data.addRows(rows);
var options = {
hAxis: {title: 'ms (' + hz + 'hz)'},
isStacked: stacked,
legend: {position: 'top'},
vAxis: {title: units},
};
var elem = document.createElement('DIV');
elem.style = 'width:100%;height:500px';
document.body.appendChild(elem);
var chart = new google.visualization.AreaChart(elem);
chart.draw(data, options);
}
/**
* Displays all charts.
*
* Invoked by the results script. JSONP is used to avoid security
* restrictions on XHRs for file:// URLs.
*/
function display(hz, results, units) {
var combine = getQuerystringParam('combine');
var keys = sortedKeys(results);
for (var i = 0; i < keys.length; i++) {
var key = keys[i];
var name = key;
var values = [results[key]];
var unit = units[key];
if (combine.indexOf(key) >= 0) {
i--;
name = combine;
values = [];
var combined_keys = combine.split(',');
for (var j = 0; j < combined_keys.length; j++) {
values.push(results[combined_keys[j]]);
keys.remove(combined_keys[j]);
}
}
displayChart(hz, name, values, unit, !!getQuerystringParam('stacked'));
}
}
var resultsPath = getQuerystringParam('results');
if (resultsPath)
document.write("<script src='" + resultsPath + "'></"+"script>");
else
document.write("Please specify results querystring param.");
</script>
</html>
|
