Rnhatch/ResponseTime.csv

## index.html
<!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" >
<head>
    <title>Untitled Page</title>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
  <script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js"></script>
  <script type="text/javascript" src="http://mbostock.github.com/d3/d3.csv.js"></script>
  <script type="text/javascript" src="http://mbostock.github.com/d3/d3.time.js"></script>


 <style type="text/css">
       svg {
         shape-rendering: crispEdges;
        }
       #stackedbudget-chart line {
         stroke: #000;
       }
       .rule line {
         stroke: #eee;
       }

        circle.line {
          fill: #fff;
        }
  </style>

</head>
<body>


<div id="paired-line-chart">
<script type="text/javascript">

var parse = d3.time.format("%m/%d/%Y").parse,
    outformat = d3.time.format("%b");    //date reformatting.


d3.csv("ResponseTime.csv", function(data1) {

    /* Read CSV file */
    var maxval = 0,
        sampsize = 0;
    var label_array = new Array(),
        val_array1 = new Array();

    sampsize = data1.length;

    for (var i = 0; i < sampsize; i++) {
        label_array[i] = parse(data1[i].date);
       // label_array[i] = outformat(data1[i].date);  //parse dates for output
        val_array1[i] = { x: label_array[i], y: parseFloat(data1[i].value) };       //for additional line, z: parseFloat(data1[i].p95)
        maxval = Math.max(maxval, parseFloat(data1[i].value));   //for additional line  , parseFloat(data1[i].<<colnamefromCSV>>)
    }

    maxval = (1 + Math.floor(maxval / 10)) * 10;


    var w = 815,
        h = 400,
        p = 30,

        x = d3.time.scale().domain([label_array[0], label_array[sampsize - 1]]).range([0, w]);

    y = d3.scale.linear().domain([0, maxval]).range([h, 0]);

    var vis = d3.select("#paired-line-chart")
       .data([val_array1])
     .append("svg:svg")
       .attr("width", w + p * 2)
       .attr("height", h + p * 2)
     .append("svg:g")
       .attr("transform", "translate(" + p + "," + p + ")");


    var rules = vis.selectAll("g.rule")
      .data(x.ticks(15))
     .enter().append("svg:g")
       .attr("class", "rule");

    // Draw grid lines
    rules.append("svg:line")
    .attr("x1", x)
    .attr("x2", x)
    .attr("y1", 0)
    .attr("y2", h - 1);

    rules.append("svg:line")
    .attr("class", function(d) { return d ? null : "axis"; })
    .data(y.ticks(10))
    .attr("y1", y)
    .attr("y2", y)
    .attr("x1", 0)
    .attr("x2", w - 10);

    // Place axis tick labels
    rules.append("svg:text")
    .attr("x", x)
    .attr("y", h + 15)
    .attr("dy", ".71em")
    .attr("text-anchor", "middle")
    .text(x.tickFormat(10))
    .text(String);

    rules.append("svg:text")
    .data(y.ticks(12))
    .attr("y", y)
    .attr("x", -10)
    .attr("dy", ".35em")
    .attr("text-anchor", "end")
    .text(y.tickFormat(5));


    // Series I
    vis.append("svg:path")
       .attr("class", "line")
       .attr("fill", "none")
       .attr("stroke", "maroon")
       .attr("stroke-width", 2.5)
       .attr("d", d3.svg.line()
         .x(function(d) { return x(d.x); })
         .y(function(d) { return y(d.y); }));

    vis.selectAll("circle.line")
       .data(val_array1)
     .enter().append("svg:circle")
       .attr("class", "line")
       .attr("stroke", "maroon")
        .attr("stroke-width", 2.5)
       .attr("cx", function(d) { return x(d.x); })
       .attr("cy", function(d) { return y(d.y); })
       .attr("r", 5);


});

</script>
</div>
</body>
</html>

