s3u/index.html

## index.html

<html>
<head>
    <script type="text/javascript"
      src='http://www.google.com/jsapi?autoload={"modules":[{"name":"visualization","version":"1","packages":["corechart"]}]}'>
    </script>
    <script type="text/javascript" src="http://stevenlevithan.com/demo/parseuri/js/assets/parseuri.js"></script>
    <script type="text/javascript">
        window.ondragover = function () {
            return false;
        };
        window.ondragend = function () {
            return false;
        };

        window.ondrop = function (e) {
            e.stopPropagation();
            e.preventDefault();

            var file = e.dataTransfer.files[0];
            var reader = new FileReader();
            reader.onloadend = function (event) {
                var data = event.target.result;
                var obj = {};
                try {
                    var json = JSON.parse(data);
                    json.log.entries.forEach(function (entry) {
                        var parsed = parseUri(entry.request.url);
                        if(!obj[parsed.host]) {
                            obj[parsed.host] = {
                                blocked: 0,
                                resources: 0,
                                series: [parsed.host]
                            };
                        }
                        var blocked = entry.timings.blocked > -1 ? entry.timings.blocked : 0;
                        obj[parsed.host].blocked = obj[parsed.host].blocked + blocked;
                        obj[parsed.host].series.push(blocked);
                        obj[parsed.host].resources = obj[parsed.host].resources + 1
                    });

                    var blocked = [];
                    blocked.push(['Domain', 'No of resources', 'Average blocked msec'])
                    for(p in obj) {
                        if(obj.hasOwnProperty(p)) {
                            obj[p].blocked = Math.round(obj[p].blocked / obj[p].resources)
                            var line = [p, obj[p].resources, obj[p].blocked];
                            blocked.push(line);
                        }
                    }

                    blocked = google.visualization.arrayToDataTable(blocked);
                    var options = {
                          width:600, height:300
                    };

                    blocked.sort([{column: 2, desc: true}, {column: 1, desc: true}])

                    var view = new google.visualization.DataView(blocked);
                    var rows = [];
                    for(var i = 0; i < Math.min(blocked.getNumberOfRows(), 5); i++) { rows.push(i);}
                    view.setRows(rows);
                    var chart = new google.visualization.BarChart(document.getElementById('blocked'));
                    chart.draw(view, options);
                }
                catch(e) {
                    alert(e);
                }
            };
            reader.onerror = function(e) {
                alert(e);
            }

            reader.readAsText(file);
            return false;
        };
    </script>
</head>
<body>
<p>Drag and drop a HAR file in this browser window to see the top 5 blocked domains. Use Firefox.</p>

<div id="blocked" style="width: 900px; height: 300px;"></div>

</body>
</html>

	<html>
	<head>
	<script type="text/javascript"
	src='http://www.google.com/jsapi?autoload={"modules":[{"name":"visualization","version":"1","packages":["corechart"]}]}'>
	</script>
	<script type="text/javascript" src="http://stevenlevithan.com/demo/parseuri/js/assets/parseuri.js"></script>
	<script type="text/javascript">
	window.ondragover = function () {
	return false;
	};
	window.ondragend = function () {
	return false;
	};

	window.ondrop = function (e) {
	e.stopPropagation();
	e.preventDefault();

	var file = e.dataTransfer.files[0];
	var reader = new FileReader();
	reader.onloadend = function (event) {
	var data = event.target.result;
	var obj = {};
	try {
	var json = JSON.parse(data);
	json.log.entries.forEach(function (entry) {
	var parsed = parseUri(entry.request.url);
	if(!obj[parsed.host]) {
	obj[parsed.host] = {
	blocked: 0,
	resources: 0,
	series: [parsed.host]
	};
	}
	var blocked = entry.timings.blocked > -1 ? entry.timings.blocked : 0;
	obj[parsed.host].blocked = obj[parsed.host].blocked + blocked;
	obj[parsed.host].series.push(blocked);
	obj[parsed.host].resources = obj[parsed.host].resources + 1
	});

	var blocked = [];
	blocked.push(['Domain', 'No of resources', 'Average blocked msec'])
	for(p in obj) {
	if(obj.hasOwnProperty(p)) {
	obj[p].blocked = Math.round(obj[p].blocked / obj[p].resources)
	var line = [p, obj[p].resources, obj[p].blocked];
	blocked.push(line);
	}
	}

	blocked = google.visualization.arrayToDataTable(blocked);
	var options = {
	width:600, height:300
	};

	blocked.sort([{column: 2, desc: true}, {column: 1, desc: true}])

	var view = new google.visualization.DataView(blocked);
	var rows = [];
	for(var i = 0; i < Math.min(blocked.getNumberOfRows(), 5); i++) { rows.push(i);}
	view.setRows(rows);
	var chart = new google.visualization.BarChart(document.getElementById('blocked'));
	chart.draw(view, options);
	}
	catch(e) {
	alert(e);
	}
	};
	reader.onerror = function(e) {
	alert(e);
	}

	reader.readAsText(file);
	return false;
	};
	</script>
	</head>
	<body>
	<p>Drag and drop a HAR file in this browser window to see the top 5 blocked domains. Use Firefox.</p>

	<div id="blocked" style="width: 900px; height: 300px;"></div>

	</body>
	</html>