D3 Line Graph with JSON Data in ISO 8601 Format

Question

I am trying to graph the JSON data. I am new to js and d3. I'm able to format the ISO 8601 dates on the x-axis, but I cannot get the line to show up. The y-axis and x-axis are showing up just fine. I keep getting an error that says: "Error: Invalid value for attribute d="MNaN,-708.1292215027511LNaN." I THINK the issue has to do with binding my data points to the axis. I'd like to use the date at x-axis and Processor as my y-axis.

Please let me know if you have any suggestions that will help my line ("path") show up. Any explanations about how to deal with ISO 8601 dates would also be very helpful. Thanks!!

<script>

        //JSON data for graph
        var data = [
        {

            "date": "2015-04-01T00:00:00",
            "Logon": "1535.000000",
            "ServerExport": "704.000000",
            "Processor": "15.268909",
            "AdminLogon": "1731.000000"
        },
        {

            "date": "2015-04-01T00:10:00",
            "Logon": "1995.000000",
            "ServerExport": "630.000000",
            "Processor": "15.585726",
            "AdminLogon": "1951.000000"
        },
        {

            "date": "2015-04-01T00:20:00",
            "Logon": "1946.500000",
            "ServerExport": "653.500000",
            "Processor": "10.585794",
            "AdminLogon": "1903.500000"
        },
        {

            "date": "2015-04-01T00:30:00",
            "Logon": "1851.500000",
            "ServerExport": "650.500000",
            "Processor": "5.999048",
            "AdminLogon": "1830.000000"
        },
        {

            "date": "2015-04-01T00:40:00",
            "Logon": "1732.500000",
            "ServerExport": "685.000000",
            "Processor": "10.097523",
            "AdminLogon": "1864.000000"
        },
        {

            "date": "2015-04-01T00:50:00",
            "Logon": "1622.000000",
            "ServerExport": "664.500000",
            "Processor": "7.387592",
            "AdminLogon": "1757.000000"
        },
        {

            "date": "2015-04-01T01:00:00",
            "Logon": "995.000000",
            "ServerExport": "508.500000",
            "Processor": "8.683075",
            "AdminLogon": "1438.000000"
        },
        {

            "metricDate": "2015-04-01T01:10:00",
            "Logon": "1416.666666",
            "ServerExport": "723.000000",
            "Processor": "12.205153",
            "AdminLogon": "1721.500000"
        },
        {

            "date": "2015-04-01T01:20:00",
            "Logon": "1245.500000",
            "ServerExport": "631.500000",
            "Processor": "14.483815",
            "AdminLogon": "1661.500000"
        },
        {

            "date": "2015-04-01T01:30:00",
            "Logon": "1162.500000",
            "ServerExport": "593.500000",
            "Processor": "19.331836",
            "AdminLogon": "1642.500000"
        },
        {

            "date": "2015-04-01T01:40:00",
            "Logon": "1094.000000",
            "ServerExport": "573.000000",
            "Processor": "1.011995",
            "AdminLogon": "1559.500000"
        },
        {

            "date": "2015-04-01T01:50:00",
            "Logon": "1054.000000",
            "ServerExport": "542.500000",
            "Processor": "11.102191",
            "AdminLogon": "1460.000000"
        },
        {

            "date": "2015-04-01T02:00:00",
            "Logon": "955.500000",
            "ServerExport": "1110.000000",
            "Processor": "6.969313",
            "AdminLogon": "6978.000000"
        },
        {

            "date": "2015-04-01T02:10:00",
            "Logon": "960.500000",
            "ServerExport": "481.500000",
            "Processor": "6.288052",
            "AdminLogon": "1777.000000"
        },
        {

            "date": "2015-04-01T02:20:00",
            "Logon": "945.500000",
            "ServerExport": "552.000000",
            "Processor": "12.196932",
            "AdminLogon": "2991.500000"
        }]

        //initializing dimensions of the visulisation
        var vis = d3.select("#visualisation"),
            WIDTH = 2000,
            HEIGHT = 1000,
            MARGINS = {
                top: 20,
                right: 20,
                bottom: 20,
                left: 50
        }

        //Defining time format
        var timeFormat = d3.time.format('%Y-%m-%dT%H:%M:%S');

        //Defining range for x. Defining range and domain for y
        var x = d3.time.scale().range([MARGINS.left, WIDTH - MARGINS.right])
        var y = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom])//.domain([0, 20])


        //Defining domain for x
        x.domain([timeFormat.parse('2015-04-01T00:00:00'), timeFormat.parse('2015-04-01T02:20:00')])
        //x.domain(d3.extent(data, function (d) { return d.metricDate; }));
        y.domain([0, d3.max(data, function (d) { return d.Processor; })]);


        //Define x axis
        var xAxis = d3.svg.axis()
            .scale(x)
            .ticks(8)
            .orient("bottom")
            .tickFormat(d3.time.format("%Y-%m-%d% %H:%M:%S")); //<== insert the tickFormat function

        //Define y axis
        var yAxis = d3.svg.axis()
            .scale(y)
            .orient("left");

        //Appending the axes to the svg
        vis.append("svg:g")
            .attr("class", "axis")
            .attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")")
            .call(xAxis);

        vis.append("svg:g")
            .attr("class", "axis")
            .attr("transform", "translate(" + (MARGINS.left) + ",0)")
            .call(yAxis);

        //Define line
        var lineGen = d3.svg.line()
            .x(function (d) {
                return x(d.metricDate);
            })
            .y(function (d) {
                return y(d.Processor);
            });

        //Appending the line to the svg
        vis.append('svg:path')
            .attr('d', lineGen(data))
            .attr('stroke', 'green')
            .attr('stroke-width', 2)
            .attr('fill', 'none');


    </script>

Answer 1

You are almost there, but just have a few errors likely due to some copy/pasting or forgetting editing steps.

Here's a working example: jsfiddle

First, the property containing your time stamps is called date on all but one of your objects, so I changed metricDate to date on that one object, and in your lineGen variable.

Second, instead of passing the string d.date to the time scale x , you need to pass timeFormat.parse(d.date) .

Finally, when you calculate the maximum value for the y scale, your routine actually returns "8.683075" , the string starting with the highest character. To fix this, you can change your call to max to use +d.Processor , which converts the numeric strings to numbers.

Answer 2

Firstly: One of the objects in your data array doesn't have a date property, but a metricDate property, and later in your code you use

    var lineGen = d3.svg.line()
        .x(function (d) {
            return x(d.metricDate);
        })

Is that on purpose? It seems like an error to me - in the jsfiddle below I've changed both of these metricDate instances to just date .

After this all it took to make it work was additionally parsing the string to a timeFormat in the line generator, like this:

    //Define line
    var lineGen = d3.svg.line()
        .x(function (d) {
            return x(timeFormat.parse(d.date));
        })
        .y(function (d) {
            return y(d.Processor);
        });

Working jsfiddle: http://jsfiddle.net/68zef399/

PS You might want to scale down the chart size as well - at 2000x1000 it's pretty huge.