From 2013.igem.org
<?php
// include db interface and init
include 'lib/db.inc.php';
// set standard values
$time1 = strtotime("10/01/13 11:45:00");
$time2 = strtotime("10/01/13 13:15:00");
$data = "`time`, `temperature`, `water`, `light-vis`, `light-ir`, `photo1`, `photo2`, `photo3`";
$streams = "[ { name: 'Temperature', key: 'temperature' }, { name: 'Visible Light', key: 'light-vis' }, { name: 'Infrared Light', key: 'light-ir' }, { name: 'Water', key: 'water' }, { name: 'Photometer 1', key: 'photo1' }, { name: 'Photometer 2', key: 'photo2' }, { name: 'Photometer 3', key: 'photo3' } ]";
$selected = 1;
// check for GET parameters
if ( isset($_GET['date1'], $_GET['time1'], $_GET['date2'], $_GET['time2'], $_GET['data']) ) {
// check for viable date and time values
if ( strtotime($_GET['date1']." ".$_GET['time1']) and strtotime($_GET['date2']." ".$_GET['time2']) ) {
$time1 = strtotime($_GET['date1']." ".$_GET['time1']);
$time2 = strtotime($_GET['date2']." ".$_GET['time2']);
} else {
$error = "Wrong date or time format";
}
// check for selected data streams
switch ($_GET['data']) {
case 'all':
$data = "`time`, `temperature`, `water`, `light-vis`, `light-ir`, `photo1`, `photo2`, `photo3`";
$streams = "[ { name: 'Temperature', key: 'temperature' }, { name: 'Visible Light', key: 'light-vis' }, { name: 'Infrared Light', key: 'light-ir' }, { name: 'Water', key: 'water' }, { name: 'Photometer 1', key: 'photo1' }, { name: 'Photometer 2', key: 'photo2' }, { name: 'Photometer 3', key: 'photo3' } ]";
$selected = 1;
break;
case 'environment':
$data = "`time`, `temperature`, `water`, `light-vis`, `light-ir`";
$streams = "[ { name: 'Temperature', key: 'temperature' }, { name: 'Visible Light', key: 'light-vis' }, { name: 'Infrared Light', key: 'light-ir' }, { name: 'Water', key: 'water' } ]";
$selected = 2;
break;
case 'photometric':
$data = "`photo1`, `photo2`, `photo3`";
$streams = "[ { name: 'Photometer 1', key: 'photo1' }, { name: 'Photometer 2', key: 'photo2' }, { name: 'Photometer 3', key: 'photo3' } ]";
$selected = 3;
break;
default:
$error = "Incorrect data streams selected";
break;
}
}
// generate and run SQL query
$sql = "SELECT\n\t".$data."\nFROM\n\tarduino_data\nWHERE\n\t(UNIX_TIMESTAMP(time) >= ".$time1.") AND (UNIX_TIMESTAMP(time) <= ".$time2.")";
$result = $db->query($sql);
if (!$result) {
$error = 'Etwas stimmte mit dem Query nicht: '.$db->error;
}
// assemble json object
$json = '[';
$i = 0;
while ($row = $result->fetch_assoc()) {
if ($i != 0) $json .= ', ';
$json .= '{';
$j = 0;
foreach ($row as $k => $v) {
if ($k != 'id') {
if ($j != 0) $json .= ', ';
$json .= "'" . $k . "':";
if ($k == 'time') {
$json .= strtotime($v);
} else {
$json .= $v;
}
$j++;
}
}
$json .= '}';
$i++;
}
$json .= ' ]';
$result->close();
unset($result);
?>
<!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 data</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link href="css/smoothness/jquery-ui-1.10.3.custom.min.css" rel="stylesheet">
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-ui-1.10.3.custom.min.js"></script>
<script>
$(document).ready(function(){
$(".datepicker").datepicker();
});
</script>
<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/lineWithFocusChart.js"></script>
<script src="src/stream_layers.js"></script>
<script>
extend = function(destination, source) {
for (var property in source) {
if (property in destination) {
if ( typeof source[property] === "object" && typeof destination[property] === "object") {
destination[property] = extend(destination[property], source[property]);
} else {
continue;
}
} else {
destination[property] = source[property];
};
}
return destination;
};
nv.addGraph(function() {
var chart = nv.models.lineWithFocusChart();
chart.margin({top: 30, right: 60, bottom: 60, left: 60});
chart.margin2({top: 0, right: 60, bottom: 60, left: 60});
chart.xAxis
.tickFormat(function(d) {
return d3.time.format('%m/%d/%y %H:%M:%S')(new Date(d*1000))
})
.staggerLabels(true);
chart.x2Axis
.tickFormat(function(d) {
return d3.time.format('%m/%d/%y %H:%M:%S')(new Date(d*1000))
})
.staggerLabels(true);
chart.yAxis.tickFormat(d3.format(',.1f'));
chart.y2Axis.tickFormat(d3.format(',.0f'));
var dimension = testCrossfilterData().data;
var data = normalizeData(dimension.top(Infinity), <?php echo $streams; ?> , 'time');
d3.select('#chart svg').datum(data).transition().duration(500).call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
function normalizeData(data, series, xAxis) {
var sort = crossfilter.quicksort.by(function(d) { return d[xAxis]; });
var sorted = sort(data, 0, data.length);
var result = [];
series.forEach(function(serie, index) {
result.push({key: serie.name, values: [], color: serie.color});
});
data.forEach(function(data, dataIndex) {
series.forEach(function(serie, serieIndex) {
result[serieIndex].values.push({x: data[xAxis], y: data[serie.key]});
});
});
return result;
};
function testCrossfilterData() {
var data = crossfilter(testData());
try {
data.data = data.dimension(function(d) { return d.y; });
} catch (e) {
console.log(e.stack);
}
return data;
}
function testData() {
var result = <?php echo $json; ?>;
return result;
}
</script>
</head>
<body>
<h1>Arduino 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>
<h2>Options:</h2>
<form action="index.php" method="get">
<h3>Select a time range to display:</h3>
<p>From: <input name="date1" class="datepicker" type="text" size="10" maxlength="10" value="<?php echo date("m/d/Y", $time1); ?>" />
<input name="time1" type="text" size="5" maxlength="5" value="<?php echo date("H:i", $time1); ?>" /></p>
<p>To: <input name="date2" class="datepicker" type="text" size="10" maxlength="10" value="<?php echo date("m/d/Y", $time2); ?>" />
<input name="time2" type="text" size="5" maxlength="5" value="<?php echo date("H:i", $time2); ?>" /></p>
<h3>Select data streams:</h3>
<p><label><input type="radio" name="data" value="all" <?php if ($selected == 1) echo "checked='checked'"; ?> />All data streams</label></p>
<p><label><input type="radio" name="data" value="environment" <?php if ($selected == 2) echo "checked='checked'"; ?> />Environmental data (temperature, light and water)</label></p>
<p><label><input type="radio" name="data" value="photometric" <?php if ($selected == 3) echo "checked='checked'"; ?> />Photometric data (3 photodiodes and average)</label></p>
<p><input type="submit" value="Submit" /> <input type="reset" value="Clear" /></p>
</form>
</body>
</html>