-
-
Save Majella/5fc4cd5f41a6ddf2df23 to your computer and use it in GitHub Desktop.
Live Graph
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(document).ready(function(){ | |
| var margin = {top: 35, right: 20, bottom: 35, left: 40}, | |
| width = 520, | |
| height = 380; | |
| var parseDate = d3.time.format("%Y-%m-%d %H:%M:%S").parse; | |
| var formatTime = d3.time.format("%H:%M:%S"); | |
| var x = d3.time.scale().range([0, width]); | |
| var y = d3.scale.linear().range([height, 0]); | |
| var xAxis = d3.svg.axis() | |
| .scale(x) | |
| .orient("bottom") | |
| .tickFormat(d3.time.format("%I:%M %p")); | |
| var yAxis = d3.svg.axis() | |
| .scale(y) | |
| .orient("left"); | |
| var line = d3.svg.line() | |
| .interpolate('linear') | |
| .x(function(d) { return x(d.dateTimeTaken); }) | |
| .y(function(d) { return y(d.reading); }); | |
| var svg = d3.select("#livefeed").append("svg") | |
| .attr("width", width + margin.left + margin.right) | |
| .attr("height", height + margin.top + margin.bottom) | |
| .append("g") | |
| .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
| svg.append("defs").append("clipPath") | |
| .attr("id", "clip") | |
| .append("rect") | |
| .attr("width", width) | |
| .attr("height", height); | |
| d3.json("LiveData.php", function(error,data) { | |
| data.forEach(function(d) { | |
| d.dateTimeTaken = parseDate(d.dateTimeTaken); | |
| d.reading = +d.reading; | |
| }); | |
| x.domain(d3.extent(data, function(d) { return d.dateTimeTaken; })); | |
| y.domain(d3.extent(data, function(d) { return d.reading; })); | |
| svg.append("g") | |
| .attr("class", "x axis") | |
| .attr("transform", "translate(0," + height + ")") | |
| .call(xAxis) | |
| .append("text") | |
| .attr("x", 240 ) | |
| .attr("y", 430 ) | |
| .style("text-anchor", "middle") | |
| .text("(TIME)"); | |
| svg.append("g") | |
| .attr("class", "y axis") | |
| .call(yAxis) | |
| .append("text") | |
| .attr("transform", "rotate(-90)") | |
| .attr("y", 6) | |
| .attr("dy", ".71em") | |
| .style("text-anchor", "end") | |
| .text("(LIVE)"); | |
| var path = svg.append("g") | |
| .attr("clip-path", "url(#clip)") | |
| .append("path") | |
| .data(data) | |
| .attr("class", "line") | |
| .attr("fill","pink"); | |
| var inter = setInterval(function() { | |
| updateData(); | |
| }, 5000); | |
| }); | |
| function updateData() | |
| { | |
| d3.json("LiveData.php", function(data) { | |
| data.forEach(function(d) { | |
| d.dateTimeTaken = parseDate(d.dateTimeTaken); | |
| d.reading = +d.reading; | |
| }); | |
| svg.selectAll( ".timeDisplay" ) | |
| .data(data) | |
| .text( function(d) { return d3.max( data, function(d) { return d.dateTimeTaken; }) } ) | |
| .enter() | |
| .append("text") | |
| .attr("class", "timeDisplay" ) | |
| .attr("x", width ) | |
| .attr("y", -20) | |
| .attr("text-anchor", "end" ); | |
| x.domain(d3.extent(data, function(d) { return d.dateTimeTaken; })); | |
| y.domain(d3.extent(data, function(d) { return d.reading; })); | |
| svg.select("path.line") | |
| .attr("d", line(data)); | |
| svg.select(".x.axis") | |
| .transition() | |
| .duration(750) | |
| .ease("linear") | |
| .call(xAxis); | |
| svg.select(".y.axis") | |
| .transition() | |
| .duration(750) | |
| .ease("linear") | |
| .call(yAxis); | |
| svg.select("path") | |
| .transition() | |
| .duration(750) | |
| .ease("linear") | |
| .attr("transform", "translate(" + x(0) + ")"); | |
| data.shift(); | |
| }); | |
| };}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #graph { | |
| background-color:#000; | |
| width:600px; | |
| height:300px; | |
| } | |
| #livefeed { | |
| width:600px; | |
| height:300px; | |
| } | |
| .axis path, | |
| .axis line { | |
| fill: none; | |
| stroke: #fff; | |
| shape-rendering: crispEdges; | |
| } | |
| .line { | |
| fill: none; | |
| stroke: steelblue; | |
| stroke-width: 1.5px; | |
| } | |
| text { | |
| font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; | |
| font-size:12px; | |
| fill:#9b9b9b; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE HTML> | |
| <html> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |
| <title>Dashboard</title> | |
| <link href="Dashboard.css" rel="stylesheet" type="text/css"> | |
| </head> | |
| <body> | |
| <section id="graph"> | |
| <section id="livefeed"></section> | |
| </section> | |
| <script type="text/javascript" src="http://d3js.org/d3.v2.js"></script> | |
| <script type="text/javascript" src="BasicGraph.js"></script> | |
| <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| $username="*******"; | |
| $password="*******"; | |
| $host="************"; | |
| $database="*********"; | |
| $server = mysql_connect($host, $username, $password); | |
| $connection = mysql_select_db($database, $server); | |
| $myquery = " | |
| SELECT dateTimeTaken, reading | |
| FROM TestSourceSampleData | |
| INNER JOIN TestSources on | |
| TestSourceSampleData.testSource_id = TestSources.id | |
| inner join Parameters on | |
| TestSources.parameter_id = Parameters.id | |
| where DATE(dateTimeTaken) = CURDATE() | |
| AND dateTimeTaken >= DATE_SUB(NOW(), interval 10 minute) | |
| GROUP BY dateTimeTaken | |
| "; | |
| $query = mysql_query($myquery); | |
| if ( ! $myquery ) { | |
| echo mysql_error(); | |
| die; | |
| } | |
| $data = array(); | |
| for ($x = 0; $x < mysql_num_rows($query); $x++) { | |
| $data[] = mysql_fetch_assoc($query); | |
| } | |
| echo json_encode($data); | |
| mysql_close($server); | |
| ?> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| [{"dateTimeTaken":"2013-02-10 16:24:21","reading":"15.5"},{"dateTimeTaken":"2013-02-10 16:24:26","reading":"15.8"},{"dateTimeTaken":"2013-02-10 16:24:31","reading":"15.7"},{"dateTimeTaken":"2013-02-10 16:24:36","reading":"15.5"},{"dateTimeTaken":"2013-02-10 16:24:41","reading":"15.8"},{"dateTimeTaken":"2013-02-10 16:24:46","reading":"15.5"},{"dateTimeTaken":"2013-02-10 16:24:51","reading":"15.6"},{"dateTimeTaken":"2013-02-10 16:24:56","reading":"15.4"},{"dateTimeTaken":"2013-02-10 16:25:01","reading":"15.6"},{"dateTimeTaken":"2013-02-10 16:25:06","reading":"15.5"},{"dateTimeTaken":"2013-02-10 16:25:11","reading":"15.5"},{"dateTimeTaken":"2013-02-10 16:25:16","reading":"15.6"},{"dateTimeTaken":"2013-02-10 16:25:21","reading":"15.5"},{"dateTimeTaken":"2013-02-10 16:25:26","reading":"15.2"},{"dateTimeTaken":"2013-02-10 16:25:31","reading":"14.9"},{"dateTimeTaken":"2013-02-10 16:25:36","reading":"15.2"},{"dateTimeTaken":"2013-02-10 16:25:41","reading":"15.4"},{"dateTimeTaken":"2013-02-10 16:25:46","reading":"15.1"},{"dateTimeTaken":"2013-02-10 16:25:51","reading":"15.3"}] |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment