We Keep Coding

How to format a date using d3's time.format [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 6 years ago.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Improve this question
This JSFiddle and the snippet below use the following format:
"%d-%b-%y"
For dates like this:
"1-May-12"
var margin = {
top: 30,
right: 20,
bottom: 30,
left: 50
};
var width = 600 - margin.left - margin.right;
var height = 270 - margin.top - margin.bottom;
var parseDate = d3.time.format("%d-%b-%y").parse;
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").ticks(5);
var yAxis = d3.svg.axis().scale(y)
.orient("left").ticks(5);
var valueline = d3.svg.line()
.x(function (d) {
return x(d.date);
})
.y(function (d) {
return y(d.close);
});
var svg = d3.select("body")
.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 + ")");
// Get the data
var data = [{
date: "1-May-12",
close: "58.13"
}, {
date: "30-Apr-12",
close: "53.98"
}, {
date: "27-Apr-12",
close: "67.00"
}, {
date: "26-Apr-12",
close: "89.70"
}, {
date: "25-Apr-12",
close: "99.00"
}];
data.forEach(function (d) {
d.date = parseDate(d.date);
d.close = +d.close;
});
// Scale the range of the data
x.domain(d3.extent(data, function (d) {
return d.date;
}));
y.domain([0, d3.max(data, function (d) {
return d.close;
})]);
svg.append("path") // Add the valueline path.
.attr("d", valueline(data));
svg.append("g") // Add the X Axis
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g") // Add the Y Axis
.attr("class", "y axis")
.call(yAxis);
body {
font: 12px Arial;
}
path {
stroke: steelblue;
stroke-width: 2;
fill: none;
}
.axis path, .axis line {
fill: none;
stroke: grey;
stroke-width: 1;
shape-rendering: crispEdges;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
My dates are like this:
"24/02/2015"
So I thought a format like this would work:
"%d/%m/%y"
But it doesn't; It returns null. What should I use?

Is it what you want?
var margin = {
top: 30,
right: 20,
bottom: 30,
left: 50
};
var width = 600 - margin.left - margin.right;
var height = 270 - margin.top - margin.bottom;
var parseDate = d3.time.format("%d-%m-%y").parse;
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").ticks(5);
var yAxis = d3.svg.axis().scale(y)
.orient("left").ticks(5);
var valueline = d3.svg.line()
.x(function (d) {
return x(d.date);
})
.y(function (d) {
return y(d.close);
});
var svg = d3.select("body")
.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 + ")");
// Get the data
var data = [{
date: "1-1-12",
close: "58.13"
}, {
date: "30-2-12",
close: "53.98"
}, {
date: "27-3-12",
close: "67.00"
}, {
date: "26-4-12",
close: "89.70"
}, {
date: "25-5-12",
close: "99.00"
}];
data.forEach(function (d) {
d.date = parseDate(d.date);
d.close = +d.close;
});
// Scale the range of the data
x.domain(d3.extent(data, function (d) {
return d.date;
}));
y.domain([0, d3.max(data, function (d) {
return d.close;
})]);
svg.append("path") // Add the valueline path.
.attr("d", valueline(data));
svg.append("g") // Add the X Axis
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g") // Add the Y Axis
.attr("class", "y axis")
.call(yAxis);
body {
font: 12px Arial;
}
path {
stroke: steelblue;
stroke-width: 2;
fill: none;
}
.axis path, .axis line {
fill: none;
stroke: grey;
stroke-width: 1;
shape-rendering: crispEdges;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<body></body>

D3.js ordinal multi-series line chart: Nan at path

Please apologies if this seems like a duplicate D3 question. I've spent 2 days trying to figure out how to do this.
I'm trying to create a multi-line chart with the x-axis as an ordinal scale, and the y axis as a normal linear scale.
Data is loaded from external JSON:
[
{
"arbeitsgang":"A1",
"y":5,
"z":4
},
{
"arbeitsgang":"A2",
"y":6,
"z":11
},
{
"arbeitsgang":"A3",
"y":4,
"z":45
}
]
And here's where I've written for trying to create the chart:
<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */
body { font: 12px Arial;}
path {
stroke: steelblue;
stroke-width: 2;
fill: none;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.line {
fill: none;
stroke: steelblue;
stroke-width: 1.5px;
}
</style>
<body>
<!-- load the d3.js library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.js"> </script>
<script>
var margin = {
top: 20,
right: 20,
bottom: 20,
left: 50
},
width = 600 - margin.left - margin.right,
height = 300 - margin.top - margin.bottom;
var x = d3.scale.ordinal().rangeRoundBands([0, width],0.1);
var y = d3.scale.linear().rangeRound([height, 0]);
var ordinalScale = d3.scale.ordinal();
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var svg = d3.select("body").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 + ")");
var line = d3.svg.line()
.x(function(d) { return x(d.arbeitsgang); })
.y(function(d) { return y(d.koordinaten); });
d3.json("Arbeitsgang.json", function(error, data) {
ordinalScale.domain(d3.keys(data[0]).filter(function(key) { return key !== "arbeitsgang"; }));
data.forEach(function(d) {
d.arbeitsgang = d.arbeitsgang;
d.y = +d.y;
d.z = +d.z;
});
var arbeitsgange = ordinalScale.domain().map(function(name) {
return {
name: name,
values: data.map(function (d) {
return {arbeitsgang: d.arbeitsgang, koordinaten: +d[name]};
})
}
});
x.domain(d3.extent(data, function(d) { return d.arbeitsgang; }));
y.domain([
d3.min(arbeitsgange, function(c) { return d3.min(c.values, function(v) { return v.koordinaten; }); }),
d3.max(arbeitsgange, function(c) { return d3.max(c.values, function(v) { return v.koordinaten; }); })
]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
var graphen = svg.selectAll(".graphen")
.data(arbeitsgange)
.enter().append("g")
.attr("class", "graphen");
graphen.forEach(function(d) {
console.log(d);
});
graphen.append("path")
.attr("class", "line")
.attr("d", function(d) { return line(d.values)});
});
</script>
</body>
So there seems to be 2 mistakes:
1. x-axis only got 2 ticks ( A1, A3) but A2 is missing
2. there is no graph visible.
With html dom profiler you can see that there are 2 graphs:
<path class="line" d="M26,254LNaN,247L278,260"/>
<path class="line" d="M26,260LNaN,216L278,0"/>
As you can see there is something with NaN inside. Maybe it is an error while parsing. I simply don't know.
Thanks for your help

While we are using 'rangeRoundBands' for x axis scale
var x = d3.scale.ordinal().rangeRoundBands([0, width],0.1); ,
we need to set domain with all the points,
I did like this
x.domain(['A1','A2','A3']/*d3.extent(data, function(d) { return d.arbeitsgang; })*/);
Go through with this link and the working fiddle.

Uncaught TypeError: Cannot read property 'length' of undefined in d3.js

*I am new bee in d3.js and trying to draw a line chart using json file but i got an error please some one help me.where i made mistake.
Actually i tried different file format like .csv and .tsv but still got same error...
Error:Uncaught TypeError: Cannot read property 'length' of undefined.
Code:
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {font: 10px sans-serif;}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis path {display: none;}
.line {fill: none;
stroke: steelblue;
stroke-width: 1.5px;
}
</style>
<body>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://d3js.org/d3.v2.js"></script>
<script>
var arrData = [
{
"Engine": "L0",
"date": "01-Aug-13",
"value": 37.92625
},
{
"Engine": "L0",
"date": "02-Aug-13",
"value": 39.19708333
},
{
"Engine": "L1",
"date": "01-Aug-13",
"value": 44.13875
},
{
"Engine": "L1",
"date": "02-Aug-13",
"value": 43.15
},
{
"Engine": "L2",
"date": "01-Aug-13",
"value": 34.765
}];
var margin = {top: 20, right: 20, bottom: 30, left: 50},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var parseDate = d3.time.format.utc("%d-%b-%y").parse;
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");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var line = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.value); });
var svg = d3.select("body").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 + ")");
var data = arrData.map(function(d) {
return {
Engine:d[0],
date: parseDate(d[1]),
value: d[2]
};
});
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain(d3.extent(data, function(d) { return d.value; }));
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", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Price ($)");
svg.append("path")
.datum(data)
.attr("class", "line")
.attr("d", line);
</script>
</body>

