nikolaykasyanov
12/3/2012 - 6:23 PM

speed test csv visualization

speed test csv visualization

speedtest.html
content_copyfile_download
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>SpeedTest results visualizer</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU"
            type="text/javascript"></script>
    <script type="text/javascript">
        ymaps.ready(init);

        function init () {
            var myMap = new ymaps.Map("map", {
                    center: [58.60, 49.7],
                    zoom: 10
                });

            // button event handling
            var showButton = document.getElementById('showButton');
            showButton.addEventListener("click", function() {
            	// parse cvs to array of objects
            	var csv = document.getElementById("csv").value;
            	var lines = csv.match(/[^\r\n]+/g);

            	if (lines.length < 1) {
            		alert("no data");
            	}
            	else {
            		var firstLine = lines[0];
            		var fields = firstLine.split(',');

            		var parsedLines = [];
            		for (var i = 1; i < lines.length; i++) {
            			var line = lines[i];
            			var lineValues = line.split(',');
            			if (lineValues.length != fields.length) {
            				alert('incorrect data: ' + firstLine + "\n" + line);
            				return;
            			}

            			var lineObject = {};
            			for (var fi = 0; fi < fields.length; fi++) {
            				var field = fields[fi];
            				var value = lineValues[fi];

            				lineObject[field] = value;
            			}

            			parsedLines.push(lineObject);

            			console.log(lineObject);
            		}

            		var table = document.createElement("table");
            		var headerRow = document.createElement("tr");
            		for (var fi = 0; fi < fields.length; fi++) {
            			var td = document.createElement("th");
            			td.innerHTML = fields[fi];
            			headerRow.appendChild(td);
            		}
            		var td = document.createElement("th");
            		td.innerHTML = "Address";
            		headerRow.appendChild(td);
            		table.appendChild(headerRow);

            		function geoCode(speedInfo, td) {
            			// start geocoding request
            			ymaps.geocode([speedInfo["Lat"], speedInfo["Lon"]]).then(function (res) {
		                    var names = [];
		                    res.geoObjects.each(function (obj) {
		                        names.push(obj.properties.get('name'));
		                    });
		                    td.innerHTML = names[0];
		                });
            		}

            		for (var i = 0; i < parsedLines.length; i++) {         			
            			var speedInfo = parsedLines[i];
            			var pin = new ymaps.Placemark([speedInfo["Lat"], speedInfo["Lon"]], {
		                    balloonContentBody: speedInfo["Date"] + "<br/>" + speedInfo["Download"] + " KB/s<br/>" + speedInfo["Upload"] + " KB/s",
		                });

            			myMap.geoObjects.add(pin);

            			// craete table row
            			var tr = document.createElement("tr");
            			for (var field in speedInfo) {
            				var value = speedInfo[field];
            				var td = document.createElement("td");
            				td.innerHTML = value;
            				tr.appendChild(td);
            			}
            			var td = document.createElement("td");
            			td.setAttribute("id", "address" + i.toString());
            			tr.appendChild(td);
            			table.appendChild(tr);

            			geoCode(speedInfo, td);
            		}

            		document.body.appendChild(table);
            	}
            });
        }
    </script>
    <style type="text/css">
    	#map {
    		width: 600px;
    		height: 400px;
    	}

    	#csv {
    		width: 600px;
    		height: 400px;
    	}
    </style>
</head>
<body>
	<div id="map"></div>
	<textarea id="csv"></textarea>
	<input type="button" id="showButton" value="show" />
</body>

</html>