How to graph dates on X axis in Rickshaw

Question

I have a set of data for dates. What value should I provide the X axis values? How do I make Rickshaw display the X data values as dates?

I looked around the docs and examples and cannot find anything.

Answer 1

I've just started using Rickshaw and was in the exact situation.

But, before I go any further, Rickshaw documentation is virtually nonexistent which is very upsetting because the performance of Rickshaw compared to other JS graphing libraries is outstanding.

The best way to find examples is to dig into the source code and example code on their github page try to make sense of things (not the way documentation should be).

That being said, let's try and build a strong base of questions/answers here on StackOverflow!

So, back to the question :) It looks like you've already found your own solution to the question, but I'll provide my solution as well.

Rather than using Rickshaw.Graph.Axis.Time, I've used Rickshaw.Graph.Axis.X and set the tickFormat accordingly.

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, such as toLocaleString(), toLocaleDateString(), toTimeString(), or toUTCString(). Obviously, because the tickFormat takes a function as an argument one can supply their own formatter.

Koliber, I'd be interested to understand your answer if you could provide more detail as well.

Answer 2

Additional to Lars' reply, I found by default Rickshaw is calling

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

In my case, I saw different time label on X between Graphite and Rickshaw for this reason, and it works beautifully once I changed it to

 .toLocaleString(x.value*1000). 

Plus, you may need modify this in two places : Rickshaw.Graph.Axis.Time and the ...HoverDetails