d3.js Chart breaks after moving json data to external file

Question

I'm working on a d3.js, crossfilter.js and dc.js tutorial. Everything worked until I removed the json data from the page code to call it from an exteranl file named data.json. I recieve an error:TypeError: newData is undefined n1 = newData.length; in crossfilter.js line 552 I'm stumped but I think I'm close. Thank you for your help.

/*
var data = [
        {date: "12/27/2012", http_404: 2, http_200: 190, http_302: 100},
        {date: "12/28/2012", http_404: 2, http_200: 10, http_302: 100},
        {date: "12/29/2012", http_404: 1, http_200: 300, http_302: 200},
        {date: "12/30/2012", http_404: 2, http_200: 90, http_302: 0},
        {date: "12/31/2012", http_404: 2, http_200: 90, http_302: 0},
        {date: "01/01/2013", http_404: 2, http_200: 90, http_302: 0},
        {date: "01/02/2013", http_404: 1, http_200: 10, http_302: 1},
        {date: "01/03/2013", http_404: 2, http_200: 90, http_302: 0},
        {date: "01/04/2013", http_404: 2, http_200: 90, http_302: 0},
        {date: "01/05/2013", http_404: 2, http_200: 90, http_302: 0},
        {date: "01/06/2013", http_404: 2, http_200: 200, http_302: 1},
        {date: "01/07/2013", http_404: 1, http_200: 200, http_302: 100}
        ];

*/

var data = d3.json('data/data.json', function (error,data) {

var ndx = crossfilter(data);
var parseDate = d3.time.format("%m/%d/%Y").parse;
data.forEach(function(d) {
    d.date = parseDate(d.date);
    d.total= d.http_404+d.http_200+d.http_302;
    d.Year=d.date.getFullYear();
});

var dateDim = ndx.dimension(function(d) {return d.date;});
var hits = dateDim.group().reduceSum(function(d) {return d.total;});
var minDate = dateDim.bottom(1)[0].date;
var maxDate = dateDim.top(1)[0].date;

hitslineChart
    .width(500).height(200)
    .dimension(dateDim)
    .group(hits)
    .x(d3.time.scale().domain([minDate,maxDate]))
    .brushOn(false)
    .yAxisLabel("Hits per day");

var yearRingChart = dc.pieChart("#chart-ring-year"); var yearDim = ndx.dimension(function(d) {return +d.Year;}); var year_total = yearDim.group().reduceSum(function(d) {return d.http_200+d.http_302;});

yearRingChart .width(150).height(150) .dimension(yearDim) .group(year_total) .innerRadius(30);

var status_200=dateDim.group().reduceSum(function(d) {return d.http_200;});
var status_302=dateDim.group().reduceSum(function(d) {return d.http_302;});
var status_404=dateDim.group().reduceSum(function(d) {return d.http_404;});

hitslineChart

.width(500).height(200) .dimension(dateDim) .group(status_200,"200") .stack(status_302,"302") .stack(status_404,"404")
.renderArea(true) .x(d3.time.scale().domain([minDate,maxDate])) .brushOn(false) .legend(dc.legend().x(50).y(10).itemHeight(13).gap(5)) .yAxisLabel("Hits per day");

var datatable   = dc.dataTable("#dc-data-table");
  datatable
    .dimension(dateDim)
    .group(function(d) {return d.Year;})
    // dynamic columns creation using an array of closures
    .columns([
        function(d) { return d.date.getDate() + "/" + (d.date.getMonth() + 1) + "/" + d.date.getFullYear(); },
        function(d) {return d.http_200;},
        function(d) {return d.http_302;},
        function(d) {return d.http_404;},        
        function(d) {return d.total;}
    ]);

dc.renderAll();

});

score 0 · Answer 1 · edited May 23 '17 at 11:49

0

I haven't used D3 too much, but it seems like the error is saying that your 'data' variable is undefined. From reading the docs, it seems like 'd3.json' makes an http request and doesn't work with relative paths. I'd check to see if the error variable in your callback has some information in it. Hope this helps.

d3.json(url[, callback])

Creates a request for the JSON file at the specified url with the mime type "application/json". If a callback is specified, the request is immediately issued with the GET method, and the callback will be invoked asynchronously when the file is loaded or the request fails; the callback is invoked with two arguments: the error, if any, and the parsed JSON. The parsed JSON is undefined if an error occurs. If no callback is specified, the returned request can be issued using xhr.get or similar, and handled using xhr.on.

The comments to the first answer on this post suggest that you can do this in Firefox but not Chrome. Loading local JSON file

edited May 23 '17 at 11:49

Community

1
1

answered Nov 21 '14 at 00:15

Charlie L

463
2
12

Thank you for your input. I'm able to view the json data in the browser console (firebug) so I know I'm making a connection to the json file. – t6s Nov 21 '14 at 00:38
I added your suggestion: d3.json('data/data.json','application/json', function (error,data) { -- the error is now gone which is cool but the graph is still not rendering. One thing at a time! – t6s Nov 21 '14 at 02:03
If you can post a live example it should be pretty straightforward to tell what your problem is. Without an example, there are just too many things that could be going wrong. – Ethan Jewett Nov 21 '14 at 15:53
Get rid of the second argument 'application/json' and then your graph works. All the function takes is a URL and an optional callback. Does it make sense why it'll work in the jsfiddle and not in your original code? – Charlie L Nov 22 '14 at 03:02

d3.js Chart breaks after moving json data to external file

1 Answers1

d3.json(url[, callback])