How to calculate dates on the x-axis in rickshaw

Question

I have a dataset for dates. What value should be given to x-axis values? How to get Rickshaw to display X data values ​​as dates?

I looked through the documents and examples and found nothing.

Answer 1

I just started using Rickshaw and was in a specific situation.

But, before I go any further, the Rickshaw documentation is virtually non-existent, which is very frustrating because the performance of Rickshaw is outstanding compared to other JS graphics libraries.

The best way to find examples is to dig out the source code and sample code on your github page to understand the meaning (not the way the documentation should be).

Having said that, give it a try and build a strong question / answer database here in StackOverflow!

So, back to the question :) It seems that you have already found your own solution to the issue, but I also provided my solution.

Instead of using Rickshaw.Graph.Axis.Time I used Rickshaw.Graph.Axis.X and set tickFormat .

 var data = [ { x: TIME_SINCE_EPOCH_IN_SECONDS, y: VALUE }, { x: NEXT_TIME_SINCE_EPOCH_IN_SECONDS, y: NEXT_VALUE } ] var xAxis = new Rickshaw.Graph.Axis.X({ graph: graph, tickFormat: function(x){ return new Date(x * 1000).toLocaleTimeString(); } }) xAxis.render(); 

toLocaleTimeString () can be any of the Javascript date functions, for example toLocaleString () , toLocaleDateString () , toTimeString (), or toUTCString () . Obviously, because tickFormat takes a function as an argument that its own formatter can provide.

Coliber, I would be interested to understand your answer if you could provide more detailed information.

Answer 2

In addition to Lars' answer, which I found by default, Rickshaw calls

  .toUTCString(x.value*1000) //(just ctrl+F to find where =) ). 

In my case, I saw a different timestamp on X between graphite and rickshaw for this reason, and it works great once I change it to

  .toLocaleString(x.value*1000). 

In addition, you may need to change this in two places: Rickshaw.Graph.Axis.Time and ... HoverDetails

Answer 3

Finally, I realized that the values ​​of the X axis should be the time values ​​of an era. Then, using the code from the examples, I was able to show the correct timeline.

I still have a problem because I would like to show tags weekly on the X axis. However, setting timeUnit to "week" causes JavaScript errors. It works with other time units, though.

Answer 4

None of this worked for me. What worked with angularjs:

'x' : d3.time.format.iso.parse(date).getTime(), 'y' : 10