Added displaying of configurations at the top of the page.

A table on the top of the page displays the test configurations of the input files present.
The displayed string in the legend of each graph is now fetched from test configuration name instead of using the filename.

Review URL: http://webrtc-codereview.appspot.com/279006

git-svn-id: http://webrtc.googlecode.com/svn/trunk@1104 4adac7df-926f-26a2-2b94-8c16560cd09d
This commit is contained in:
kjellander@webrtc.org
2011-12-05 16:29:21 +00:00
parent 23e1c0a0b1
commit 418bce5ccc
6 changed files with 142 additions and 42 deletions

View File

@@ -8,10 +8,10 @@
in the file PATENTS. All contributing project authors may
be found in the AUTHORS file in the root of the source tree.
Template file to be used to generate Charts for Video Quality Metrics.
Template file to be used to generate Charts for Video Quality Metrics.
-->
<head>
<link href="http://code.google.com/css/codesite.pack.04102009.css"
<link href="http://code.google.com/css/codesite.pack.04102009.css"
rel="stylesheet" type="text/css" />
</head>
<script src="https://www.google.com/jsapi" type="text/javascript"></script>
@@ -20,7 +20,9 @@
google.setOnLoadCallback(drawTable);
function drawTable() {
/* Build data table and views */
/* Build data tables and views */
var configurations_data_table =
new google.visualization.DataTable(%(json_configurations)s);
var ssim_data_table =
new google.visualization.DataTable(%(json_ssim_data)s);
var psnr_data_table =
@@ -28,47 +30,55 @@
var packet_loss_data_table =
new google.visualization.DataTable(%(json_packet_loss_data)s);
var bit_rate_data_table =
new google.visualization.DataTable(%(json_bit_rate_data)s);
new google.visualization.DataTable(%(json_bit_rate_data)s);
/* Display tables and charts */
var configurations_table = new google.visualization.Table(
document.getElementById('table_div_configurations'));
configurations_table.draw(configurations_data_table, {
height: 200
});
var ssim_chart = new google.visualization.LineChart(
document.getElementById('table_div_ssim'));
ssim_chart.draw(ssim_data_table, {
colors: ['blue', 'orange'],
vAxis: {title: 'SSIM'},
hAxis: {title: 'Frame'},
colors: ['blue', 'red', 'lightblue', 'pink'],
vAxis: {title: 'SSIM'},
hAxis: {title: 'Frame'},
width: 1200, height: 300,
});
var psnr_chart = new google.visualization.LineChart(
document.getElementById('table_div_psnr'));
psnr_chart.draw(psnr_data_table, {
colors: ['blue', 'orange'],
vAxis: {title: 'PSNR(dB)'},
hAxis: {title: 'Frame'},
colors: ['blue', 'red', 'lightblue', 'pink'],
vAxis: {title: 'PSNR (dB)'},
hAxis: {title: 'Frame'},
width: 1200, height: 300,
});
var packet_loss_chart = new google.visualization.LineChart(
document.getElementById('table_div_packet_loss'));
packet_loss_chart.draw(packet_loss_data_table, {
colors: ['blue', 'orange'],
vAxis: {title: 'Packets dropped'},
hAxis: {title: 'Frame'},
colors: ['blue', 'red', 'lightblue', 'pink'],
vAxis: {title: 'Packets dropped'},
hAxis: {title: 'Frame'},
width: 1200, height: 300,
});
var bit_rate_chart = new google.visualization.LineChart(
document.getElementById('table_div_bit_rate'));
bit_rate_chart.draw(bit_rate_data_table, {
colors: ['blue', 'orange', 'red'],
vAxis: {title: 'Bit rate'},
hAxis: {title: 'Frame'},
colors: ['blue', 'red', 'lightblue', 'pink', 'green'],
vAxis: {title: 'Bit rate'},
hAxis: {title: 'Frame'},
width: 1200, height: 300,
});
}
</script>
<body>
<h3>Test Configurations:</h3>
<div id="table_div_configurations"></div>
<h3>Messages:</h3>
<pre>%(messages)s</pre>
<h3>Metrics measured per frame:</h3>
@@ -77,4 +87,4 @@
<div id="table_div_packet_loss"></div>
<div id="table_div_bit_rate"></div>
</body>
</html>
</html>