OLD | NEW |
| (Empty) |
1 <html> | |
2 <!-- | |
3 Copyright (c) 2011 The WebRTC project authors. All Rights Reserved. | |
4 | |
5 Use of this source code is governed by a BSD-style license | |
6 that can be found in the LICENSE file in the root of the source | |
7 tree. An additional intellectual property rights grant can be found | |
8 in the file PATENTS. All contributing project authors may | |
9 be found in the AUTHORS file in the root of the source tree. | |
10 | |
11 Template file to be used to generate Charts for Video Quality Metrics. | |
12 --> | |
13 <head> | |
14 <link href="http://code.google.com/css/codesite.pack.04102009.css" | |
15 rel="stylesheet" type="text/css" /> | |
16 </head> | |
17 <script src="https://www.google.com/jsapi" type="text/javascript"></script> | |
18 <script> | |
19 google.load('visualization', '1', {packages:['table', 'corechart']}); | |
20 | |
21 google.setOnLoadCallback(drawTable); | |
22 function drawTable() { | |
23 /* Build data tables and views */ | |
24 var configurations_data_table = | |
25 new google.visualization.DataTable(%(json_configurations)s); | |
26 var ssim_data_table = | |
27 new google.visualization.DataTable(%(json_ssim_data)s); | |
28 var psnr_data_table = | |
29 new google.visualization.DataTable(%(json_psnr_data)s); | |
30 var packet_loss_data_table = | |
31 new google.visualization.DataTable(%(json_packet_loss_data)s); | |
32 var bit_rate_data_table = | |
33 new google.visualization.DataTable(%(json_bit_rate_data)s); | |
34 | |
35 /* Display tables and charts */ | |
36 var configurations_table = new google.visualization.Table( | |
37 document.getElementById('table_div_configurations')); | |
38 configurations_table.draw(configurations_data_table, { | |
39 height: 200 | |
40 }); | |
41 | |
42 var ssim_chart = new google.visualization.LineChart( | |
43 document.getElementById('table_div_ssim')); | |
44 ssim_chart.draw(ssim_data_table, { | |
45 colors: ['blue', 'red', 'lightblue', 'pink'], | |
46 vAxis: {title: 'SSIM'}, | |
47 hAxis: {title: 'Frame'}, | |
48 width: 1200, height: 300, | |
49 }); | |
50 | |
51 var psnr_chart = new google.visualization.LineChart( | |
52 document.getElementById('table_div_psnr')); | |
53 psnr_chart.draw(psnr_data_table, { | |
54 colors: ['blue', 'red', 'lightblue', 'pink'], | |
55 vAxis: {title: 'PSNR (dB)'}, | |
56 hAxis: {title: 'Frame'}, | |
57 width: 1200, height: 300, | |
58 }); | |
59 | |
60 var packet_loss_chart = new google.visualization.LineChart( | |
61 document.getElementById('table_div_packet_loss')); | |
62 packet_loss_chart.draw(packet_loss_data_table, { | |
63 colors: ['blue', 'red', 'lightblue', 'pink'], | |
64 vAxis: {title: 'Packets dropped'}, | |
65 hAxis: {title: 'Frame'}, | |
66 width: 1200, height: 300, | |
67 }); | |
68 | |
69 var bit_rate_chart = new google.visualization.LineChart( | |
70 document.getElementById('table_div_bit_rate')); | |
71 bit_rate_chart.draw(bit_rate_data_table, { | |
72 colors: ['blue', 'red', 'lightblue', 'pink', 'green'], | |
73 vAxis: {title: 'Bit rate'}, | |
74 hAxis: {title: 'Frame'}, | |
75 width: 1200, height: 300, | |
76 }); | |
77 } | |
78 </script> | |
79 <body> | |
80 <h3>Test Configurations:</h3> | |
81 <div id="table_div_configurations"></div> | |
82 <h3>Messages:</h3> | |
83 <pre>%(messages)s</pre> | |
84 <h3>Metrics measured per frame:</h3> | |
85 <div id="table_div_ssim"></div> | |
86 <div id="table_div_psnr"></div> | |
87 <div id="table_div_packet_loss"></div> | |
88 <div id="table_div_bit_rate"></div> | |
89 </body> | |
90 </html> | |
OLD | NEW |