Change this bit of script...
var data = arrData.map(function(d) {
return {
Engine:d[0],
date: parseDate(d[1]),
value: d[2]
};
});
to
var data = arrData.map(function(d) {
return {
Engine: d["Engine"],
date: parseDate(d["date"]),
value: d["value"]
};
});
You were trying to get the values by index when they are actually properties, so they were previously returning undefined.
It was actually parseDate() that was returning the error message. Passing in the correct value fixes it.
Here's a fixed and working example...

Filtering out weekend days from time series line chart in D3.js

I have multi-year, daily dataset that looks like this:
date close
2013-09-17 178
2013-09-16 185
2013-09-15 20
2013-09-14 10
2013-09-13 190
2013-09-12 157
2013-09-11 150
2013-09-10 189
2013-09-09 183
2013-09-08 11
2013-09-07 20
I generated a line chart using this example, but would like filter out weekend days:
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis path {
display: none;
}
.line {
fill: none;
stroke: steelblue;
stroke-width: 1.5px;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.js"></script>
<script>
var margin = {top: 20, right: 20, bottom: 30, left: 50},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var parseDate = d3.time.format("%Y-%m-%d").parse;
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");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var line = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.close); });
var svg = d3.select("body").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.csv("data.csv", function(error, data) {
data.forEach(function(d) {
d.date = parseDate(d.date);
d.close = +d.close;
});
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain(d3.extent(data, function(d) { return d.close; }));
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", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Price ($)");
svg.append("path")
.datum(data)
.attr("class", "line")
.attr("d", line);
});
</script>
This example from Crossfilter.js seems to achieve weekend filtering—but only for a small portion of the dataset. Ideally, I would be able to filter by day using checkboxes (e.g. weekdays or Mondays only) across the entire dataset.

