Team:TU-Munich/TUM13 real.ph
From 2013.igem.org
(Difference between revisions)
FlorianA (Talk | contribs)
(Created page with " <nowiki><!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:...")
(Created page with " <nowiki><!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:...")
Latest revision as of 17:32, 28 October 2013
<!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>