Skipping weekends with Highcharts Gantt

Question

I am looking for a way to skip weekends while using date-time xAxis with Highcharts Gantt.

I have read a few posts about the

xAxis.ordinal

option for HighStock but I am using HighCharts

Also, I would need to stick to date-time because I plan on creating an interactive Gantt / planning and update a database with these interactions and I don't want to be able to Drag and Drop (or expanding) a task into a weekend. I believe I could prevent that with the drop event (I think there is one) but then, 2/7th of my graph would be "empty".

If anyone knows of a hack for this situation, I'm all for it !

PS: As I type this, I realise that xAxis seems to always be datetime with Gantt, so the "hack" of defining every xValue myself was probably for a regular chart... Am I doomed to have weekends ?

Edit: Here's a fiddle of where we're at right now. As you can see, we are able to hide all weekends using

xAxis: [{
    breaks: [{
        from: Date.UTC(2018, 11, 8),
        to: Date.UTC(2018, 11, 10),
        breakSize: 0,
        repeat: 7 * 24 * 36e5 //every week/7 days
    }]
}]

But, unfortunately, breaks don't seem to be compatible with the "draggable-points" module and causes dragged points/tasks to "resize" themselves when moved over a break (weekends in our case), flicker and, at some point, even disappear from the Gantt :/ (Also, some labels act weirdly when dragging)

I suppose I could "hide" the weekend labels using a custom formater and checking the X value but this would probably leave a blank, but existing, column in the graph and this is why I need to truly remove these dates.

I'll probably have to leave the weekends turned on and do checks/maths so that adding 2 days to a 5 workdays task doesn't "draw" the task over the weekend but actually adds 4 days to compensate (modulo for the win) but that's not ideal...

Should I report this (kinda) weird behavior between draggable-points and xAxis breaks as a bug ? Technically, the points don't change value (I mean, in this demo, using the buttons and console, you see that the xmax-xmin for each point stays the same) but, when drag-dropped onto a weekend, they disappear. That's what I'm trying to avoid.

tl;dr: The breaks act as black-holes when a point is dragged near them (you can't drag a to less than... half a week of distance between your mouse and the break).

Edit: bug report

Hi DixiPoowa, Could you prepare some minimal live example with your sample data? — ppotaczek, Nov 26 '18 at 11:17
Hello @ppotaczek, right now I'm only experimenting on the [official interactive gantt demo](https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/gantt/demo/interactive-gantt/) that I linked. My data would arrive with legit start/end dates (I mean there that they would never be on weekends) and I'm looking for a way to ensure that the user won't be able to drag&drop onto a weekend. I could check dates on "drop events" but, having the WE means losing a lot of space. That's why I'd like to "hide" them altogether. If you want I can edit HC's Interactive Gant demo. — DixiPoowa, Nov 29 '18 at 08:39

score 1 · Accepted Answer · answered Nov 29 '18 at 17:03

1

You can use breaks to hide weekends on the chart. Below you can find an example how to use breaks, but you can also create a function which would insert a break in every weekend:

xAxis: [{
    breaks: [{
        from: Date.UTC(2018, 11, 8),
        to: Date.UTC(2018, 11, 10),
        breakSize: 0
    }]
}, {
    visible: false
}]

Live demo: https://jsfiddle.net/BlackLabel/se1vL6mx/

API: https://api.highcharts.com/gantt/xAxis.breaks

answered Nov 29 '18 at 17:03

ppotaczek

36,341
2
14
24

I didn't think break worked with Gantt. It would be wonderful because, using `repeat: 7 * 24 * 36e5`, the breaks automatically appear at any given weekend. Sadly, [draggable-points and breaks don't work together at all](https://jsfiddle.net/DixiPoowa/jd9gqn8p/16/), from my rapid testing :x I feel like we're getting closer but I'll need a way to use both breaks and drag (and zoom, but all you need is `zoomKey` and `zoomType` so that's not a problem). Should I report this weird behavior as a bug ? (dragging with breaks "resizes" the serie until it bugs / disappears) – DixiPoowa Nov 30 '18 at 08:57
Hi DixiPoowa, Indeed, it looks like that `draggable-points` module does not work with `breaks`. I think that you can report this problem as a bug. – ppotaczek Nov 30 '18 at 15:47
1

I reported the behavior and a way to avoid that is to use `liveRedraw: false`. As the name suggests, the chart won't redraw as you drag and, instead, you get a very clean "ghost" of whatever it is you're dragging. And then, just like in [this official demo] (https://www.highcharts.com/gantt/demo/logistics), you can highlight the ghost in red and prevent drop where you don't want it to be dropped. Thank you very much for your help @ppotaczek – DixiPoowa Dec 07 '18 at 07:31

Skipping weekends with Highcharts Gantt

1 Answers1