<html> <head> <script src="http://mbostock.github.com/d3/d3.v2.js?2.8.1"></script> <script src="https://rawgithub.com/stepheneb/netlogo-gcc/master/lib/simple-graph.js"></script> <script> var graph = null, dataSet = [], tempFormatter = d3.format("2.1f"); $(function() { graph = simpleGraph() .title("Arduino Temperature Graph") .xmax(100).ymax(35) .xLabel("Time") .yLabel("Temperature"); d3.select("#graph").call(graph); $('#run-button').click(function() { setInterval(getData, 250); $('#run-button').html("Running...") .attr("disabled", true) .unbind(); }); }); function getData() { $.getJSON("http://169.254.1.1/&callback=?", arduinoEthernetComCallback); } function arduinoEthernetComCallback(jsonData) { var a0 = JSON.parse(jsonData).A0, temperatureC = ((a0 * 5.0) / 1024.0) * 100; $("#currTemp").html(tempFormatter(temperatureC) + "°C"); dataSet.push(temperatureC); graph.set_data(dataSet); }; </script> </head> <body> <button id="run-button">Start Reading</button> <div id="graph"> </div> <div class="reading-box"> The current temperature is <span id="currTemp">—</span>°C </div> </body> </html>