Error: Problem parsing d="MNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaN" ?

[Newbie]

Hi,

Attempting to update a line graph based on new filtered dataset but I'm getting this error?

Error: Problem parsing d="MNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaN"

Not having any luck fixing the problem - can anyone help?

https://gist.github.com/Majella/51c054161f90fbc19b6f

[Chris Viau]

The d3.json call is asynchronous, so the data is not available when you try to bind it to the dom.

--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+un...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Newbie]

So I need to call the data again?  

[Simon Russell]

No, you'd end up with the same problem. By "asynchronous", Chris
means that the code inside the callback function you pass to the
d3.json call will run at some indeterminate point in the future. So
what's happening is that you're calling d3.json, your drawing code is
executing, then at some point after that, you get the json data back.
So calling it twice won't do what you want. (There is an edge case
where it's in the cache and it might come back quick enough for the
code to seem like it's working -- don't rely on that.)

There are several approaches, but all of them hinge on you drawing the
graph (or updating the graph) from inside the callback. You can just
move all the code in there, or for a nicer look, put the drawing code
inside a function, and call it from the callback.

[Chris Viau]

Thanks a lot Simon to take the time to expand my too short answer. Indeed, the typical way is to place the drawing code inside the callback, as you can see in a lot of examples like this one:

http://bl.ocks.org/mbostock/3886208

[Newbie]

Thank you both:)

[Newbie]

Was looking at your replies and my code again - isn't everything within the callback function already?  I've marked start and end of function in gist:  https://gist.github.com/Majella/51c054161f90fbc19b6f

[Simon Russell]

Wow, yes, Github is really screwing up your formatting. I haven't
counted the brackets, but I'll take it you have.

Looking closer, in "upDate" you're replacing selectedData with
d3.nest, then calling the d3.nest with itself, rather than your
selectedData. Unless the tabs are confusing me again.

[Newbie]

Thanks for taking the time to look at it for me:)  I've updated the gist - hopefully a bit more readable!  https://gist.github.com/Majella/51c054161f90fbc19b6f

Both the filter and nest functions are returning the correct data but there seems to be a problem with applying this new data to the graph and updating it?  I've amended as per your advice but for some reason still getting parsing error?

[Simon Russell]

Right, I think I was wrong anyway (shouldn't try and help with so
little sleep), but it's good not to reassign variables generally.

Umm... what do x.domain and y.domain end up looking like?

[Newbie]

At the moment with the parsing error they're not displaying on update at all..if I comment out the entire nest function and use the filtered data "selectedData"  for the domain and updating line everything working perfectly.  

[Simon Russell]

I mean the x.domain and y.domain values -- you're assigning them using
d3.extent/d3.max etc; what values are you getting there?

[Newbie]

Not looking good - undefined at mo:)

Array[2]

1. 0: undefined
2. 1: undefined
3. length: 2
4. __proto__: Array[0]

HistoricGraph.js:150

Array[2]

1. 0: 0
2. 1: undefined
3. length: 2
4. __proto__: Array[0]

[Simon Russell]

Right, well, I'm assuming your nested data isn't quite as you're
expecting it to be.

[Newbie]

No:)  Can't understand why as it does seem to be returning the correct data:

Array[5]

1. 0: Object
1. key: "Fri Mar 01 2013 00:00:00 GMT+0000 (GMT Standard Time)"
2. values: Object
1. mean: 0.5782608695652176
2. __proto__: Object
3. __proto__: Object
2. 1: Object
1. key: "Sat Mar 02 2013 00:00:00 GMT+0000 (GMT Standard Time)"
2. values: Object
1. mean: 1.1572727272727272
2. __proto__: Object
3. __proto__: Object
3. 2: Object
1. key: "Sun Mar 03 2013 00:00:00 GMT+0000 (GMT Standard Time)"
2. values: Object
1. mean: 1.3714285714285714
2. __proto__: Object
3. __proto__: Object
4. 3: Object
1. key: "Thu Mar 07 2013 00:00:00 GMT+0000 (GMT Standard Time)"
2. values: Object
3. __proto__: Object
5. 4: Object
1. key: "Tue Mar 05 2013 00:00:00 GMT+0000 (GMT Standard Time)"
2. values: Object
1. mean: 1.7333017077798853
2. __proto__: Object
3. __proto__: Object
6. length: 5
7. __proto__: Array[0]

[Simon Russell]

The functions you're using to get the extent/max are looking for
dateTimeTaken and reading -- neither of those are there. (Also, your
key is a string, which you probably don't want.)

[Newbie]

Thank you - just realised that - changed to d.key instead of dateTimeTaken and d.values instead of reading:)  Still getting parsing error - which is probably caused by the key being a string?

[Simon Russell]

That would probably not help. I didn't realise d3.nest would be doing
that; that's kind of annoying.

[Newbie]

Very:)  Thanks for your help:)

[Kai Chang]

This thread reminds me of a Lewis Caroll poem

http://bl.ocks.org/syntagmatic/5113469

[Newbie]

Brillant!  You've got way too much time on your hands:)  

[Newbie]

