leite.g
Posts: 8
Joined: Wed Jun 21, 2023 8:47 am

Gantt Chart dynamic rangeSelector buttons

Hi there,

I am trying to setup a rangeSelector button to have a dynamic type. The idea is to have the "last clicked button type" saved in one variable for every button (click event), and use this variable to set the type for the dynamic one having today´s date always in the center of the chart.
It seems to work well for 'month' and 'year' types, but the range selector gets unresponsive when I try the same code with 'day' and 'week'.

I reproduced this phenomenon in the code below.
The way it is done works fine.
However, if one assigns the value 'day' to 'type' and, in the button 'rdm' switches between 'day' and 'week', the selector does not work dynamically anymore. In fact, the buttons does not responde whatsoever.

I would be glad to hear from the team! :)

Thanks!

Code: Select all

var counter = 0;
var type = 'month';

Highcharts.ganttChart('container', {

    title: {
        text: 'Gantt Chart with Navigation'
    },

    yAxis: {
        uniqueNames: true
    },

    navigator: {
        enabled: true,
        liveRedraw: true,
        series: {
            type: 'gantt',
            pointPlacement: 0.5,
            pointPadding: 0.25,
            accessibility: {
                enabled: false
            }
        },
        yAxis: {
            min: 0,
            max: 3,
            reversed: true,
            categories: []
        }
    },

    scrollbar: {
        enabled: true
    },

    rangeSelector: {
        enabled: true,
        selected: 0,
        buttons: [{
        //type: '',
        //count: '',
        text: 'rdm',
        title: 'rdm',
        events:{
            click: function(e) {
            
               
                if (counter % 2 ==  0){
                    counter++
                    this.text = type;
                    this.type = type
                    this.count = 1

                    type = 'month'
    
                }else{
                    counter++
                    this.text = type;
                    this.type = type
                    this.count = 1

                    type = 'year'
                }

            }
        }
    }, {
        type: 'month',
        count: 3,
        text: '3m',
        title: 'View 3 months'
    }, {
        type: 'month',
        count: 6,
        text: '6m',
        title: 'View 6 months'
    }, {
        type: 'ytd',
        text: 'YTD',
        title: 'View year to date'
    }, {
        type: 'year',
        count: 1,
        text: '1y',
        title: 'View 1 year'
    }, {
        type: 'all',
        text: 'All',
        title: 'View all'
    }]
    },

    accessibility: {
        point: {
            descriptionFormat: '{yCategory}. ' +
                '{#if completed}Task {(multiply completed.amount 100):.1f}% completed. {/if}' +
                'Start {x:%Y-%m-%d}, end {x2:%Y-%m-%d}.'
        },
        series: {
            descriptionFormat: '{name}'
        }
    },

    lang: {
        accessibility: {
            axis: {
                xAxisDescriptionPlural: 'The chart has a two-part X axis showing time in both week numbers and days.',
                yAxisDescriptionPlural: 'The chart has one Y axis showing task categories.'
            }
        }
    },

    series: [{
        name: 'Project 1',
        data: [{
            start: Date.UTC(2017, 11, 1),
            end: Date.UTC(2018, 1, 2),
            completed: {
                amount: 0.95
            },
            name: 'Prototyping'
        }, {
            start: Date.UTC(2018, 1, 2),
            end: Date.UTC(2018, 11, 5),
            completed: {
                amount: 0.5
            },
            name: 'Development'
        }, {
            start: Date.UTC(2018, 11, 8),
            end: Date.UTC(2018, 11, 9),
            completed: {
                amount: 0.15
            },
            name: 'Testing'
        }, {
            start: Date.UTC(2018, 11, 9),
            end: Date.UTC(2018, 11, 19),
            completed: {
                amount: 0.3,
                fill: '#fa0'
            },
            name: 'Development'
        }, {
            start: Date.UTC(2018, 11, 10),
            end: Date.UTC(2018, 11, 23),
            name: 'Testing'
        }, {
            start: Date.UTC(2018, 11, 25, 8),
            end: Date.UTC(2018, 11, 25, 16),
            name: 'Release'
        }]
    }]
});
jedrzej.r
Posts: 700
Joined: Tue Jan 24, 2023 11:21 am

Re: Gantt Chart dynamic rangeSelector buttons

Hi!

Welcome to our forum and thanks for reaching out to us with your question!

Firstly, xAxis.minRange needs to be changed in order to select a shorter time span, e.g. one day or one hour. Per API:
The default minRange for the x axis is five times the smallest interval between any of the data points.
Secondly, it seems that your function for rdm button couldn't properly calculate the selected range, so I've impliciltly added correct range for day and week time spans, and the function works fine.

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

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

Let me know if you have any more questions!
Best regards!
Jędrzej Ruta
Highcharts Developer
leite.g
Posts: 8
Joined: Wed Jun 21, 2023 8:47 am

Re: Gantt Chart dynamic rangeSelector buttons

Yeah it works!

A couple more question, please..
Is there any priority between count, _range and setExtremes() in order to set a range? Or do they need to work in a certain combination?
Do they override one another?

Thanks a lot! :)
jedrzej.r
Posts: 700
Joined: Tue Jan 24, 2023 11:21 am

Re: Gantt Chart dynamic rangeSelector buttons

Hi!

Basically, when customizing rangeSelector buttons, preffered way of setting them up is by using count combined with type properties, so the function can calculate proper range. It looks like it wasn't able to calculate the desired range because of custom code used for dynamic button, hence implicitly added _range (which shouldn't be set normally). If you setup afterSetExtremes function, it will override rangeSelector options, as this event is fired at every setExtremes set, e.g. after selecting range with navigator or by selecting date period.

The most important thing is that you should know which solution applies best to your project, and use it according to it's application. If in doubt, don't hesitate to ask.

API:
https://api.highcharts.com/gantt/rangeS ... tons.count
https://api.highcharts.com/gantt/xAxis. ... etExtremes

In case of any other questions, feel free to ask anytime.
Best regards!
Jędrzej Ruta
Highcharts Developer

Return to “Highcharts Gantt”