88 lines
2.5 KiB
HTML
88 lines
2.5 KiB
HTML
<html>
|
|
<head>
|
|
<title>Benchmarks</title>
|
|
<meta charset="UTF-8">
|
|
<style type="text/css">
|
|
body { margin: 40px auto;
|
|
font-family: Arial;
|
|
font-size: 14px;
|
|
color: #333;
|
|
max-width: 900px; }
|
|
a { text-decoration: none; color: #06b; }
|
|
</style>
|
|
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
|
|
<script>
|
|
google.charts.load('current', {'packages':['line', 'bar']});
|
|
google.charts.setOnLoadCallback(draw_charts);
|
|
|
|
function transposeDataTable(dt)
|
|
{
|
|
/* Swap rows and columns. Bar and line charts expect different layouts,
|
|
* with this function we can use the same data source for both. */
|
|
var ndt = new google.visualization.DataTable;
|
|
ndt.addColumn('string',dt.getColumnLabel(0));
|
|
for(var x=1; x<dt.getNumberOfColumns(); x++) {
|
|
ndt.addRow([dt.getColumnLabel(x)]);
|
|
}
|
|
for(var x=0; x<dt.getNumberOfRows(); x++) {
|
|
ndt.addColumn('number', dt.getValue(x,0));
|
|
for(var y=1; y<dt.getNumberOfColumns(); y++) {
|
|
ndt.setValue(y-1, x+1, dt.getValue(x,y));
|
|
ndt.setFormattedValue(y-1, x+1, dt.getFormattedValue(x,y));
|
|
}
|
|
}
|
|
return ndt;
|
|
}
|
|
|
|
function draw_charts()
|
|
{
|
|
/* Load JSON data. */
|
|
var json_data = %JSON_DATA%;
|
|
|
|
/* Clear contents. */
|
|
charts_elem = document.getElementById("charts");
|
|
while(charts_elem.firstChild)
|
|
{
|
|
charts_elem.removeChild(charts_elem.firstChild);
|
|
}
|
|
|
|
/* Draw charts for each device. */
|
|
for (var i = 0; i < json_data.length; i++)
|
|
{
|
|
device = json_data[i];
|
|
|
|
/* Chart drawing options. */
|
|
var options = {
|
|
chart: {title: device["name"], subtitle: device['device']},
|
|
pointsVisible: true,
|
|
pointSize: 2.5,
|
|
height: 500,
|
|
};
|
|
|
|
/* Create chart div. */
|
|
elem = document.createElement('div');
|
|
elem.id = device["id"];
|
|
charts_elem.appendChild(elem)
|
|
|
|
/* Create chart. */
|
|
var data = new google.visualization.DataTable(device["data"]);
|
|
if (device['chart_type'] == 'line') {
|
|
var chart = new google.charts.Line(elem);
|
|
chart.draw(data, options);
|
|
}
|
|
else {
|
|
var chart = new google.charts.Bar(elem);
|
|
chart.draw(transposeDataTable(data), options);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<h1>Benchmarks</h1>
|
|
<div id="charts">
|
|
...
|
|
</div>
|
|
</body>
|
|
</html>
|