## ResponseTime.csv

          
            date
            value
            undate

            
              4/1/2009
              1.8
              1990

            
              5/1/2009
              1.9
              1991

            
              6/1/2009
              2.6
              1992

            
              7/1/2009
              2.9
              1993

            
              8/1/2009
              3.4
              1994

            
              9/1/2009
              3.1
              1995

            
              10/1/2009
              3.3
              1996

            
              11/1/2009
              3.3
              1997

            
              12/1/2009
              3.1
              1998

            
              1/1/2010
              8.7
              1999

            
              2/1/2010
              10.4
              2000

            
              3/1/2010
              5.2
              2001

            
              4/1/2010
              4.3
              2002

            
              5/1/2010
              5.3
              2003

            
              6/1/2010
              6.7
              2004

            
              7/1/2010
              5.5
              2005

            
              8/1/2010
              5
              2006

            
              9/1/2010
              5
              2007

            
              10/1/2010
              4.9
              2008

            
              11/1/2010
              7.5
              2009

            
              12/1/2010
              10.8
              2010

            
              1/1/2011
              12.2
              2011

            
              2/1/2011
              11.1
              2012

            
              3/1/2011
              11.5
              2013

            
              4/1/2011
              8.7
              2014

            
              5/1/2011
              11.4
              2015

            
              6/1/2011
              11.1
              2016

            
              7/1/2011
              5.8
              2017

            
              8/1/2011
              6.8
              2018

            
              9/1/2011
              8.1
              2019

            
              10/1/2011
              7.2
              2020

            
              11/1/2011
              7.3
              2021
	<!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" >
	<head>
	<title>Untitled Page</title>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js"></script>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.csv.js"></script>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.time.js"></script>


	<style type="text/css">
	svg {
	shape-rendering: crispEdges;
	}
	#stackedbudget-chart line {
	stroke: #000;
	}
	.rule line {
	stroke: #eee;
	}

	circle.line {
	fill: #fff;
	}
	</style>

	</head>
	<body>


	<div id="paired-line-chart">
	<script type="text/javascript">

	var parse = d3.time.format("%m/%d/%Y").parse,
	outformat = d3.time.format("%b"); //date reformatting.



	d3.csv("ResponseTime.csv", function(data1) {

	/* Read CSV file */
	var maxval = 0,
	sampsize = 0;
	var label_array = new Array(),
	val_array1 = new Array();

	sampsize = data1.length;

	for (var i = 0; i < sampsize; i++) {
	label_array[i] = parse(data1[i].date);
	// label_array[i] = outformat(data1[i].date); //parse dates for output
	val_array1[i] = { x: label_array[i], y: parseFloat(data1[i].value) }; //for additional line, z: parseFloat(data1[i].p95)
	maxval = Math.max(maxval, parseFloat(data1[i].value)); //for additional line , parseFloat(data1[i].<<colnamefromCSV>>)
	}

	maxval = (1 + Math.floor(maxval / 10)) * 10;


	var w = 815,
	h = 400,
	p = 30,

	x = d3.time.scale().domain([label_array[0], label_array[sampsize - 1]]).range([0, w]);

	y = d3.scale.linear().domain([0, maxval]).range([h, 0]);

	var vis = d3.select("#paired-line-chart")
	.data([val_array1])
	.append("svg:svg")
	.attr("width", w + p * 2)
	.attr("height", h + p * 2)
	.append("svg:g")
	.attr("transform", "translate(" + p + "," + p + ")");


	var rules = vis.selectAll("g.rule")
	.data(x.ticks(15))
	.enter().append("svg:g")
	.attr("class", "rule");

	// Draw grid lines
	rules.append("svg:line")
	.attr("x1", x)
	.attr("x2", x)
	.attr("y1", 0)
	.attr("y2", h - 1);

	rules.append("svg:line")
	.attr("class", function(d) { return d ? null : "axis"; })
	.data(y.ticks(10))
	.attr("y1", y)
	.attr("y2", y)
	.attr("x1", 0)
	.attr("x2", w - 10);

	// Place axis tick labels
	rules.append("svg:text")
	.attr("x", x)
	.attr("y", h + 15)
	.attr("dy", ".71em")
	.attr("text-anchor", "middle")
	.text(x.tickFormat(10))
	.text(String);

	rules.append("svg:text")
	.data(y.ticks(12))
	.attr("y", y)
	.attr("x", -10)
	.attr("dy", ".35em")
	.attr("text-anchor", "end")
	.text(y.tickFormat(5));


	// Series I
	vis.append("svg:path")
	.attr("class", "line")
	.attr("fill", "none")
	.attr("stroke", "maroon")
	.attr("stroke-width", 2.5)
	.attr("d", d3.svg.line()
	.x(function(d) { return x(d.x); })
	.y(function(d) { return y(d.y); }));

	vis.selectAll("circle.line")
	.data(val_array1)
	.enter().append("svg:circle")
	.attr("class", "line")
	.attr("stroke", "maroon")
	.attr("stroke-width", 2.5)
	.attr("cx", function(d) { return x(d.x); })
	.attr("cy", function(d) { return y(d.y); })
	.attr("r", 5);


	});

	</script>
	</div>
	</body>
	</html>
date	value	undate
4/1/2009	1.8	1990
5/1/2009	1.9	1991
6/1/2009	2.6	1992
7/1/2009	2.9	1993
8/1/2009	3.4	1994
9/1/2009	3.1	1995
10/1/2009	3.3	1996
11/1/2009	3.3	1997
12/1/2009	3.1	1998
1/1/2010	8.7	1999
2/1/2010	10.4	2000
3/1/2010	5.2	2001
4/1/2010	4.3	2002
5/1/2010	5.3	2003
6/1/2010	6.7	2004
7/1/2010	5.5	2005
8/1/2010	5	2006
9/1/2010	5	2007
10/1/2010	4.9	2008
11/1/2010	7.5	2009
12/1/2010	10.8	2010
1/1/2011	12.2	2011
2/1/2011	11.1	2012
3/1/2011	11.5	2013
4/1/2011	8.7	2014
5/1/2011	11.4	2015
6/1/2011	11.1	2016
7/1/2011	5.8	2017
8/1/2011	6.8	2018
9/1/2011	8.1	2019
10/1/2011	7.2	2020
11/1/2011	7.3	2021