507
edits
mNo edit summary |
|||
Line 149: | Line 149: | ||
<html> | <html> | ||
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> | <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> | ||
<button id="addData">Show CPU </button> | <style> | ||
<button id="showFPS">Show FPS </button> | .button { | ||
<button id="reset">Show | background-color: #008CBA; | ||
border: none; | |||
color: white; | |||
padding: 15px 32px; | |||
text-align: center; | |||
text-decoration: none; | |||
display: inline-block; | |||
font-size: 16px; | |||
margin: 4px 2px; | |||
cursor: pointer; | |||
} | |||
</style> | |||
<button class="button" id="addData">Show CPU </button> | |||
<button class="button" id="showFPS">Show FPS </button> | |||
<button class="button" id="reset">Show All</button> | |||
Show InceptionV1: <input class="button" type="checkbox" id="myCheck" checked=true> | |||
Show InceptionV2: <input class="button" type="checkbox" id="myCheck2" checked=true> | |||
<br><br> | <br><br> | ||
Line 157: | Line 174: | ||
<script> | <script> | ||
google.charts.load('current', {'packages':['corechart', 'bar']}); | |||
google.charts.setOnLoadCallback(drawStuff); | google.charts.setOnLoadCallback(drawStuff); | ||
function drawStuff() { | function drawStuff() { | ||
var | var check_box2 = document.getElementById("myCheck2"); | ||
check_box2.onchange = show_1; | |||
var check_box = document.getElementById("myCheck"); | |||
check_box.onchange = show_0; | |||
var chartDiv = document.getElementById('chart_div'); | var chartDiv = document.getElementById('chart_div'); | ||
var data = google.visualization.arrayToDataTable([ | var data = google.visualization.arrayToDataTable([ | ||
['Model', 'FPS', 'CPU'], | ['Model', 'x86-FPS', 'Xavier-FPS', 'x64-CPU', 'Xavier-CPU'], | ||
['InceptionV1', | ['InceptionV1', 20.164, 7.642, 48, 71], | ||
['InceptionV2', | ['InceptionV2', 14.821, 5.587, 44, 68], | ||
['InceptionV3', 6. | ['InceptionV3', 6.086, 2.286, 50, 72], | ||
['InceptionV4', | ['InceptionV4', 2.977, 1.153, 50, 72], | ||
['TinyyoloV2', 9. | ['TinyyoloV2', 9.111, 2.966, 47, 67], | ||
[' | ['TinyyoloV3', 10.286, 3.43, 45, 63] | ||
]); | ]); | ||
Line 182: | Line 202: | ||
series: { | series: { | ||
0: { axis: 'distance' }, // Bind series 0 to an axis named 'distance'. | 0: { axis: 'distance' }, // Bind series 0 to an axis named 'distance'. | ||
1: { axis: 'brightness' } // Bind series 1 to an axis named 'brightness'. | //1: { axis: 'brightness' } // Bind series 1 to an axis named 'brightness'. | ||
}, | }, | ||
axes: { | axes: { | ||
y: { | y: { | ||
distance: {label: 'FPS'}, // Left y-axis. | distance: {side: 'left',label: 'FPS'}, // Left y-axis. | ||
brightness: {side: 'right', label: 'CPU usage'} // Right y-axis. | brightness: {side: 'right', label: 'CPU usage'} // Right y-axis. | ||
} | } | ||
Line 192: | Line 212: | ||
}; | }; | ||
var materialChart = new google.charts.Bar(chartDiv); | var materialChart = new google.charts.Bar(chartDiv); | ||
view = new google.visualization.DataView(data); | |||
function drawMaterialChart() { | function drawMaterialChart() { | ||
var materialChart = new google.charts.Bar(chartDiv); | |||
materialChart.draw(data, google.charts.Bar.convertOptions(materialOptions)); | materialChart.draw(data, google.charts.Bar.convertOptions(materialOptions)); | ||
button.onclick = addNewRow; | view = new google.visualization.DataView(data); | ||
//button.onclick = addNewRow; | |||
} | } | ||
function | var button = document.getElementById('addData'); | ||
button.onclick = function() { | |||
//data.removeRow(0); | //data.removeRow(0); | ||
//data.removeColumn(2); | //data.removeColumn(2); | ||
view = new google.visualization.DataView(data); | //view = new google.visualization.DataView(data); | ||
view.setColumns([0,3,4]); | |||
view.hideColumns([1]); | view.hideColumns([1]); | ||
view.hideColumns([2]); | |||
materialChart.draw(view, materialOptions); | materialChart.draw(view, materialOptions); | ||
//data.insertRows(0, [['Test-A-changed', 14, 13]]); | //data.insertRows(0, [['Test-A-changed', 14, 13]]); | ||
Line 210: | Line 235: | ||
var showFPS_only = document.getElementById("showFPS"); | var showFPS_only = document.getElementById("showFPS"); | ||
showFPS_only.onclick = function() { | showFPS_only.onclick = function() { | ||
view = new google.visualization.DataView(data); | //view = new google.visualization.DataView(data); | ||
view.hideColumns([ | view.setColumns([0,1,2]); | ||
view.hideColumns([3]); | |||
view.hideColumns([4]); | |||
materialChart.draw(view, materialOptions); | materialChart.draw(view, materialOptions); | ||
} | |||
function show_0() { | |||
//view = new google.visualization.DataView(data); | |||
if (check_box.checked == false){ | |||
view.hideRows([0]); | |||
materialChart.draw(view, materialOptions); | |||
//show_1(); | |||
}else{ | |||
view.setRows([0,1,2,3,4,5]); | |||
materialChart.draw(view, materialOptions); | |||
//show_1(); | |||
} | |||
//view.setColumns([0,1,2]); | |||
//view.hideColumns([3]); | |||
//view.hideColumns([4]); | |||
//materialChart.draw(view, materialOptions); | |||
} | |||
function show_1() { | |||
//view = new google.visualization.DataView(data); | |||
if (check_box2.checked == false){ | |||
view.hideRows([1]); | |||
materialChart.draw(view, materialOptions); | |||
}else{ | |||
view.setRows([0,1,2,3,4,5]); | |||
materialChart.draw(view, materialOptions); | |||
//show_0(); | |||
} | |||
//show_0(); | |||
//view.setColumns([0,1,2]); | |||
//view.hideColumns([3]); | |||
//view.hideColumns([4]); | |||
//materialChart.draw(view, materialOptions); | |||
} | } | ||
drawMaterialChart(); | drawMaterialChart(); | ||
var hideSal = document.getElementById("reset"); | var hideSal = document.getElementById("reset"); | ||
hideSal.onclick = function() { | hideSal.onclick = function() { | ||
drawMaterialChart(); | view.setRows([0,1,2,3,4,5]); | ||
view.setColumns([0,1,2,3,4,]); | |||
materialChart.draw(view, materialOptions); | |||
//drawMaterialChart(); | |||
} | } | ||
drawMaterialChart(); | drawMaterialChart(); | ||
Line 223: | Line 288: | ||
</script> | </script> | ||
</html> | </html> | ||
<br> | <br> | ||
<noinclude> | <noinclude> | ||
{{GstInference/Foot|Example Applications/DispTec|Model Zoo}} | {{GstInference/Foot|Example Applications/DispTec|Model Zoo}} | ||
</noinclude> | </noinclude> |
edits