Brain gone to complete mush - cannot solve this parsing error - can anyone help?  https://gist.github.com/Majella/51c054161f90fbc19b6f

Need to keep the key as it is (I think!) as have to get the average reading per day for each day within the selected month and for the selected parameter.

[Newbie]

Also asked here: http://stackoverflow.com/questions/15280621/nesting-filtered-data-getting-parsing-error 

[Newbie]

Help!!!  Trying to resolve the parsing error is doing my head in!  

Think I've narrowed it down further and has something to do with calculating the mean -  when try to debug this line:

mean: d3.mean(selectedData, function(d) {return +d.reading;})};

 - not displaying anything but the parsing error in console?

[Matthew Fehskens]

May be a silly question, but are the values numbers youre trying to return? Maybe a value is trying to concatenate and causing problems?

[Newbie]

Here's the complete section of code -  might make it clearer.  The filter and nest functions are both returning correct data but the problem seems to occur when try to apply this new data to graph to update it? Really confused as even though the nest function is returning the correct data - when debug the mean value get the "problem parsing d error"?

d3.select("#parameterType").on("change", function() 

{  

d3.select("#dateTimeTaken").on("change", function()

{ 

   var selectedParameter = document.getElementById("parameterType").value;

  var selectedMonth = document.getElementById("dateTimeTaken").value;

   

   //FILTER DATA BY SELECTED PARAMETER AND MONTH  

    var selectedData = data.filter(function(d) { 

return d.parameterType == selectedParameter  &&

+d.dateTimeTaken.getMonth() == (selectedMonth - 1);});

//GET AVERAGE READING PER DAY WITHIN SELECTED MONTH FOR SELECTED PARAMETER

var newdata = d3.nest()

    .key(function(d) {return d3.time.day(d.dateTimeTaken);})

    .sortKeys(d3.ascending)

    .rollup(function(d) 

{

      return {

        mean: d3.mean(selectedData, function(d) {return +d.reading;})};

    })

    .entries(selectedData);

console.log(newdata);//RETURNING CORRECT DATA 

//UPDATE GRAPH

x.domain(d3.extent(newdata, function(d) { return d.key; }));

console.log(d3.extent(newdata, function(d) { return d.key; }))//X.DOMAIN NOT RETURNING CORRECT MAX VALUE?

y.domain([0, d3.max(newdata, function(d) { return d.values; })]);

console.log(([0, d3.max(newdata, function(d) { return d.values; })]));//Y.DOMAIN NOT RETURNING CORRECT MAX VALUE?

svg.select("path.line")

.attr( "d", line(newdata));

svg.select(".x.axis")

  .transition()

.duration(750)

.ease("linear")

.call(xAxis);

   

svg.select(".y.axis")

  .transition()

.duration(750)

.ease("linear")

.call(yAxis);

[Chris Viau]

There is a lot of weird things in your code. Can you share it all as a Gist? You can't use a nested object as argument to d3.extent or d3.max, for example.

[Newbie]

Definitely something weird going on with code - https://gist.github.com/Majella/51c054161f90fbc19b6f

[Newbie]

Can anyone point me in the right direction with this?  I'm new to D3 and just can't seem to resolve this problem?  Thank you:)

[Newbie]

Correct gist:  https://gist.github.com/Majella/202df0a4a5a3ad20fb92

[Chris Viau]

Can you print these values, fpr example after line 60, and paste them to me:

console.log(x.range(), x.domain(), JSON.stringify(data));

[Newbie]

Got rid of parsing error by changing the x domain from this:

y.domain([0, d3.max(newdata, function(d) { return d.values; })]);

to this:

y.domain([0, d3.max(newdata, function(d) { return d.values.mean; })]);

but y domain not returning correct max value - don't think extent can be used with a key value?  Which means that values aren't sorted and x axis not displaying?  Not sure how to handle that?

Values as requested:

[0, 440]

[Fri Feb 01 2013 13:49:25 GMT+0000 (GMT Standard Time), Sat Mar 09 2013 13:47:54 GMT+0000 (GMT Standard Time)]

1. 0: Fri Feb 01 2013 13:49:25 GMT+0000 (GMT Standard Time)
1. __proto__: Invalid Date
2. 1: Sat Mar 09 2013 13:47:54 GMT+0000 (GMT Standard Time)
1. __proto__: Invalid Date

1. length: 2
2. __proto__: Array[0]

"[{"id":"3","testSource_id":"2","dateTimeTaken":"2013-02-01T13:49:25.000Z","dateTimeReceived":"2013-02-01 13:49:56","reading":0.9,"testSourceLocationDescription":"Somewhere ","parameter_id":"3","inspectionPoint_id":"2","testSourceLowerLimit":"3","testSourceUpperLimit":"11","testSourceLocationLongitude":"-8.459472656250000","testSourceLocationLatitude":"54.201010239738880","parameterType":"Flouride","unitMeasurement":"F","client_id":"1"},{"id":"1","testSource_id":"1","dateTimeTaken":"2013-02-01T13:49:30.000Z","dateTimeReceived":"2013-03-01 13:50:01","reading":1.7,"testSourceLocationDescription":"test source","parameter_id":"1","inspectionPoint_id":"1","testSourceLowerLimit":"4","testSourceUpperLimit":"25","testSourceLocationLongitude":"-7.000000000000000","testSourceLocationLatitude":"53.000000000000000","parameterType":"Temperature","unitMeasurement":"°C","client_id":"1"},{"id":"3","testSource_id":"2","dateTimeTaken":"2013-02-01T13:49:35.000Z","dateTimeReceived":"2013-03-01 13:50:08","reading":0.4,"testSourceLocationDescription":"Some place in Sligo","parameter_id":"3","inspectionPoint_id":"2","testSourceLowerLimit":"3","testSourceUpperLimit":"11","testSourceLocationLongitude":"-8.459472656250000","testSourceLocationLatitude":"54.201010239738880","parameterType":"Flouride","unitMeasurement":"F","client_id":"1"},

[Newbie]

Jumped the gun a bit - parsing error not gone!

[Chris Viau]

I took the time to abstract your problem. Here is a simplified version of the path you are trying to draw: http://jsfiddle.net/christopheviau/yatzm/

I suppose your problem is the second time you try to draw it (line 143), where I can see multiple problem. First, I don't understand why your are binding an on change event when another change event is triggered: 

d3.select("#parameterType").on("change", function() 

   {  

d3.select("#dateTimeTaken").on("change", function()

{ 

It would be easier to have a "send" button on your form or have the 2 onChange events calling the same update code.

Second, selectedParameter and other values coming from your form will probably be strings, so you should parse them as integers (parseInt(selectedParameter)). The date will not be a date neither, so you can try new Date(selectedMonth). selectedMonth - 1 will probably not do what you want neither. The Javascript Date object is weird and partly broken, so you should try to find good documentation about it, especially about substracting dates. 

What's coming out of console.log(x.range(), x.domain(), JSON.stringify(newData)); on line 141?

[Newbie]

I originally did have the two onchange events calling the same update code but this caused a problem as the graph was updating as soon as value selected from first dropdown - while I need the update not to be called until values chosen from both dropdowns, and a button wasn't an option.

The data is now being sorted - achieved by parsing key date to ISOString then parsing back to date in the extent domain. See updated gist:  https://gist.github.com/Majella/202df0a4a5a3ad20fb92

Both x and y axis are now transitioning correctly - but the line/path disappearing when updating - so the only problem I have now is applying newdata to the existing line - still causing a parsing error.

Values as requested:

Array[2]

1. 0: 0
2. 1: 440

1. length: 2
2. __proto__: Array[0]

Array[2]

1. 0: Fri Feb 01 2013 13:49:25 GMT+0000 (GMT Standard Time)
1. __proto__: Invalid Date
2. 1: Sat Mar 09 2013 13:47:54 GMT+0000 (GMT Standard Time)
1. __proto__: Invalid Date
3. length: 2
4. __proto__: Array[0]

 

"[{"key":"2013-03-01T00:00:00.000Z","values":{"mean":1.0210526315789474}},{"key":"2013-03-02T00:00:00.000Z","values":{"mean":2.628571428571428}},{"key":"2013-03-05T00:00:00.000Z","values":{"mean":1.7465631929046572}},{"key":"2013-03-07T00:00:00.000Z","values":{"mean":2.388888888888889}},{"key":"2013-03-08T00:00:00.000Z","values":{"mean":1.1496296296296296}},{"key":"2013-03-09T00:00:00.000Z","values":{"mean":0.68391959798995}}]"

[Newbie]

Think it is the dates that are causing the problem - I've looked online at as many resources as I can for as much information as I can - but not getting any further in solving this?

[Kai Chang]

It would help if you made the gist compatible with bl.ocks, so we
could see it running: http://bl.ocks.org/

[Chris Viau]

To be compatible with bl.ocks, rename your Index.html to index.html (lowercase) and load your data from a file or place it in a static variable instead of loading it from php.

[Newbie]

Made gist compatible with bl.ocks - although in original the dropdown lists were populated from the database - used below to get the month value from database which returned a month number which is why I have hard-coded numbers into the month dropdown.

 

"SELECT DISTINCT MONTH(dateTimeTaken) as dateTimeTaken FROM TestSourceSampleData"

http://bl.ocks.org/Majella/46405451afd981f9b54f

The graph isn't updating at all in bl.ocks and console.log doesn't appear to work for anything after the onchange event - take its not recognising either one or both values from the dropdown/s.

[Newbie]

My fault - missed the dropdown ids when copying and pasting.

[Chris Viau]

Good job. Now we can try to help. I fixed part of it (splitted onChange events, parsing and comparing dates for filtering the dataset). But I don't really understand what you are trying to accomplish with d3.nest()

http://bl.ocks.org/biovisualize/65ca7e471cda29774725

--

[Newbie]

Thank you!  The nest function is for getting the average/mean reading for each day within the selected month for the selected parameter.

[Newbie]

Maybe this isn't the best way to do this?  It's this function that is causing the problem but just can't see to fix it or another way it can be done?

[Newbie]

This is getting a bit ridicilous now - going to post as new question or this post will end up going on forever!