Team:TU-Munich/TUM13 real.ph

From 2013.igem.org

<!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" xml:lang="en" lang="en">
<head>

	<title>Arduino real time data</title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	
	<script src="js/jquery-1.9.1.js"></script>
	<link href="css/smoothness/jquery-ui-1.10.3.custom.min.css" rel="stylesheet">
	<link href="src/normalize.css" rel="stylesheet" type="text/css">
	<link href="src/style.css" rel="stylesheet" type="text/css">
	<link href="src/nv.d3.css" rel="stylesheet" type="text/css">
	
	<script src="src/d3.v3.js"></script>
	<script src="src/crossfilter.js"></script>
	<script src="src/nv.d3.js"></script>
	<script src="src/tooltip.js"></script>
	<script src="src/utils.js"></script>
	<script src="src/legend.js"></script>
	<script src="src/axis.js"></script>
	<script src="src/scatter.js"></script>
	<script src="src/line.js"></script>
	<script src="src/linePlusBarChart.js"></script>
	<script src="src/stream_layers.js"></script>
	
	<script>

var testdata = <?php include 'ajax.php'; ?>.map(function(series) {
  series.values = series.values.map(function(d) { return {x: d[0], y: d[1] } });
  return series;
});

function getUTCString(datum) {
	var ausgabe = '';
	ausgabe += (datum.getUTCMonth()+1 < 10) ? '0' + datum.getUTCMonth()+1 : datum.getUTCMonth()+1;
	ausgabe += '/';
	ausgabe += (datum.getUTCDate() < 10) ? '0' + datum.getUTCDate() : datum.getUTCDate();
	ausgabe += '/';
	ausgabe += datum.getUTCFullYear();
	ausgabe += ' ';
	ausgabe += (datum.getUTCHours() < 10) ? '0' + datum.getUTCHours() : datum.getUTCHours();
	ausgabe += ':';
	ausgabe += (datum.getUTCMinutes() < 10) ? '0' + datum.getUTCMinutes() : datum.getUTCMinutes();
	ausgabe += ':';
	ausgabe += (datum.getUTCSeconds() < 10) ? '0' + datum.getUTCSeconds() : datum.getUTCSeconds();
	return ausgabe;
}

var chart;
nv.addGraph(function() {
    chart = nv.models.linePlusBarChart();
      //  .x(function(d,i) { return i });

		chart.margin({top: 60, right: 100, bottom: 60, left: 100});

   		chart.xAxis
			.tickFormat(function(d) {
				jetzt = new Date(d*1000);
				return getUTCString(jetzt);
			})
			.staggerLabels(true);

		chart.y1Axis.axisLabel('Light (lx)').tickFormat(d3.format(',.0f'));
		chart.y2Axis.axisLabel('Temperature (°C)').tickFormat(d3.format(',.1f'));
        
    chart.bars.forceY([0]);
    chart.lines.forceY([0]);
    nv.log(testdata);
    d3.select('#chart svg')
        .datum(testdata)
        .call(chart);

    nv.utils.windowResize(chart.update);

    return chart;
});

$(document).ready(function(){

window.setInterval(function(){

$.ajax({
    url: 'ajax.php',
    type: "GET",
    error: function(xhr, status) {
      $('body').prepend($("<div class='ui-widget'><div class='ui-state-error ui-corner-all' style='padding: 0 .7em;'><p><span class='ui-icon ui-icon-alert' style='float: left; margin-right: .3em;'></span><strong>Alert:</strong>AJAX request failed.</p></div></div>"));
    },
    success: function(json) {
      testdata = eval(json).map(function(series) {
  series.values = series.values.map(function(d) { return {x: d[0], y: d[1] } });
  return series;
});
    d3.select('#chart svg')
        .datum(testdata)
        .transition().duration(500)
        .call(chart);
      //chart.update();
    }
  });

},10000);

});

	</script>
	
</head>
<body>

	<h1>Arduino real time data</h1>
	
	<?php
	
	if ( isset($error) and $error ) {
		echo "<div class='ui-widget'>";
		echo "	<div class='ui-state-error ui-corner-all' style='padding: 0 .7em;'>";
		echo "		<p><span class='ui-icon ui-icon-alert' style='float: left; margin-right: .3em;'></span>";
		echo "		<strong>Alert:</strong> ".$error.".</p>";
		echo "	</div>";
		echo "</div>";
	}
	
	?>	
	
	<div id="chart">
		<svg style="height: 500px;"></svg>
	</div>

</body>
</html>