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'
}]
}]
});