6

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.

Krystian Cybulski
  • 10,789
  • 12
  • 67
  • 98
  • Did you see [this example](http://code.shutterstock.com/rickshaw/examples/lines.html)? – Lars Kotthoff Sep 30 '13 at 18:09
  • Yes. I have looked at the examples. I have now figured out that my axis were not showing nicely because I did not include the css. But I still have not figured out how to provide the date data and render it as dates. The examples generate random data and I do not know which format it is in. – Krystian Cybulski Sep 30 '13 at 18:38
  • I guess the easiest thing to do would be to print the variable that holds the data to the debug console so you can have a look at it. – Lars Kotthoff Sep 30 '13 at 18:44
  • Have you looked at "axes and tick marks" section in rickshaw documentation? http://code.shutterstock.com/rickshaw/ – Phuoc Do Oct 01 '13 at 05:52
  • You may be able to use d3 format function, like this: var xAxis = d3.svg.axis().scale(x).orient("bottom").tickFormat(d3.time.format("%m-%d")); – Phuoc Do Oct 01 '13 at 05:53
  • I know it has been a while, but have you decided on an answer to this question? – MandM Jul 30 '15 at 20:33
  • First comment link gives 404 use [this](https://tech.shutterstock.com/rickshaw/examples/lines.html) instead. – Matthew Hegarty Oct 22 '18 at 12:00

4 Answers4

13

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.

MandM
  • 3,293
  • 4
  • 34
  • 56
  • The function name in the sample code is incorrectly provided as 'toLocateString' when it should be 'toLocaleString'. Couldn't make the edit as 'edits must be 6 characters' :/ – Barnaby Mercer Apr 13 '16 at 09:58
  • 1
    I should also have said thank you, as this solution was just what I needed. Cheers! – Barnaby Mercer Apr 17 '16 at 10:47
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

James Jiang
  • 2,073
  • 6
  • 19
  • 25
0

I have finally figured out that the X axis values should be epoch time values. Then, using the code from the examples I was able to show a proper time scale.

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

Krystian Cybulski
  • 10,789
  • 12
  • 67
  • 98
  • 1
    Did you solve this week problem? I have exactly the same one. – Jorge Arévalo Jan 30 '14 at 20:55
  • I have a similar problem, and have been unable to find out a solution. My data are minute data covering part of the same day (from 8:45:00 to 13:15:00). Would you be kind to share your piece of code, please? – tagoma Oct 19 '14 at 14:27
0

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

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

Vijay
  • 23
  • 3