From 2013.igem.org
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
<!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>