hanbzu/protost.html

## protost.html
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://cdnjs.cloudflare.com/ajax/libs/raphael/1.5.2/raphael-min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup,
  menu, nav, section { display: block; }
</style>
</head>
<body>
  <p id="notepad"></p>
</body>
</html>

## protost.js
// Example trip
var trip = { "number": 2300,
             "color" : 0,
             "stops" : [ // stations array begins
                         { "stationName"   : "Tobalaba",
                           "arrivalTime"   : "13:34:00",
                           "departureTime" : "13:34:20" },

                         { "stationName"   : "Oresund",
                           "arrivalTime"   : "13:35:00",
                           "departureTime" : "13:35:30" },

                         { "stationName"   : "Tunguska",
                           "arrivalTime"   : "13:37:30",
                           "departureTime" : "13:37:50" },

                         { "stationName"   : "Gesundbrunnen",
                           "arrivalTime"   : "13:40:00",
                           "departureTime" : "13:43:03" },

                         { "stationName"   : "Oresund",
                           "arrivalTime"   : "13:45:00",
                           "departureTime" : "13:46:10" }

                        ] // end of stations array
              }; // End of trip


var stations = { "Tobalaba"      : 0,
                 "Oresund"       : 80,
                 "Tunguska"      : 200,
                 "Gesundbrunnen" : 400 };

// Canvas size
var canvasX = 1200;
var canvasY = 800;

// Translates a string with time in HH:MM:SS to seconds
function getIntegerFromTime(timeString) {

  array = timeString.split(':');
  time = parseInt(array[0], 10)*3600 + parseInt(array[1], 10)*60 + parseInt(array[2], 10);
  return time;
}

// It normalises coordinate X so that it takes as much canvas as available
function normaliseX(coord) {

  return canvasX * (coord - getIntegerFromTime(trip.stops[0].departureTime)) / (getIntegerFromTime(trip.stops[4].departureTime) - getIntegerFromTime(trip.stops[0].arrivalTime));
}

// Same as previous function
function normaliseY(coord) {

  return canvasY * (coord - stations.Tobalaba) / (stations.Gesundbrunnen - stations.Tobalaba);
}

// Builds up an SVG path from a trip
function getSvgPath(aTrip) {

  var x = getIntegerFromTime(aTrip.stops[0].arrivalTime).toString(10);
  var y = stations[aTrip.stops[0].stationName.toString(10)];
  var path = "M " + normaliseX(x) + " " + normaliseY(y);

  aTrip.stops.forEach(function(item) {

      // Arrival
      x = getIntegerFromTime(item.arrivalTime).toString(10);
      y = stations[item.stationName].toString(10);
      path += " L " + normaliseX(x) + " " + normaliseY(y);

      // Departure
      x = getIntegerFromTime(item.departureTime).toString(10);
      y = stations[item.stationName].toString(10);
      path += " L " + normaliseX(x) + " " + normaliseY(y);

    });

  return path;
}

// Create a Raphael canvas and display the trip path
var paper = Raphael(document.getElementById("notepad"), canvasX, canvasY);
var oneTrip = paper.path(getSvgPath(trip));
	<!DOCTYPE html>
	<html>
	<head>
	<script class="jsbin" src="http://cdnjs.cloudflare.com/ajax/libs/raphael/1.5.2/raphael-min.js"></script>
	<meta charset=utf-8 />
	<title>JS Bin</title>
	<!--[if IE]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	<style>
	article, aside, figure, footer, header, hgroup,
	menu, nav, section { display: block; }
	</style>
	</head>
	<body>
	<p id="notepad"></p>
	</body>
	</html>
	// Example trip
	var trip = { "number": 2300,
	"color" : 0,
	"stops" : [ // stations array begins
	{ "stationName" : "Tobalaba",
	"arrivalTime" : "13:34:00",
	"departureTime" : "13:34:20" },

	{ "stationName" : "Oresund",
	"arrivalTime" : "13:35:00",
	"departureTime" : "13:35:30" },

	{ "stationName" : "Tunguska",
	"arrivalTime" : "13:37:30",
	"departureTime" : "13:37:50" },

	{ "stationName" : "Gesundbrunnen",
	"arrivalTime" : "13:40:00",
	"departureTime" : "13:43:03" },

	{ "stationName" : "Oresund",
	"arrivalTime" : "13:45:00",
	"departureTime" : "13:46:10" }

	] // end of stations array
	}; // End of trip


	var stations = { "Tobalaba" : 0,
	"Oresund" : 80,
	"Tunguska" : 200,
	"Gesundbrunnen" : 400 };

	// Canvas size
	var canvasX = 1200;
	var canvasY = 800;

	// Translates a string with time in HH:MM:SS to seconds
	function getIntegerFromTime(timeString) {

	array = timeString.split(':');
	time = parseInt(array[0], 10)3600 + parseInt(array[1], 10)60 + parseInt(array[2], 10);
	return time;
	}

	// It normalises coordinate X so that it takes as much canvas as available
	function normaliseX(coord) {

	return canvasX * (coord - getIntegerFromTime(trip.stops[0].departureTime)) / (getIntegerFromTime(trip.stops[4].departureTime) - getIntegerFromTime(trip.stops[0].arrivalTime));
	}

	// Same as previous function
	function normaliseY(coord) {

	return canvasY * (coord - stations.Tobalaba) / (stations.Gesundbrunnen - stations.Tobalaba);
	}

	// Builds up an SVG path from a trip
	function getSvgPath(aTrip) {

	var x = getIntegerFromTime(aTrip.stops[0].arrivalTime).toString(10);
	var y = stations[aTrip.stops[0].stationName.toString(10)];
	var path = "M " + normaliseX(x) + " " + normaliseY(y);

	aTrip.stops.forEach(function(item) {

	// Arrival
	x = getIntegerFromTime(item.arrivalTime).toString(10);
	y = stations[item.stationName].toString(10);
	path += " L " + normaliseX(x) + " " + normaliseY(y);

	// Departure
	x = getIntegerFromTime(item.departureTime).toString(10);
	y = stations[item.stationName].toString(10);
	path += " L " + normaliseX(x) + " " + normaliseY(y);

	});

	return path;
	}

	// Create a Raphael canvas and display the trip path
	var paper = Raphael(document.getElementById("notepad"), canvasX, canvasY);
	var oneTrip = paper.path(getSvgPath(trip));