plot.html

<html>
<head>
<!-- Plotly.js -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<style>
html,body{
	width: 5500px;/* 12*400+4*100=4800+400=5200 */
}
div{
	float: left;
	width: 400px;
}
div:nth-of-type(3n){
	margin-right: 100px;
}
div:nth-of-type(12n+1){
	clear: left;
}
body:after {
	content: "";
	display: table;
	clear: both;
}
</style>
</head>
<body>
<script>
<!-- JAVASCRIPT CODE GOES HERE -->
function log(msg){console.log(msg);}
function loadres(id,title,bgcolor){
	var xmlhttp = new XMLHttpRequest();
	xmlhttp.onreadystatechange = function(){if(xmlhttp.readyState == XMLHttpRequest.DONE && xmlhttp.status == 200){
		var lines = xmlhttp.responseText.split("\n");
		var values, time, bandwidth;
		var res = [];
		for(i in lines){
			values = lines[i].split(" ");
			time = Number(values[0]);
			bandwidth = Number(values[1]);
			if(values.length!=2 || time==NaN || bandwidth==NaN )
				continue;
			res.push({"x":time,"y":bandwidth});
		}
		
		// try to fix holes and missing end
		max_interval = 1.0;
		max_num = 24.9;
		missing = [];
		prev = 0;
		if( res[res.length-1].x < max_num ) // fix the end
			res.push( {"x":max_num,"y":0} );
		for( r in res){
			if(res[r].x-prev > max_interval)
				for(var i = prev+max_interval; i<res[r].x; i+=max_interval )
					missing.push( {"x":i,"y":0} );
			prev = res[r].x;
		}
		res = res.concat(missing);
		res.sort( function(a, b) {return a.x-b.x} );
		
		var data = {
				x: [],
				y: [],
				line: {color: 'rgb(0, 0, 0)'},
				type: 'line'
			};
		for(i in res){
			data.x.push(res[i].x);
			data.y.push(res[i].y);
		}
		Plotly.newPlot(document.getElementById(id), [data], { title: title, paper_bgcolor: bgcolor, plot_bgcolor: bgcolor });
	}};
	xmlhttp.open("GET", "results/"+id+"_bandwith_server_log.csv", true);
	xmlhttp.send();
}
for( cc in {'cubic':0, 'lia':0, 'olia':0, 'wvegas':0, 'balia':0}){
	for( pm in {'default':0, 'fullmesh':0, 'ndiffports':0, 'binder':0}){
		for( sc in {'default':0, 'roundrobin':0, 'redundant':0}){
			id = cc+"_"+pm+"_"+sc;
			title = cc+" "+pm+" "+sc;
			div = document.createElement("div");
			div.setAttribute('id', id);
			document.body.appendChild(div);
			loadres( id, title, {'default':'#FFFF00', 'roundrobin':'#1CE6FF', 'redundant':'#FF34FF'}[sc]);
		}
	}
}
</script>
</body>
</html>