Page 1 of 1

Background event on Highcharts Gantt

Posted: Mon May 31, 2021 5:51 pm
by MinosGFX
Here is for a project we used before FullCalendar in resourceView mode to display gantt a from an algorithm. In this gantt we have jobs, as well as the display of the unavailability of resources (workstation here), they can be irregular, therefore to be placed for each resource.

Here is a screenshot of the old Gantt with Fullcalendar :
Screenshot_4.png
Screenshot_4.png (49.12 KiB) Viewed 3274 times
We changed for Highcharts for the reactivity and especially the reordering which will be simpler with Highcharts, only I do not know if it is possible, and if yes how, to display events in "background" mode which passes under the jobs. Would you have a solution for me ?

Here screenshot of highcharts gantt currently :
Screenshot_6.png
Screenshot_6.png (70.01 KiB) Viewed 3274 times
Thanks !

Re: Background event on Highcharts Gantt

Posted: Tue Jun 01, 2021 11:08 am
by sebastian.h
Hi,
Thanks for contacting us.

I must ask you about details, this vertical gray background at the chart are your events?

It will be helpful if you send me your example for testing in online code editor.

I'm waiting for news from you.
Best regards.

Re: Background event on Highcharts Gantt

Posted: Tue Jun 01, 2021 11:32 am
by MinosGFX
sebastian.h wrote: Tue Jun 01, 2021 11:08 am Hi,
Thanks for contacting us.

I must ask you about details, this vertical gray background at the chart are your events?

It will be helpful if you send me your example for testing in online code editor.

I'm waiting for news from you.
Best regards.
Yes on FullCalendar, the grey vertical bars are events, just like the colored bars, attributed to resources (coming from API), I'm looking to be able to create those same grey vertical bars on highcharts, no matter how.

Here sandbox from my gantt highcharts currently : https://codesandbox.io/s/nice-microserv ... ttMain.jsx

Re: Background event on Highcharts Gantt

Posted: Wed Jun 02, 2021 10:00 am
by sebastian.h
Hi,
Thanks for the message.

I think a possible approach will be rendering custom background in a place where you want.

You need to find an item in your row and draw a gray rectangle there.
Here is an example where I render a custom background in a cell using SVGRenderer.

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

API References:
https://api.highcharts.com/class-refere ... VGRenderer

Best regards.

Re: Background event on Highcharts Gantt

Posted: Thu Jun 03, 2021 6:15 am
by MinosGFX
sebastian.h wrote: Wed Jun 02, 2021 10:00 am Hi,
Thanks for the message.

I think a possible approach will be rendering custom background in a place where you want.

You need to find an item in your row and draw a gray rectangle there.
Here is an example where I render a custom background in a cell using SVGRenderer.

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

API References:
https://api.highcharts.com/class-refere ... VGRenderer

Best regards.
Hi Sebastian,
Thank you for your answer.

It's exactly what I'm looking for, now I'm going to try to work a little to convert a start - end date duration, to be able to display it as I want...
I just don't understand how to assign it precisely on a line.

Re: Background event on Highcharts Gantt

Posted: Fri Jun 04, 2021 7:59 am
by sebastian.h
Hi,
I have another idea, maybe use xAxis.plotBands will work in your case?

API References:
https://api.highcharts.com/gantt/xAxis.plotBands

Best regards.

Re: Background event on Highcharts Gantt

Posted: Sat Jun 05, 2021 8:47 am
by MinosGFX
sebastian.h wrote: Fri Jun 04, 2021 7:59 am Hi,
I have another idea, maybe use xAxis.plotBands will work in your case?

API References:
https://api.highcharts.com/gantt/xAxis.plotBands

Best regards.
Hi,
I had already looked at the plotBands but from what I understood they are displayed over the entire height of the gantt, but each Y axis resource can have a small downtime of a few hours without it being on all of them, therefore impossible to do like that, unless it is possible to assign a plotband to a specific resource ...

Re: Background event on Highcharts Gantt

Posted: Mon Jun 07, 2021 7:28 am
by MinosGFX
Hi Sebastian,
I think I found a way to do what I want with the SVGRenderer.
I'm missing just one information, is it possible to disable the parent collapse on click?
Indeed as the SVG are put in pixel in chart, if I collapse it's not ok anymore...

Re: Background event on Highcharts Gantt

Posted: Mon Jun 07, 2021 10:11 am
by sebastian.h
Hi,
You can use series.gantt.data.collapsed to set collapsed points after chart will rendered.

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

API References:
https://api.highcharts.com/gantt/series ... .collapsed

Let me know if it's the approach fit you.
Best regards.

Re: Background event on Highcharts Gantt

Posted: Mon Jun 07, 2021 10:41 am
by MinosGFX
sebastian.h wrote: Mon Jun 07, 2021 10:11 am Hi,
You can use series.gantt.data.collapsed to set collapsed points after chart will rendered.

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

API References:
https://api.highcharts.com/gantt/series ... .collapsed

Let me know if it's the approach fit you.
Best regards.
Hi,
Thank you for all your answers.
I've seen this api, but I'm looking for something to prevent the user from being able to collapse the parent, is this possible?

Re: Background event on Highcharts Gantt

Posted: Mon Jun 07, 2021 11:45 am
by sebastian.h
Hi,
Another topic from a forum about detection, you will find their nice solution from a user.
viewtopic.php?f=9&t=46620&p=167411#p167291

Have look at this example, inside the wrapper it's function detecting click and mouse positions.
https://jsfiddle.net/BlackLabel/Lkdfx70y/

Best regards.

Re: Background event on Highcharts Gantt

Posted: Mon Jun 07, 2021 12:10 pm
by MinosGFX
sebastian.h wrote: Mon Jun 07, 2021 11:45 am Hi,
Another topic from a forum about detection, you will find their nice solution from a user.
viewtopic.php?f=9&t=46620&p=167411#p167291

Have look at this example, inside the wrapper it's function detecting click and mouse positions.
https://jsfiddle.net/BlackLabel/Lkdfx70y/

Best regards.
Thank you very much, I will look at

Re: Background event on Highcharts Gantt

Posted: Mon Jun 07, 2021 12:26 pm
by sebastian.h
You're welcome!
If you have a question, feel free to contact me at any time.

Best regards.