Major gridlines and week display behaviour

[marcortw]

I'm working on something which preferably displays data on week level rather than day/exact planning level. I have the following defined in my timeline:

[...]
format: {
            minorLabels: {
                millisecond: 'w',
                second: 'w',
                minute: 'w',
                hour: 'w',
                weekday: 'w',
                day: 'w',
                month: 'w',
                year: 'w'
            },
            majorLabels: {
                millisecond: 'MMM-YY',
                second: 'MMM-YY',
                minute: 'MMM-YY',
                hour: 'MMM-YY',
                weekday: 'MMM-YY',
                day: 'MMM-YY',
                month: 'MMM-YY',
                year: 'MMM-YY'
            }
        },

timeAxis: {scale: 'weekday', step: 7},
[...]

I also have a snap function which snaps new elements to the beginning of the week (which is Sunday in my case). This results in the following picture:

As I see it, the vertical grid lines seem to be influenced by the beginning of the month, i.e. a new major grid line is calculated at every first of the month, and as it seems, influence the grid lines of that respective month. Take December as an example: I assume that because I defined step to be 7 and the major grid line at each month's beginning can't be ignored, a major grid line is drawn at the 1st + 7 = 8th of December which is a Tuesday. Is my assumption/understanding of the behavior correct?

What I'd like to have is a major grid line starting with every start of the week, ignoring the new grid line at every first day of the month. Incidentally, this year's November is a good example how i'd like to have it: the major grid lines neatly align with the position of my Sunday-snapped items.

Is there a possibility to change this behavior, for example to turn off the major grid line at the 1st of each month?

Best regards
Marco

[josdejong]

How the grid is displayed depends on your zoom level. If you zoom in a bit, you will see week days (Mon - Sun). There are options to fix the scale, maybe you can use these?

[marcortw]

Hi Jos

I created a little fiddle: http://jsfiddle.net/sczcmozx/ - but because this is all dependent on the resolution of the screen and the zoom level, that probably doesn't help a lot :-) The three items are week-long tasks whose start and end date each indicate where I'd like to have the gridlines and the week number be aligned to.

I tried fixing the scale, which would partially solve the problem if I fix it at a zoom level close enough so that all week days are displayed:

But the zoom level where the week is properly formatted as seen above is way too detailed for my use case - I need to present a lot more information on a lower zoom level. For example if I zoom out a bit using the mouse scrolling wheel, the gridlines and the whole formatting with the weekdays blows up my desired level of accuracy:

If you add timeAxis: {scale: 'weekday', step: 7}, to the options, you can again see the 'breaking' major gridline at the month's begin. Besides that, it gets very close to what I want. I could fix the scale at that level - if that ugly beginning-of-month vertical gridline wouldn't be there:

To phrase it a bit different, I think I need the following:

• Gridlines which lay themselves out along the week (probably only useful if scale: 'weekday'), completely ignoring the month

Any other ideas? Thanks a lot for your help

[josdejong]

How about not showing the major grids?

{
  showMajorLabels: false
}

[marcortw]

I don't see any effect on the grid when playing with these options. But that's kind of expected, isn't it? The showMajorLabels and showMinorLabels options should only affect the time axis according to the documentation. How about adding the following configuration options to the timeline?

gridLines: 'auto' (default), 'day', 'week', 'month'

Whereas 'auto' would behave exactly like the current implementation and the other (mutually exclusive) options would always just add a gridline at the corresponding start of the chosen option, e.g. at the start of either the week, the month or each day. In the case of 'week', no gridline would be added at the start of a month (and the time axis should then behave identically, e.g. not again show the number of the week on the time axis).

Another option could be to have something like 'showMajorGridlines'. If this is set to false, both the major grid line at the month break as well as the major label in the time axis at a month start should not be visible. IMHO, the grid lines and labels could also just follow the scale, e.g. in my case timeAxis: {scale: 'weekday', step: 7}. In fact, you made an interesting comment in cac743a - I don't think the thing I want to achieve is possible without influencing the behaviour of how the major grid is drawn...

If I knew where to start, I'd happily like to contribute.

[josdejong]

Thanks for your suggestions. I think the most important thing missing is a "week" scale which shows grids every 7 days. Would be cool if you could give this a try and see if you can improve it. It would require to extend the TimeStep.js prototype.

[marcortw]

Hey @yotamberk thanks for considering working on this issue :) Are you going to work on it anytime soon? I was thinking of working on it, but i'm rather inexperienced with js, git and the library code.

[yotamberk]

If you want to have a go at it, please go a head! I promise to help you with it if you need advise. I will review your work too. It can be a good oppertunity for you to practice. What do you day? Want to have a shot at it? I will only be able to work on it in two weeks if not

[marcortw]

Thank you very much for offer to help, @yotamberk ! I'm just a bit too busy currently, maybe if i'll find the time around christmas...

[yotamberk]

@marcortw What's the status for this issue. Are you planning to work on this during Christmas?

[marcortw]

@yotamberk Seems like I have to do some work for my regular job. I probably won't find the time to work on this issue, but if I'll find it, I'll ask here first if you already started working on it.

[yotamberk]

No worries. I'll probably get to it this week/next weekend I hope.