spdegabrielle · August 29, 2015 14:02
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 	<head>
 		<meta charset="utf-8">
 		<title>Epro timeline</title>
 		<script type="text/javascript" src="http://bl.ocks.org/spdegabrielle/raw/3303215619a06c35b158/d3.min.js"></script>
 		<style type="text/css">
 			/* No style rules here yet */		
 		</style>
 	</head>
 	<body>
        <script type="text/javascript">
 		//Width and height
 
 var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;
 
 // {"ApprovalUserDisplayName":"McGinnes, Erika (Ms)","ApprovalUserProfessionalId":"","ConsultantDisplayName":"Hayden, Jeremy (Mr)","ConsultantProfessionalId":"C4014854","ApprovalDate":"2011-03-17T12:51:58.137+00:00","IssuedDate":"2011-03-17T13:17:34.267+00:00","Restricted":false,"Identifier":"40000-a0b0c0ca-5706-4036-a0c8-9ea900d38b1c","UserDate":"2008-01-08T00:00:00","OwnerDisplayName":"Hayden, Jeremy (Mr)","Subject":"New - unexplained abdo pain","Status":"Issued","Type":"Letter"}
 
 
    var padding = 30;
    var format = d3.time.format("%Y-%m-%d");                    
 			// helper function
    function getDate(d) {return +d3.time.format.iso.parse(d);}
            // load the external data
    d3.json("http://bl.ocks.org/spdegabrielle/raw/3303215619a06c35b158/documents.json",function(error, dataset) {
              //  if (error) return console.warn(error);
        // define the x scale (horizontal)
        var mindate = d3.time.format.iso.parse(dataset[0]["UserDate"]);
        var maxdate = d3.time.format.iso.parse(dataset[(dataset.length)-1]["UserDate"]);
        //var mindate2 = new Date(2012,0,1);
        //console.log("domain:"+mindate+","+mindate2+","+maxdate);
 
        var xScale = d3.time.scale()
 	        .domain([mindate, maxdate])
            .range([padding, width - padding * 2])    ; // values between for month of january
        //console.log(xScale(mindate)+":"+xScale(maxdate));
 		var xAxis = d3.svg.axis()
            .scale(xScale)
            .orient("top")
            .ticks(5);  //Set rough # of ticks
 
        //Create SVG element
 	var svg = d3.select("body")
            .append("svg")
             .attr("width", width)
 	     .attr("height", height);
    
 	// https://demo.epro.com/Epro_14_06_230_0/Services/Demographics/1544897
    	var docs = svg.selectAll("g")
            .data(dataset)
          .enter()
            .append("g")
            .attr("id", function(d) { return d["Identifier"]})
            .attr("x", function(d) { return xScale(d3.time.format.iso.parse(d["UserDate"]))})
            .attr('y', function(d,i) {return 20*i;});
  // .attr("y", function(d) { return xScale(d3.time.format.iso.parse(d["UserDate"]))});
 
        var doclink = docs.append("a")
            .attr("href", function(d) { return "cccc"});
 
            doclink.append("rect")
            .attr("x", function(d) { return xScale(d3.time.format.iso.parse(d["UserDate"]))})
            .attr('y', function(d,i) {return 20*i;})
            .attr("height", 29)
            .attr("width", 19);
 
            doclink.append("text")
            .text(function(d) { return format(d3.time.format.iso.parse(d["UserDate"]))})
 	    .attr("x", function(d) { return xScale(d3.time.format.iso.parse(d["UserDate"]))})
            .attr("y", function(d,i) {return 20*i;})
            .attr("transform", function(d,i) {return "rotate(90 "+xScale(d3.time.format.iso.parse(d["UserDate"]))+","+(20*i)+")"})
 	    .attr("fill", "blue");
 	    

 	var label = doclink.append("text");
 
        label.text(function(d) { return d["Subject"]})
 	    .attr("x", function(d) { return xScale(d3.time.format.iso.parse(d["UserDate"]))})
            .attr("y", function(d,i) {return 20*i;})
 	    .attr("fill", "blue");
 

       // draw x axis with labels and move to the bottom of the chart area
        svg.append("g")
            .attr("class", "xaxis") //class so it can be used to select xaxis labels below
            .attr("transform", function() { return "translate(0," + (height - padding) + ")"})
            .call(xAxis);
            });
 		</script>
 	</body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Epro timeline</title>
	<script type="text/javascript" src="http://bl.ocks.org/spdegabrielle/raw/3303215619a06c35b158/d3.min.js"></script>
	<style type="text/css">
	/* No style rules here yet */
	</style>
	</head>
	<body>
	<script type="text/javascript">
	//Width and height

	var margin = {top: 20, right: 20, bottom: 30, left: 40},
	width = 960 - margin.left - margin.right,
	height = 500 - margin.top - margin.bottom;

	// {"ApprovalUserDisplayName":"McGinnes, Erika (Ms)","ApprovalUserProfessionalId":"","ConsultantDisplayName":"Hayden, Jeremy (Mr)","ConsultantProfessionalId":"C4014854","ApprovalDate":"2011-03-17T12:51:58.137+00:00","IssuedDate":"2011-03-17T13:17:34.267+00:00","Restricted":false,"Identifier":"40000-a0b0c0ca-5706-4036-a0c8-9ea900d38b1c","UserDate":"2008-01-08T00:00:00","OwnerDisplayName":"Hayden, Jeremy (Mr)","Subject":"New - unexplained abdo pain","Status":"Issued","Type":"Letter"}


	var padding = 30;
	var format = d3.time.format("%Y-%m-%d");
	// helper function
	function getDate(d) {return +d3.time.format.iso.parse(d);}
	// load the external data
	d3.json("http://bl.ocks.org/spdegabrielle/raw/3303215619a06c35b158/documents.json",function(error, dataset) {
	// if (error) return console.warn(error);
	// define the x scale (horizontal)
	var mindate = d3.time.format.iso.parse(dataset[0]["UserDate"]);
	var maxdate = d3.time.format.iso.parse(dataset[(dataset.length)-1]["UserDate"]);
	//var mindate2 = new Date(2012,0,1);
	//console.log("domain:"+mindate+","+mindate2+","+maxdate);

	var xScale = d3.time.scale()
	.domain([mindate, maxdate])
	.range([padding, width - padding * 2]) ; // values between for month of january
	//console.log(xScale(mindate)+":"+xScale(maxdate));
	var xAxis = d3.svg.axis()
	.scale(xScale)
	.orient("top")
	.ticks(5); //Set rough # of ticks

	//Create SVG element
	var svg = d3.select("body")
	.append("svg")
	.attr("width", width)
	.attr("height", height);

	// https://demo.epro.com/Epro_14_06_230_0/Services/Demographics/1544897
	var docs = svg.selectAll("g")
	.data(dataset)
	.enter()
	.append("g")
	.attr("id", function(d) { return d["Identifier"]})
	.attr("x", function(d) { return xScale(d3.time.format.iso.parse(d["UserDate"]))})
	.attr('y', function(d,i) {return 20*i;});
	// .attr("y", function(d) { return xScale(d3.time.format.iso.parse(d["UserDate"]))});

	var doclink = docs.append("a")
	.attr("href", function(d) { return "cccc"});

	doclink.append("rect")
	.attr("x", function(d) { return xScale(d3.time.format.iso.parse(d["UserDate"]))})
	.attr('y', function(d,i) {return 20*i;})
	.attr("height", 29)
	.attr("width", 19);

	doclink.append("text")
	.text(function(d) { return format(d3.time.format.iso.parse(d["UserDate"]))})
	.attr("x", function(d) { return xScale(d3.time.format.iso.parse(d["UserDate"]))})
	.attr("y", function(d,i) {return 20*i;})
	.attr("transform", function(d,i) {return "rotate(90 "+xScale(d3.time.format.iso.parse(d["UserDate"]))+","+(20*i)+")"})
	.attr("fill", "blue");


	var label = doclink.append("text");

	label.text(function(d) { return d["Subject"]})
	.attr("x", function(d) { return xScale(d3.time.format.iso.parse(d["UserDate"]))})
	.attr("y", function(d,i) {return 20*i;})
	.attr("fill", "blue");


	// draw x axis with labels and move to the bottom of the chart area
	svg.append("g")
	.attr("class", "xaxis") //class so it can be used to select xaxis labels below
	.attr("transform", function() { return "translate(0," + (height - padding) + ")"})
	.call(xAxis);
	});
	</script>
	</body>
	</html>
No results found