Highcharts gantt collapse/expand
by jpeter06
HTML
<script src="https://code.highcharts.com/gantt/highcharts-gantt.js"></script>
<script src="https://momentjs.com/downloads/moment-with-locales.min.js"></script>
<div id="container"></div>
<button id="add" data-id="1141">Add 10%</button>
<button id="collapse">collapse/expand All</button>
<button id="collapse2">collapse/expand All2</button>
JavaScript
var today = new Date(),
day = 1000 * 60 * 60 * 24;
// Set to 00:00:00:000 today
today.setUTCHours(0);
today.setUTCMinutes(0);
today.setUTCSeconds(0);
today.setUTCMilliseconds(0);
var serie1 = {
name: 'P1',
id:"p1",
data: [{
collapsed: false,
animate:false,
name: 'Planning',
id: 'planning',
start: today.getTime(),
end: today.getTime() + (20 * day)
}, {
name: 'Requirements',
animate:false,
id: 'requirements',
parent: 'planning',
start: today.getTime(),
end: today.getTime() + (5 * day)
}, {
name: 'Design',
collapsed: true,
animate:false,
id: 'design',
parent: 'planning',
start: today.getTime() + (3 * day),
end: today.getTime() + (20 * day)
}, {
name: 'Layout',
animate:false,
id: 'layout',
parent: 'design',
start: today.getTime() + (3 * day),
end: today.getTime() + (10 * day)
}, {
name: 'Graphics',
animate:false,
parent: 'design',
start: today.getTime() + (10 * day),
end: today.getTime() + (20 * day)
}, {
name: 'Develop', collapsed: true,
id: 'develop',
start: today.getTime() + (5 * day),
end: today.getTime() + (30 * day)
}, {
name: 'Create unit tests',
animate:false,
id: 'unit_tests',
parent: 'develop',
start: today.getTime() + (5 * day),
end: today.getTime() + (8 * day)
}, {
name: 'Implement',
animate:false,
id: 'implement',
parent: 'develop',
start: today.getTime() + (8 * day),
end: today.getTime() + (30 * day)
}
]
}
var chart = Highcharts.ganttChart('container', {
series: [serie1]
});
function getTickByPoint(point) {
return point.series.yAxis.ticks[point.y];
}
/*
* Extend point with utility methods to collapse its related tick/node in the treegrid.
*/
Highcharts.Point.prototype.collapse = function ()...