Timezone is not adjustable for Time based axis

[edasque]

While very elegant, the existing system doesn't seem to allow displaying the x axis unix timestamps using whatever time zone is appropriate (browser time zone for example).

It ends up using (for hour formatting) something like this:

new Date(1350425400*1000).toUTCString().match(/(\d+:\d+):/)[1]

no matter what

[metanation]

:thumbsup:

See also https://github.com/shutterstock/rickshaw/blob/master/src/js/Rickshaw.Fixtures.Time.js#L5 -- this tzOffset variable isn't being used anywhere.

[abarre]

+1

[dchester]

Yes, it would be nice if this were more flexible.

[ryancurtin]

We actually ran into this problem recently, and we forked the repo to include time zone offset. You can check out the code here: https://github.com/alphaboost/rickshaw/blob/master/src/js/Rickshaw.Graph.Axis.Time.js

Basically, we added an argument to the Rickshaw.Graph.Axis.Time.js, which should be the time zone offset from UTC (i.e. -7 for PDT) * the number of seconds in an hour (3600, since Rickshaw uses seconds instead of milliseconds).

The code isn't quite ready for a pull request on Rickshaw, but it did the trick for us. When we have time to polish it up we'll drop it on a pull.

[edasque]

That's great, I'll use that in the mean time but would love to it to be pulled into Rickshaw after cleanup

[ryancurtin]

Cool, I'll get this on a pull by the end of the week.

[edasque]

Any update on the pull request?

[skyepn]

+1 as well as formatting the hover timestamp

[skyepn]

It seems you can accomplish this by overriding the xFormatter function like so. If you want time as well as date, use toString() instead of toDateString() or format it however you like

        var hoverDetail = new Rickshaw.Graph.HoverDetail( {
            graph: graph,
            formatter: function(series, x, y) {
                var date = '<span class="date">' + new Date(x * 1000).toDateString() + '</span>';
                var swatch = '<span class="detail_swatch" style="background-color: ' + series.color + '"></span>';
                var content = swatch + series.name + ": " + numberWithCommas(parseInt(y)); // + '<br>' + date;
                return content;
            },
            xFormatter: function(x) {
                return new Date(x * 1000).toDateString();
            },
        } );

[ryancurtin]

Sorry about the delay...I haven't been able to get online with the east coast hurricane. I'll get a pull request up once I'm able to get online.

On Friday, November 2, 2012, Skye Nott wrote:

It seems you can accomplish this by overriding the xFormatter function like so. If you want time as well as date, use toString() instead of toDateString() or format it however you like

    var hoverDetail = new Rickshaw.Graph.HoverDetail( {
        graph: graph,
        formatter: function(series, x, y) {
            var date = '<span class="date">' + new Date(x * 1000).toDateString() + '</span>';
            var swatch = '<span class="detail_swatch" style="background-color: ' + series.color + '"></span>';
            var content = swatch + series.name + ": " + numberWithCommas(parseInt(y)); // + '<br>' + date;
            return content;
        },
        xFormatter: function(x) {
            return new Date(x * 1000).toDateString();
        },
    } );

— Reply to this email directly or view it on GitHubhttps://github.com/shutterstock/rickshaw/issues/140#issuecomment-10035466.

[abarre]

I think that the time axis should be drop in favor of d3.time.scale as it's mentioned in #163.

If we do that, we could close this issue.

[funvit]

+1 as well as formatting the hover timestamp

[gingerlime]

This (or #163) seems like a popular request for our Giraffe users... Any ideas about the complexity of supporting this in Rickshaw? We'd be happy to try to contribute some code to make this happen, but might need some help getting started.

[idning]

I fix it Here: https://github.com/idning/giraffe try it

[gingerlime]

Hey @idning - I had a quick look, but it's hard to see which changes were made to Rickshaw / D3 to make this work. As far as I could see, those were the only changes - and not specifically inside Giraffe?

I think it would be great if you could make a pull request to Rickshaw, so this might hopefully get merged-in and supported by the Rickshaw library.

[thomasyip]

I made a Pull Request #239 out of necessities. My goal was more narrow to show local time, instead of make timezone adjustable.

I didn't go the d3.time.scale route, because I am not familiar with d3 code base and thought it would take longer.

I post it here because it might help other, before the real fix.

[rbriski]

You can also just make your own unit formatter and send it to timeUnit. I'm using moment in this example:

# Create the formatter
unit_formatter = name: '2 hour', seconds: 3600 * 2, formatter: (d) -> moment(d).format('h:mm a')

# Pass to the time axis
xAxis = new Rickshaw.Graph.Axis.Time
    graph: graph,
    ticksTreatment: ticksTreatment,
    timeUnit: unit_formatter
xAxis.render()

[gingerlime]

This looks like a great suggestion/workaround @rbriski, thanks! I'll try to see if I can use it for giraffe, to resolve kenhub/giraffe#15 and kenhub/giraffe#21

[pierre-b]

+1 for handling timezones

[pierre-b]

The trick actually is hacking the ticks like @ryancurtin did, and use a custom time unit formatter as @rbriski said too.

The first hack is used to sync the X axis ticks with your data points, and the second one is to avoid having the wrong date displayed on the ticks.

Anyway, the ticks offsets will be often wrong because they are calculated with seconds span and not from a real calendar (i.e: month = 86400 * 30.5), so I think this Time Axis has to be rewritten from scratch.

Will post one I have time to write it.

[pierre-b]

Hi guys,

Took time this morning to write a new component wich uses d3.time to compute ticks offsets and allow you to customize the labels for displaying proper timezone formats.

Here is the code: https://gist.github.com/pierre-b/f9be76e3237c12951262

Feel free to merge it with the official code base if you want to.

[RashidClark]

@pierre-b , thanks for putting in the time (in multiple senses of the phrase.) The link to your code is giving a 404 at the moment, however

UPDATE: I've since placed in @ryancurtin's suggested edits, and got things to work. Thanks!

[pierre-b]

Sorry @RashidClark since there was no much activity here I thought the Rickshaw project was dead and I deleted my code to switch to another graph lib (a commercial one), however thank you for Rickshaw I was really happy to use it by the time ;)

[IronSean]

So there's still no official, merged solution for this, despite multiple attempts at solutions and pull requests? Is anyone even still managing this project?

[ren90]

+1 (even if this is like 5 month late, still it's really worth it to have timezone offsetting)

[ksheetijsaini]

The Rickshaw documentation is really bad, so you have to read the source code to make sense of the library which is agony for new comers. Maybe we all should make a public documentation for this amazing library.

Anyway, here's a simple solution.

For the X-Axis use - Rickshaw.Fixtures.Time.Local():

var x_axis = new Rickshaw.Graph.Axis.Time( {
            graph: graph,
            timeFixture: new Rickshaw.Fixtures.Time.Local()
        } );

Now you might have face inconsistency with Rickshaw.Graph.HoverDetail. So for that, update the xFormatter as follows:

var hoverDetail = new Rickshaw.Graph.HoverDetail( {
        graph: graph,
        xFormatter: function(x) {
                return new Date( x * 1000 ).toLocaleString();
                    }
        });

This is because Rickshaw by default uses toUTCString(). You can further modify the date format to your liking.

Side note: Rickshaw uses seconds instead of milliseconds, therefore the (x * 1000)

[chriscummings]

+1 for handling timezones