d3js unable to parse json data

Question

I have a json file in the following format

[{
"dayTime1": {
    "timestamp": ["01\/02\/2014 16:59", "02\/02\/2014 16:59", "03\/02\/2014 16:59", "04\/02\/2014 16:59", "05\/02\/2014 16:59", "06\/02\/2014 16:59", "07\/02\/2014 16:59", "08\/02\/2014 16:59", "09\/02\/2014 16:59", "10\/02\/2014 16:59", "11\/02\/2014 16:59", "12\/02\/2014 16:59"],
    "phase1": ["33962", "34273", "45274", "46969", "54078", "53361", "46848", "15377", "15278", "27051", "48179", "30228"],
    "phase2": ["34702", "33259", "39046", "45921", "57756", "58406", "58543", "30094", "31006", "46553", "26914", "47677"],
    "phase3": ["15230", "15304", "15436", "16251", "15232", "19469", "15249", "13478", "16626", "19946", "18332", "16766"]
}

}]

On reading this my d3js code gives out the following error Uncaught TypeError: Object [object Array] has no method 'substring'

I am accessing the values using d.dayTime1.timestamp d.dayTime1.phase1 and so on.

$('#kwh').on('click', function () {
    var endDate = new Date(Date.parse($('#to').val()));
    $('#kwh').prop("disabled",true);

    var margin = {
        top: 50,
        right: 20,
        bottom: 50,
        left: 100
    },
        width = 1000 - margin.left - margin.right,
        height = 400 - margin.top - margin.bottom;

    var parseDate = d3.time.format("%d/%m/%Y %H:%M").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").ticks(15);
    var yAxis = d3.svg.axis().scale(y)
        .orient("left").ticks(10);
     var yAxis1 = d3.svg.axis().scale(y)
        .orient("right").ticks(10);    

    var valueline = d3.svg.line()
            .x(function(d) { return x(d.dayTime1.timestamp); })
            .y(function(d) { return y((d.dayTime1.phase1)/1000); }); 

    var valueline2 = d3.svg.line()
            .x(function(d) { return x(d.dayTime1.timestamp); })
            .y(function(d) { return y((d.dayTime1.phase2)/1000); }); 

    var valueline3 = d3.svg.line()
            .x(function(d) { return x(d.dayTime1.timestamp); })
            .y(function(d) { return y((d.dayTime1.phase3)/1000); });                

    var svg = d3.select("#graph")
        .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 + ")");

   /* function make_x_axis() {
        return d3.svg.axis()
        .scale(x)
        .orient("yop")
        .ticks(20)
        }*/
    function make_y_axis() {
        return d3.svg.axis()
        .scale(y)
        .orient("left")
        .ticks(10)
        }

    d3.json("<?php echo base_url(); ?>uploads/<?php echo $username; ?>-dayTime1.json", function(error, data) {
        data.forEach(function(d) {
            d.dayTime1.timestamp = parseDate(d.dayTime1.timestamp);
            d.dayTime1.phase1 = +d.dayTime1.phase1;  //<===
            d.dayTime1.phase2 = +d.dayTime1.phase2; // <===
            d.dayTime1.phase3 = +d.dayTime1.phase3; //   <===

        });

        x.domain(d3.extent(data, function(d) {return d.dayTime1.timestamp;}));
        y.domain([0, d3.max(data, function(d) {
                var decValue =  Math.max(d.dayTime1.phase1, d.dayTime1.phase2, d.dayTime1.phase3);
                return (decValue/1000);
    })]);

    svg.append("path")
        .attr("class","line")
/*        .style("stroke", "yellow");*/
        .attr("d", valueline(data));

    svg.append("path")
        .attr("class", "line1")
        .style("stroke", "red")
        .attr("d", valueline2(data));

    svg.append("path")
        .attr("class", "line2")
        .style("stroke", "green")
        .attr("d", valueline3(data));

    svg.append("g") // Add the X Axis
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);

    svg.append("g") // Add the Y Axis
        .attr("class", "y axis")
            .call(yAxis);   

    svg.append("g") // Add the Y Axis 1
        .attr("class", "y1 axis")
        .attr("transform", "translate("+width+",0)")
            .call(yAxis1);        

    svg.append("text") // text label for the x axis
        .attr("x", (width/2) )
        .attr("y", height + 50)
        .style("text-anchor", "middle")
        .style("font-weight", "bold")
        .text("Date");        

    svg.append("text")
        .attr("x", -200)
        .attr("y",  -40)    
        .attr("class","leftlegend")
        .style("font-weight", "bold")
        .text("KWH Per Phase");

    });

   /*svg.append("g")
        .attr("class", "grid")
        .attr("transform", "translate(0," + height + ")")
        .call(make_x_axis()
        .tickSize(-height, 0, 0)
        .tickFormat("")
        );*/


    svg.append("g")
    .attr("class", "grid")
    .call(make_y_axis()
    .tickSize(-width, 0, 0)
    .tickFormat("")
    );

});

Is this the right way of accessing it ?

Answer 1

It looks like your code (like most d3 code) is expecting row-major data, while your data is column-major. The code is expecting to find an array of objects, whereas your data is an object of arrays. Thus the problem trying to do string operations on an array, for date parsing.