1

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.

Community
  • 1
  • 1
Kevin
  • 229
  • 2
  • 10
  • 19

1 Answers1

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);
Community
  • 1
  • 1
Avisek Chakraborty
  • 8,229
  • 10
  • 48
  • 76
  • Thanks for your answer. The time stamp I want to use is from an API in json. I have to us it. I tried to convert the string into an intereger, but without success. I also found this: [link]http://stackoverflow.com/questions/13061214/rickshaw-js-chart-library-need-strings-instead-of-numbers-on-axes. But I don't understand the concept... – Kevin Jul 03 '14 at 08:04
  • I implemented your update. But after the execution of the function, the result is i.e. for "2013-10-22T22:56:25.534Z" just 2013 (int). The same for the other strings :-( For "1287788185" it works. But I have this unpleasant format with dashes "-" and colons ":" in the string. – Kevin Jul 03 '14 at 08:54
  • yes. Thats should be the case. If you think of a GRAPH-PAPER, it only takes X,Y co-ordinates values in NUMBER e.g. (3,5); (10, 20) etc. How can u plot a point having String in the co-ordinates. – Avisek Chakraborty Jul 03 '14 at 09:16
  • javascript parseInt() function make Ineger from String. So, passing a String like- "2013-10-...", it only keeps the initial number part (2013) as Integer. – Avisek Chakraborty Jul 03 '14 at 09:17
  • You're definitely right regarding the integer vs. string approach. In the examples of rickshaw I've found this: https://github.com/shutterstock/rickshaw/blob/master/examples/x_axis.html That could be the solution, but I need to know how to fill the "map" with my strings automatically... any ideas? – Kevin Jul 03 '14 at 09:25
  • Check my new EDIT in answer – Avisek Chakraborty Jul 03 '14 at 09:28
  • Thank you very much, Avi C! With your function the rickshaw-diagram knows how to handle the integer values. unfortunately, the time stamp isn't shown in the orgiginal format. But for the beginning, that's ok and I can continue my work. – Kevin Jul 03 '14 at 10:01
  • Glad to know, it helped. Keep on upvoting ;) – Avisek Chakraborty Jul 03 '14 at 10:45