Skip to content

Instantly share code, notes, and snippets.

@Rnhatch
Created January 6, 2012 21:35
Show Gist options
  • Save Rnhatch/1572496 to your computer and use it in GitHub Desktop.
Save Rnhatch/1572496 to your computer and use it in GitHub Desktop.
Line Chart - problem with dates in y axis
<!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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment