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> 91
