CODEWITHSUNDEEP
javascriptjsond3.js
JET
JET

Reputation: 13

d3js: Uncaught TypeError: Cannot read property 'length' of undefined

I am a newbie to d3. I'm pretty sure there is not an issue with my data. Any point in the right direction would be appreciated.

(function() {

  d3.json("data.json", function(error, json){
    if(error) return console.warn(error);
    data = json;

    var format = d3.time.format("%a %b %d %Y")
    var amountFn = function(d){return d.amount}
    var dateFn = function(d){
      console.log(d.bonus);
      return format.parse(d.date)

    }


    var x = d3.time.scale()
      .range([10, 280])
      .domain(d3.extent(data, dateFn));

    var y = d3.scale.linear()
      .range([180, 10])
      .domain(d3.extent(data, amountFn));

    var svg = d3.select('#demo').append("svg:svg")
      .attr("width", 300)
      .attr("height", 200)

    svg.selectAll("circle").data(data).enter()
      .append("svg:circle")
      .attr("r", 4)
      .attr("cx", function(d){return x(dateFn(d.draw_date))})
      .attr("cy", function(d){return y(amountFn(d))})
  });


 })();

my data being retrieved is in the following formats.

[
    {
        "date": "2015-08-26T00:00:00",
        "amount": "30"
    },
    ...more data
]

Upvotes: 0

Views: 3780

Answers (2)

Yash Mangla
Yash Mangla

Reputation: 133

Actually you are doing many Silly minor mistakes here. with D3.js you must need to understand data structure.

In Your code i found many mistakes.

1. you stored your json in a variable which names data where you did'nt initialize it but it's ignore by javascript.

2. you passing in console.log(d.bonus); this key is not exist in your json so it's value showing as "undefned". when you watching you console.

3. for your json data you need to convert d.date to date Object.

4. you already wrap your keys in x and y so you just need to pass 

.attr("cx", function(d){ return x(d.date); })
.attr("cy", function(d){return y(d.amount); })

instead of

.attr("cx", function(d){return x(dateFn(d.draw_date))})
.attr("cy", function(d){return y(amountFn(d))})

So i fix Some Errors in your code you can test this code by running on your system:

My HTML:

<!DOCTYPE html>
<html>
<head>  
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-theme.css">
</head>    

<body>
<div class = "container">
    <div class="row">
        <div class="col-md-12">
            <div class = "panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">D3 Test Example</h3>
                </div>
                <div class="panel-body">
                    <div id="demo"></div>
                <div>
            </div>
        </div>
    </div>
</div>
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/d3.v3.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>

my Script code is here..

    (function() {

      d3.json("data.json", function(error, json){
        if(error) return console.warn(error);
        var data = json;  // you store your json in data variable here..

        var format = d3.time.format("%a %b %d %Y").parse; // you don't need to this...
        var amountFn = function(d){return d.amount; };

        data.forEach(function(d){
            d.date = new Date(d.date); // you convert your d.date value in date string Object 
            d.amount = d.amount;
        });

        var dateFn = function(d){
          return d.date;
        }


        var x = d3.time.scale()
          .range([10, 280])
          .domain(d3.extent(data, dateFn));

        var y = d3.scale.linear()
          .range([180, 10])
          .domain([0, d3.max(data, amountFn)]);

        var svg = d3.select('#demo').append("svg:svg")
          .attr("width", 300)
          .attr("height", 200)

        svg.selectAll("circle").data(data).enter()

          .append("svg:circle")
          .attr("r", 4)
          .attr("cx", function(d){ return x(d.date); })
          .attr("cy", function(d){return y(d.amount); })
      });

 })();

I used this data..

[ { "date": "2015-08-24T00:00:00", "amount": "30" },{ "date": "2015-08-25T00:00:00", "amount": "40" },{ "date": "2015-08-26T00:00:00", "amount": "50" },{ "date": "2015-08-27T00:00:00", "amount": "60" },{ "date": "2015-08-28T00:00:00", "amount": "70" },{ "date": "2015-08-29T00:00:00", "amount": "80" },{ "date": "2015-08-30T00:00:00", "amount": "90" },{ "date": "2015-08-31T00:00:00", "amount": "100" }
]

I hope this is the answer of your Question. So my output is here...

enter image description here

Upvotes: 2

Gilsha
Gilsha

Reputation: 14591

There are two errors in your code.

  1. In the format string, you have to add all the fields you're supplying to the format string. So you should use d3.time.format("%Y-%m-%dT%H:%M:%S"); instead of d3.time.format("%a %b %d %Y").

  2. The dateFn function expects an object as parameter and not the date string. So replace x(dateFn(d.draw_date)) with x(dateFn(d)).

Here is the working code snippet.

var data = [{
    "date": "2015-08-26T00:00:00",
    "amount": "30"
}, {
    "date": "2015-07-26T00:00:00",
    "amount": "40"
}];

var format = d3.time.format("%Y-%m-%dT%H:%M:%S");
var amountFn = function(d) {
    return d.amount
};
var dateFn = function(d) {
    console.log(d.bonus);
    return format.parse(d.date)
}


var x = d3.time.scale()
    .range([10, 280])
    .domain(d3.extent(data, dateFn));

var y = d3.scale.linear()
    .range([180, 10])
    .domain(d3.extent(data, amountFn));

var svg = d3.select('#demo').append("svg:svg")
    .attr("width", 300)
    .attr("height", 200)

svg.selectAll("circle").data(data).enter()
    .append("svg:circle")
    .attr("r", 4)
    .attr("cx", function(d) {
        return x(dateFn(d))
    })
    .attr("cy", function(d) {
        return y(amountFn(d))
    })
div{
   height: 800px;
  width: 1200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="demo"></div>

Upvotes: 0

Related Questions