Sunday, May 19, 2024
Homepage · c#
 Popular · Latest · Hot · Upcoming
150
rated 0 times [  153] [ 3]  / answers: 1 / hits: 16627  / 10 Years ago, sat, september 27, 2014, 12:00:00

I see other posts with this problem but I just can't seem to solve it. I am new to d3 and am trying to load some data into a line graph, but i keep getting the error



Invalid value for <path> attribute d=MNaN,250LNaN,71.05263157894737LNaN,55.26315789473685



I have setup everything like in an example (which worked), but this isn't working for some reason. I am getting data back from a webservice as a list of the following form: Date=1/1/2014 NumberOfActive=1 (Example). I have tried using the parse functions but they don't really work. Here is my code:



var data;
var margin = { top: 20, right: 20, bottom: 30, left: 50 },
width = 1000 - margin.left - margin.right,
height = 300 - margin.top - margin.bottom;

function parseDateForViewing(d) {
return d3.time.format('%b %Y')(d3.time.format('%m/%d/%Y').parse(d));
}

function parseDate(d) {
return d3.time.format('%c')(d3.time.format('%m/%d/%Y').parse(d));
}

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.NumberOfActive); });

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 + ));


$.ajax({
type: POST,
url: Dashboard.aspx/GetActiveLoansData,
data: '',
contentType: application/json; charset=utf-8,
dataType: json,
success: function (thedata) {
var d = thedata.d;
data = thedata.d;

var _len = d.length;
var post, i;

for (i = 0; i < data.length; i++) {
d = data[i];
var t = parseDate(d.Date);
var s = d.Date;
x.domain(d3.extent(data, function (d) { return d.Date; }));
y.domain(d3.extent(data, function (d) { return d.NumberOfActive; }));

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(Closed Loans);

svg.append(path)
.datum(data)
.attr(class, line)
.attr(d, line);
}
}
});

More From » c#

 Answers
2

Before actually plotting the graph, I needed to convert the dates with the following line:



for (i = 0; i < data.length; i++) {
data[i].Date = parseDate(data[i].Date);
}


This line can be seen in the following, final code:



var data;
var margin = { top: 20, right: 60, bottom: 30, left: 50 },
width = 1000 - margin.left - margin.right,
height = 300 - margin.top - margin.bottom;

function parseDateForViewing(d) {
return d3.time.format('%b %Y')(d3.time.format('%m/%d/%Y').parse(d));
}

function parseDate2(d) {
return d3.time.format('%c')(d3.time.format('%m/%d/%Y').parse(d));
}
var parseDate = d3.time.format(%m/%d/%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.NumberOfActive); });

var svg = d3.select(#svgsection).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 d = thedata.d;
data = thedata.d;

var _len = d.length;
var post, i;

for (i = 0; i < data.length; i++) {
data[i].Date = parseDate(data[i].Date);
}

for (i = 0; i < data.length; i++) {
d = data[i];

x.domain(d3.extent(data, function (d) { return d.Date; }));
y.domain(d3.extent(data, function (d) { return d.NumberOfActive; }));

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(Closed Loans);

svg.append(path)
.datum(data)
.attr(class, line)
.attr(d, line);


svg.append(text)
.attr(x, (width / 2))
.attr(y, 0 - (margin.top / 2) + 10)
.attr(text-anchor, middle)
.style(font-size, 16px)
.text(Closed Loans by Month);

[#69314] Wednesday, September 24, 2014, 10 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
frederickmohamedw

Total Points: 21
Total Questions: 123
Total Answers: 105

Location: The Bahamas
Member since Tue, Apr 27, 2021
3 Years ago
frederickmohamedw questions
Wed, Sep 23, 20, 00:00, 4 Years ago
Sat, Jul 18, 20, 00:00, 4 Years ago
Sun, Apr 26, 20, 00:00, 4 Years ago
Sat, Jan 11, 20, 00:00, 4 Years ago
Fri, Dec 27, 19, 00:00, 4 Years ago
;