Multi-Line Live Graph

BasicGraph.js

$(document).ready(function(){ 
	
var margin = {
top: 35,
right: 80,
bottom: 40,
left: 40},

width = 580 - margin.left - margin.right,
height = 470 - margin.top - margin.bottom;
	
var parseDate = d3.time.format("%Y-%m-%d %H:%M:%S").parse;
	
var x = d3.time.scale()
	.range([0, width]);

var y = d3.scale.linear()
	.range([height, 0]);
	
var color = d3.scale.category20();

var xAxis = d3.svg.axis()
    	.scale(x)
    	.orient("bottom");

var yAxis = d3.svg.axis()
    	.scale(y)
    	.orient("left");

var line = d3.svg.line()
    	.interpolate("basis")
    	.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 + ")");
		
d3.json("LiveData.php", function(error, data) {
 color.domain(d3.keys(data[0]).filter(function(key) { return key == "parameter_id"; }));
 data = data.map( function (d) { 
    d.dateTimeTaken = parseDate(d.dateTimeTaken);
	d.reading = +d.reading;
	return d;
  });
    
data = d3.nest().key(function(d) { return d.parameter_id; }).entries(data);

x.domain([d3.min(data, function(d) { return d3.min(d.values, function (d) { return d.dateTimeTaken; }); }),
          d3.max(data, function(d) { return d3.max(d.values, function (d) { return d.dateTimeTaken; }); })]);
y.domain([0, d3.max(data, function(d) { return d3.max(d.values, function (d) { return d.reading; }); })]);


var legend = svg.selectAll('g')
	.data(data, function(d) { return d.key; })
     	.enter()
     	.append('g')
     	.attr('class', 'legend')
	.attr('transform', function (d, i) {
        return "translate(" + width + "," + 0 + ")";});
    
legend.append('rect')
     	.style('fill', function(d) { return color(d.key);})
	.attr('x', 0)
        .attr('width', 10)
        .attr('y', function (d, i) { return i * 20; })
        .attr('height', 10);
      
legend.append('text')
        .text(function(d){ return d.values[0].parameterType; })
       	.attr('x', 12)
       	.attr('y', function (d, i) {
       	 return i * 20 + 9;});
      	
svg.append("g")
      	.attr("class", "x axis")
      	.attr("transform", "translate(0," + height + ")")
      	.call(xAxis);
      
svg.append("g")
      	.attr("class", "y axis")
      	.call(yAxis)
      	.append("text")
      	.attr("transform", "rotate(-90)")
      	.attr("y",-margin.top*2.5)
      	.attr("x",-height/2)
      	.attr("dy", ".71em")
      	.style("text-anchor", "middle")
      	.text("Reading");
	        
var parameter = svg.selectAll(".parameter")
	.data(data, function(d) { return d.key; })
      	.enter().append("g")
      	.attr("class", "parameter");

parameter.append("path")
      	.attr("class", "line")
      	.attr("d", function(d) { return line(d.values); })
      	.style("stroke", function(d) { return color(d.key); });
	  

var inter = setInterval(function() {	
updateData();
}, 5000);		
});

	
function updateData() 
{
d3.json("LiveData.php", function(error, data) {
 color.domain(d3.keys(data[0]).filter(function(key) { return key == "parameter_id"; }));
 data = data.map( function (d) { 
    d.dateTimeTaken = parseDate(d.dateTimeTaken);
	d.reading = +d.reading;
	return d;
});
 
data.push(data);
		
var maxDate = d3.max( data, function(d) { return d.dateTimeTaken; }); 

svg.selectAll( ".timeDisplay" )
  	.data( [maxDate] )
  	.text( function(d) { return d; } )
  	.enter()
  	.append("text")
  	.attr("class", "timeDisplay" )
  	.attr("x", width )
  	.attr("y", -15)
  	.attr("text-anchor", "end" );
 
data = d3.nest().key(function(d) { return d.parameter_id; }).entries(data);

x.domain([d3.min(data, function(d) { return d3.min(d.values, function (d) { return d.dateTimeTaken; }); }),
          d3.max(data, function(d) { return d3.max(d.values, function (d) { return d.dateTimeTaken; }); })]);
y.domain([0, d3.max(data, function(d) { return d3.max(d.values, function (d) { return d.reading; }); })]);
 
var newparameters = svg.selectAll("g.parameter")
      	.data(data);
		
newparameters
  	.select( "path.line" )
   	.transition() 
	.ease("linear")
	.duration(750) 
     	.attr( "d", function(d) { return line(d.values); });
	
svg.select(".x.axis")
  	.transition()
	.duration(750)
	.ease("linear")
	.call(xAxis);
	  	  
svg.select(".y.axis")
  	.transition()
	.duration(750)
	.ease("linear")
	.call(yAxis); 

data.shift();

});
};});

Dashboard.css

#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;

index.html

<!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>

LiveData.php

<?php
$username="*******"; 
$password="*******";   
$host="************";
$database="*********";
$server = mysql_connect($host, $username, $password);
$connection = mysql_select_db($database, $server);

$myquery = "
SELECT dateTimeTaken, reading,parameterType 
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();

Output from LiveData.php

[{"id":"2","testSource_id":"3","dateTimeTaken":"2013-03-12 10:04:51","dateTimeReceived":"2013-03-12 10:05:25","reading":"11.30000","testSourceLocationDescription":"","parameter_id":"2","inspectionPoint_id":"1","testSourceLowerLimit":"0","testSourceUpperLimit":"20","testSourceLocationLongitude":"-8.000000000000000","testSourceLocationLatitude":"55.000000000000000","parameterType":"pH","unitMeasurement":"pH","client_id":"1"},
{"id":"1","testSource_id":"1","dateTimeTaken":"2013-03-12 10:04:56","dateTimeReceived":"2013-03-12 10:05:23","reading":"0.60000","testSourceLocationDescription":"test source","parameter_id":"1","inspectionPoint_id":"1","testSourceLowerLimit":"4","testSourceUpperLimit":"25","testSourceLocationLongitude":"-7.000000000000000","testSourceLocationLatitude":"53.000000000000000","parameterType":"Temperature","unitMeasurement":"\u00b0C","client_id":"1"},
{"id":"1","testSource_id":"1","dateTimeTaken":"2013-03-12 10:05:01","dateTimeReceived":"2013-03-12 10:05:26","reading":"0.30000","testSourceLocationDescription":"test source","parameter_id":"1","inspectionPoint_id":"1","testSourceLowerLimit":"4","testSourceUpperLimit":"25","testSourceLocationLongitude":"-7.000000000000000","testSourceLocationLatitude":"53.000000000000000","parameterType":"Temperature","unitMeasurement":"\u00b0C","client_id":"1"},
{"id":"2","testSource_id":"3","dateTimeTaken":"2013-03-12 10:05:06","dateTimeReceived":"2013-03-12 10:05:37","reading":"11.30000","testSourceLocationDescription":"","parameter_id":"2","inspectionPoint_id":"1","testSourceLowerLimit":"0","testSourceUpperLimit":"20","testSourceLocationLongitude":"-8.000000000000000","testSourceLocationLatitude":"55.000000000000000","parameterType":"pH","unitMeasurement":"pH","client_id":"1"},
{"id":"3","testSource_id":"2","dateTimeTaken":"2013-03-12 10:05:11","dateTimeReceived":"2013-03-12 10:05:42","reading":"2.30000","testSourceLocationDescription":"Some place","parameter_id":"3","inspectionPoint_id":"2","testSourceLowerLimit":"3","testSourceUpperLimit":"11","testSourceLocationLongitude":"-8.459472656250000","testSourceLocationLatitude":"54.201010239738880","parameterType":"Flouride","unitMeasurement":"F","client_id":"1"},
{"id":"3","testSource_id":"2","dateTimeTaken":"2013-03-12 10:05:16","dateTimeReceived":"2013-03-12 10:05:45","reading":"2.30000","testSourceLocationDescription":"Some place","parameter_id":"3","inspectionPoint_id":"2","testSourceLowerLimit":"3","testSourceUpperLimit":"11","testSourceLocationLongitude":"-8.459472656250000","testSourceLocationLatitude":"54.201010239738880","parameterType":"Flouride","unitMeasurement":"F","client_id":"1"},
{"id":"1","testSource_id":"1","dateTimeTaken":"2013-03-12 10:05:21","dateTimeReceived":"2013-03-12 10:05:53","reading":"0.00000","testSourceLocationDescription":"test source","parameter_id":"1","inspectionPoint_id":"1","testSourceLowerLimit":"4","testSourceUpperLimit":"25","testSourceLocationLongitude":"-7.000000000000000","testSourceLocationLatitude":"53.000000000000000","parameterType":"Temperature","unitMeasurement":"\u00b0C","client_id":"1"},
{"id":"1","testSource_id":"1","dateTimeTaken":"2013-03-12 10:05:26","dateTimeReceived":"2013-03-12 10:05:57","reading":"0.30000","testSourceLocationDescription":"test source","parameter_id":"1","inspectionPoint_id":"1","testSourceLowerLimit":"4","testSourceUpperLimit":"25","testSourceLocationLongitude":"-7.000000000000000","testSourceLocationLatitude":"53.000000000000000","parameterType":"Temperature","unitMeasurement":"\u00b0C","client_id":"1"}]