hippietrail/travel-se-stats.html

## travel-se-stats.html
<html>
  <head>
    <!--Load the AJAX API-->
    <style type="text/css">
    #input {
      width:100%;
      height:95%;
    }
    #text {
      width:100%;
      height:90%;
    }
    #output {
      width:100%;
      height:95%;
    }
    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">

      // Load the Visualization API and the annotatedtimeline chart package.
      google.load("visualization", "1", {packages: ['annotatedtimeline']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.setOnLoadCallback(doStuff);

      // Callback that creates and populates a data table,
      // instantiates the chart, passes in the data and
      // draws it.
      function doStuff() {
        $("#showinput").click(function(){ $("#showinput").prop('disabled', true); $("#showoutput").prop('disabled', false); $("#input").show(); $("#output").hide(); });
        $("#showoutput").click(function(){ $("#showinput").prop('disabled', false); $("#showoutput").prop('disabled', true); $("#input").hide(); $("#output").show(); });

        var tzo = new Date().getTimezoneOffset() / -60;

        $("#itz").val(tzo);
        $("#otz").text(tzo);

        $("#enter").click(function(){ drawChart( $("#text").val(), $("#itz").val(), $("#otz").text() ) });
      }

      function drawChart(raw, itz, otz) {

        var tzOffset = otz - itz;

        $("#tzdiff").text(tzOffset);

        // Create the data table.
        var data = new google.visualization.DataTable();

        var lines = raw.split(/\r?\n/);

        var l, f;

        var fields = lines[0].split(",");

        data.addColumn('datetime', fields[0]);

        for (f = 1; f < fields.length; ++f) {
          data.addColumn('number', fields[f]);
        }

        data.addRows(lines.length - 1);

        for (l = 1; l < lines.length; ++l) {
          fields = lines[l].split(",");

          var d = new Date();

          var m = fields[0].match(/^(\d\d?)\.(\d\d?)\.(\d\d\d\d) (\d\d?):(\d\d)$/);

          if (!m) continue;

          d.setFullYear(m[3]);
          d.setMonth(m[2] - 1);
          d.setDate(m[1]);
          d.setHours(m[4]);
          d.setMinutes(m[5]);

          // Roflcopter TZ to my TZ?
          d.setTime ( d.getTime() + tzOffset * 60 * 60 * 1000 );

          data.setValue(l-1, 0, d);

          data.setValue(l-1, 1, parseFloat(fields[1]));

          for (f = 2; f < fields.length; ++f) {
            if (f != 3) {
              data.setValue(l-1, f, parseInt(fields[f]));
            }
          }
        }

        // Instantiate and draw our chart, passing in some options.
        var annotatedtimeline = new google.visualization.AnnotatedTimeLine(document.getElementById('output'));

        $("#showinput").prop('disabled', false);
        $("#showoutput").prop('disabled', true);
        $("#input").hide();
        $("#output").show();

        annotatedtimeline.draw(data, {'displayAnnotations': true, 'scaleType': 'allmaximized'});
      }
    </script>
  </head>

  <body>
    <div id="app">
      <button id="showinput" disabled="disabled">Input</button> <button id="showoutput">Output</button> (Timezone difference: <span id="tzdiff">?</span>)
      <div id="input" style="display:block">
        <textarea id="text"></textarea>
        Input timezone: <input id="itz">?</input><button id="enter">Enter</button>
        Output timezone: <span id="otz">?</span>
      </div>
      <!--Div that will hold the chart-->
      <div id="output" style="display:none">
      </div>
    </div>
  </body>
</html>
	<html>
	<head>
	<!--Load the AJAX API-->
	<style type="text/css">
	#input {
	width:100%;
	height:95%;
	}
	#text {
	width:100%;
	height:90%;
	}
	#output {
	width:100%;
	height:95%;
	}
	</style>
	<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
	<script type="text/javascript" src="https://www.google.com/jsapi"></script>
	<script type="text/javascript">

	// Load the Visualization API and the annotatedtimeline chart package.
	google.load("visualization", "1", {packages: ['annotatedtimeline']});

	// Set a callback to run when the Google Visualization API is loaded.
	google.setOnLoadCallback(doStuff);

	// Callback that creates and populates a data table,
	// instantiates the chart, passes in the data and
	// draws it.
	function doStuff() {
	$("#showinput").click(function(){ $("#showinput").prop('disabled', true); $("#showoutput").prop('disabled', false); $("#input").show(); $("#output").hide(); });
	$("#showoutput").click(function(){ $("#showinput").prop('disabled', false); $("#showoutput").prop('disabled', true); $("#input").hide(); $("#output").show(); });

	var tzo = new Date().getTimezoneOffset() / -60;

	$("#itz").val(tzo);
	$("#otz").text(tzo);

	$("#enter").click(function(){ drawChart( $("#text").val(), $("#itz").val(), $("#otz").text() ) });
	}

	function drawChart(raw, itz, otz) {

	var tzOffset = otz - itz;

	$("#tzdiff").text(tzOffset);

	// Create the data table.
	var data = new google.visualization.DataTable();

	var lines = raw.split(/\r?\n/);

	var l, f;

	var fields = lines[0].split(",");

	data.addColumn('datetime', fields[0]);

	for (f = 1; f < fields.length; ++f) {
	data.addColumn('number', fields[f]);
	}

	data.addRows(lines.length - 1);

	for (l = 1; l < lines.length; ++l) {
	fields = lines[l].split(",");

	var d = new Date();

	var m = fields[0].match(/^(\d\d?)\.(\d\d?)\.(\d\d\d\d) (\d\d?):(\d\d)$/);

	if (!m) continue;

	d.setFullYear(m[3]);
	d.setMonth(m[2] - 1);
	d.setDate(m[1]);
	d.setHours(m[4]);
	d.setMinutes(m[5]);

	// Roflcopter TZ to my TZ?
	d.setTime ( d.getTime() + tzOffset * 60 * 60 * 1000 );

	data.setValue(l-1, 0, d);

	data.setValue(l-1, 1, parseFloat(fields[1]));

	for (f = 2; f < fields.length; ++f) {
	if (f != 3) {
	data.setValue(l-1, f, parseInt(fields[f]));
	}
	}
	}

	// Instantiate and draw our chart, passing in some options.
	var annotatedtimeline = new google.visualization.AnnotatedTimeLine(document.getElementById('output'));

	$("#showinput").prop('disabled', false);
	$("#showoutput").prop('disabled', true);
	$("#input").hide();
	$("#output").show();

	annotatedtimeline.draw(data, {'displayAnnotations': true, 'scaleType': 'allmaximized'});
	}
	</script>
	</head>

	<body>
	<div id="app">
	<button id="showinput" disabled="disabled">Input</button> <button id="showoutput">Output</button> (Timezone difference: <span id="tzdiff">?</span>)
	<div id="input" style="display:block">
	<textarea id="text"></textarea>
	Input timezone: <input id="itz">?</input><button id="enter">Enter</button>
	Output timezone: <span id="otz">?</span>
	</div>
	<!--Div that will hold the chart-->
	<div id="output" style="display:none">
	</div>
	</div>
	</body>
	</html>