0

I'm making a basic d3 charge that pulls in data using d3.csv and then forwards it in an anonymous function like this

d3.csv("https://example.com/report.csv", function(error, data) {
console.log(data);

data.forEach(function(d) {
        d.zeit = parseDate(d.zeit);
        d.total = +d.total;
        d.count = d.count;
    });
...//code ommitted

});

However, since there's not a lot of data, I thought would embed the csv data using the technique described in this answer, which removes the anonymous function above. The log statement reveals an array of objects exactly the same as above, however when I do it this way, the chart doesn't display and I get an error that seems to arise from an array Uncaught TypeError: Cannot read property 'length' of undefined

  var raw = d3.select("#csvdata").text();
  var data = d3.csv.parse(raw);
  console.log(data)
  data.forEach(function(d) {
            d.zeit = parseDate(d.zeit);
            d.total = +d.total;
            d.count = d.count;
        });
 ...

Here is a fiddle for the first method https://jsfiddle.net/mjmitche/5Y6kf/3/ and here is a fiddle for the second one not working fiddle

2 Answers 2

2

The problem you're having comes from the indentation of your CSV data in <pre id="csvdata">. Because you have indention, the header is being parsed as " zeit", instead of "zeit". The same is true for each time in the first column. Here's my console's output of an example object produced when parsing your current data:

example object

This causes a problem when you try to access the zeit attribute of your objects on this line:

d.zeit = parseDate(d.zeit); // current place your code breaks

If you remove the indentation in <pre id="csvdata">, however, zeit is parsed correctly and you get a graph like this:

graph

Here's a working fiddle.


Note that even after fixing the indentation issue, you still have an error in your code:

Uncaught ReferenceError: padding is not defined

Sign up to request clarification or add additional context in comments.

Comments

1

You are adding extraneous whitespace when you embed the data. Instead of:

<pre id="csvdata">
    zeit,count,total,avg
    5:30,0,0,0
    6:00,14,41.1, $2.94 
    6:30,19,52, $2.74 
    7:00,21,74, $3.52 
    7:30,28,143.25, $5.12 
    8:00,30,141.3, $4.71 
    8:30,32,124.28, $3.88 
    9:00,24,74.8, $3.12 
    9:30,47,172.35, $3.67 
    10:00,27,119.77, $4.44 
    10:30,40,210.44, $5.26 
    11:00,29,150.95, $5.21 
    11:30,14,80.3, $5.74 
</pre>

Try:

<pre id="csvdata">
zeit,count,total,avg
5:30,0,0,0
6:00,14,41.1, $2.94 
6:30,19,52, $2.74 
7:00,21,74, $3.52
7:30,28,143.25, $5.12 
8:00,30,141.3, $4.71 
8:30,32,124.28, $3.88 
9:00,24,74.8, $3.12 
9:30,47,172.35, $3.67 
10:00,27,119.77, $4.44 
10:30,40,210.44, $5.26 
11:00,29,150.95, $5.21 
11:30,14,80.3, $5.74 
</pre>

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.