I am unable to get data points on my graph. Both axis are zoomable and both are date ranges. More specifically, the x axis is the date and the y axis is the hour. I am wondering if it is something with my JSON file formatting with the hours but I am still unsure of why it is not plotting anything. An example of my JSON file is
data = [
{ "date" : "2013-21-02T00:00:00",
"vertical" : "2013-20-02T11:00:00"
},...]
Below is my code:
//Define the min and max date
var mindate = new Date(2013,02,20), // TODO: clip date
maxdate = new Date(2013,02,26);
//Define the range of hours for the yaxis. Uses military time.
var ymindate = new Date(2013,02,20, 7), // TODO: clip date
ymaxdate = new Date(2013,02,20, 17);
margin = { top: 20, right: 20, bottom: 20, left: 45};
width = 400 - margin.left - margin.right;
height = 200 - margin.top - margin.bottom;
var x = d3.time.scale()
.domain([mindate, maxdate])
.range([0, width]);
var y = d3.time.scale()
.domain([ymindate, ymaxdate])
.range([height, 0]);
var line = d3.svg.line()
.x(function (d) { return d.date; })
.y(function (d) { return d.vertical; });
var zoom = d3.behavior.zoom()
.x(x)
.y(y)
.on("zoom", zoomed);
svg = d3.select('#chart')
.append("svg:svg")
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)
.call(zoom)
.append("svg:g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var make_x_axis = function () {
return d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(5);
};
var make_y_axis = function () {
return d3.svg.axis()
.scale(y)
.orient("left")
.ticks(5);
};
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(5);
svg.append("svg:g")
.attr("class", "x axis")
.attr("transform", "translate(0, " + height + ")")
.call(xAxis);
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(5);
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
svg.append("g")
.attr("class", "x grid")
.attr("transform", "translate(0," + height + ")")
.call(make_x_axis()
.tickSize(-height, 0, 0)
.tickFormat(""));
svg.append("g")
.attr("class", "y grid")
.call(make_y_axis()
.tickSize(-width, 0, 0)
.tickFormat(""));
var clip = svg.append("svg:clipPath")
.attr("id", "clip")
.append("svg:rect")
.attr("x", 0)
.attr("y", 0)
.attr("width", width)
.attr("height", height);
var chartBody = svg.append("g")
.attr("clip-path", "url(#clip)");
chartBody.append("svg:path")
.datum(data)
.attr("class", "line")
.attr("d", line);
function zoomed() {
svg.select(".x.axis").call(xAxis);
svg.select(".y.axis").call(yAxis);
svg.select(".x.grid")
.call(make_x_axis()
.tickSize(-height, 0, 0)
.tickFormat(""));
svg.select(".y.grid")
.call(make_y_axis()
.tickSize(-width, 0, 0)
.tickFormat(""));
svg.select(".line")
.attr("class", "line")
.attr("d", line);
}
}
Any help would be appreciated!!! Thank you!
The first thing that you'll need to do is to parse your data into a format that's recognised by D3. So something like:
var parseDate = d3.time.format("%Y-%d-%mT%H:%M:%S").parse; //Note the T in the middle
data.forEach(function (d,i) {
d.date = parseDate(d.date);
d.vertical= parseDate(d.vertical);
})
From there just throw it at the line function and I think it should all work out. Oh the API reference is pretty helpful on this, where is here.
I've just edited the code block above by changing value to vertical and including the final closing bracket (oops).
The next thing is the line generator was set to simply return the date or vertical value, so it needs to be changed to:
var line = d3.svg.line()
.x(function (d) { return x(d.date); })
.y(function (d) { return y(d.vertical); });
Note the inclusion of the x(...) and y(...).
And here's a link to a working fiddle
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments