Rickshaw javascript library: strings for x-axis

Question

I have an array as follows:

var data = [ { x: "2013-10-22T22:56:25.534Z", y: 0 }, { x: "2013-10-22T22:56:25.524Z", y: 162 }, { x: "2013-10-22T22:56:25.514Z", y: 0 } ];

And so on. A total of 50 Objects, each with x and y value. This array should be used to draw a diagram with this rickshaw library: http://code.shutterstock.com/rickshaw/.

As you see above, the x-axis should visualize the time stamp which is in string format. Everything looks fine, but I get the an error message: Uncaught x and y properties of points should be numbers instead of string and number

Does anyone know, how I have to adjust the rickshaw library to show the time stamp (string) in the x-axis of the diagram?

Update A: Attempt to solve the problem in the rickshaw library As suggested here (Rickshaw - js chart library: Need strings instead of numbers on axes), it may be possible to add a function which covers string format too. But I have no clue, how I have to complete this formatter that it works for my project.

Answer 1

I am not a Rickshaw javascript library specialist. From their examples & your error log, it looks like- it expects X & Y object values in INTEGER type, but here type for X is "String".

So, instead of passing the time in String format, you can pass the UNIX Timestamp- which is of INT Type.

---

To Convert your date-time to Unix timestamp in Javascript, use Date.js plug-in

Convert normal date to unix timestamp

Simply loop through your X co-ordinates & change them to Unix TimeStamp-

var changeDateTimeToTimestamp = function(data){
    for(var key in data){
        data[key].x = new Date(data[key].x).getTime() / 1000;
    }
    return data;
}

var data = [ { x: "2013-10-22T22:56:25.534Z", y: 0 }, { x: "2013-10-22T22:56:25.524Z", y: 162 }, { x: "2013-10-22T22:56:25.514Z", y: 0 } ];
var newData = changeDateTimeToTimestamp(data);
//console.log(newData);