d3.js line graph axis not displaying data correctly

I can't figure out why the data won't display correctly. I think it has something to do with the scale of the axis but I can't find any solutions. There is a line being drawn but it's to small to see. The example I was using had a time scale of several years where as I am only doing one week.
Below is the code.
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis path {
display: none;
}
.line {
fill: none;
stroke: steelblue;
stroke-width: 1.5px;
}
</style>
</head>
<body>
<script src="http://d3js.org/d3.v3.js" charset="utf-8"></script>
<script>
var margin = {top: 20, right: 20, bottom: 30, left: 50},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var parseDate = d3.time.format("%d-%b-%y").parse;
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");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var line = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.close); });
var svg = d3.select("body").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 + ")");
var data = [{"close":71,"date":"9-Apr-13"},{"close":14,"date":"9-Apr-13"},{"close":10,"date":"9-Apr-13"},{"close":109,"date":"9-Apr-13"},{"close":62,"date":"9-Apr-13"},{"close":61,"date":"9-Apr-13"},{"close":62,"date":"9-Apr-13"},{"close":32,"date":"9-Apr-13"},{"close":19,"date":"9-Apr-13"}];
data.forEach(function(d) {
d.date = parseDate(d.date);
d.close = +d.close;
});
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain(d3.extent(data, function(d) { return d.close; }));
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", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Price ($)");
svg.append("path")
.datum(data)
.attr("class", "line")
.attr("d", line);
</script>
</body>
</html>

Based on the data you've provided, there is only one instance of time: Apr 9, 2013. Since there is no difference between min and max, the x axis won't display.
If you change one date to Apr 11, It looks right.
Bear in mind that your css says
.x.axis path {
display: none;
}
so the actual line for the x axis won't display no matter what