CODEWITHSUNDEEP
javascriptangularjschartsd3.jsangularjs-directive
Brian
Brian

Reputation: 2305

AngularJS D3 Visualization with n3 charts

I am working to create a chart which gets paged data from the server, and then draws a graph using the D3 library in conjunction with the n3-charts library (http://n3-charts.github.io/line-chart/#/examples) The issue I am running into utilizing this library is that my server is returning a PHP W3C formatted date which Angular can handle and use filters against, however the n3 chart library is unable to deal with this format. I have tried several different ideas for how to convert the date string to a date object to no avail.

Is there anyone who has created a temperature vs. time graph using the d3 library or used the n3 chart to get this working? Are there better options available for this type of graph? I am only starting in on this because of the recent ng-newsletter with directives example article.

Here is my current ctrl code:

var successCb = function(result) {
        result.forEach(function(val, index, theArray) {
            $scope.readings.push(val);
        });
    }
    var errorCb = function(data) {
        console.log('Failed');
    }
    for (var i = 1; i <= 5; i++) {
        Reading.getAll({limit: 1000, page: i}, successCb, errorCb);
    }
    $scope.options = {
        axes: {
            x: {type: "date", key: "_Time"},
            y: {type: "linear"}
        },
        series: [
            {y: "_degreeF", label: "Temp over Time", color: "#9467bd"}
        ],
        lineMode: "linear",
        tooltipMode: "default"
    };

A data sample looks like:

$scope.data = [
{
    "_ID":1,
    "_time":"2013-10-21T16:46:5905:00",
    "_degreeF":69.58,
    "_degreeC":20.88,
    "_sensor":
        {
        "_ID":2,
        "_name":"Test Sensor 2",
        "_sensorID":"28-00000505f8b6"
        }
},
{
    "_ID":2,
    "_time":"2013-10-21T16:47:01-05:00",
    "_degreeF":69.58,
    "_degreeC":20.88,
    "_sensor":
        {
        "_ID":2,
        "_name":"Test Sensor 2",
        "_sensorID":"28-00000505f8b6"
        }
}
]

Upvotes: 1

Views: 3743

Answers (2)

LoremIpsum
LoremIpsum

Reputation: 4428

Yep, that's because n3-charts works with native Date objects. You might want to return timestamps from your backend, and then cast them into Date objects in your successCb function.

var successCb = function(result) {
    $scope.readings = result.map(function(r) {
        // Assuming there's a timestamp in the _time key
        r.date = new Date(r._time);
        return r;
    });
};

Upvotes: 1

Phuoc Do
Phuoc Do

Reputation: 1344

You can use d3 time formatting, d3.time.format, to parse your date to JS Date object.

Here's a d3js temperature line graph:

http://vida.io/documents/QZZTrhk7SmfChczYp

with date parsing function:

d3.time.format("%Y-%m-%d").parse

Upvotes: 2

Related Questions