Maybe it's a problem of my platform. Do you see any problem on my code?
Code: Select all
var today = new Date(),
day = 1000 * 60 * 60 * 24,
// Dynamic Variables for Tooltip
tooltipStartText = $parameters.TooltipStartText,
tooltipEndText = $parameters.TooltipEndText,
tooltipCompletedText = $parameters.TooltipCompletedText,
tooltipOwnerText = $parameters.TooltipOwnerText,
tooltipProjectManagerText = $parameters.TooltipProjectManagerText,
// Utility functions
dateFormat = Highcharts.dateFormat,
defined = Highcharts.defined,
isObject = Highcharts.isObject;
// Set to 00:00:00:000 today
today.setUTCHours(0);
today.setUTCMinutes(0);
today.setUTCSeconds(0);
today.setUTCMilliseconds(0);
// THE CHART
Highcharts.ganttChart($parameters.ChartContainerId, {
chart: {
events: {
load: function () {
const chart = this;
chart.series.forEach((series) => {
series.points.forEach((point) => {
chart.series.forEach((insideSeries) => {
series.points.forEach((insidePoint) => {
if (
insidePoint.y === point.y &&
point.x < insidePoint.x2 &&
point.x2 > insidePoint.x2 &&
insidePoint.index < point.index
) {
point.update({
dataLabels: {
enabled: true,
align: "left",
x: -20,
},
});
}
if (
insidePoint.y === point.y &&
point.x2 > insidePoint.x &&
point.x2 < insidePoint.x2 &&
insidePoint.index < point.index
) {
point.update({
dataLabels: {
enabled: true,
align: "right",
x: -10,
},
});
}
});
});
});
});
},
},
},
yAxis: {
type: "treegrid",
uniqueNames: true,
},
title: {
text: $parameters.Title
},
subtitle: {
text: $parameters.SubTitle
},
navigator: {
enabled: $parameters.HasNavigator,
liveRedraw: true,
series: {
type: 'gantt',
pointPlacement: 0.5,
pointPadding: 0.25,
accessibility: {
enabled: true
}
},
},
scrollbar: {
enabled: $parameters.HasScrollbar
},
rangeSelector: {
enabled: $parameters.HasRangeSelector
},
yAxis: {
type: 'treegrid',
uniqueNames: $parameters.IsUniqueNames
},
chart: {
backgroundColor: $parameters.BackgroundColor,
style: {
fontFamily: $parameters.Font,
//stroke: 'black',
}
},
//Customization of tooltip
tooltip: {
pointFormatter: function() {
var point = this,
format = '%e. %b',
options = point.options,
completed = options.completed,
amount = isObject(completed) ? completed.amount : completed,
status = ((amount || 0) * 100) + '%',
lines;
lines = [{
value: point.name,
style: 'font-weight: bold;'
}, {
title: tooltipStartText,
value: dateFormat(format, point.start)
}, {
visible: !options.milestone,
title: tooltipEndText,
value: dateFormat(format, point.end)
}, {
title: tooltipCompletedText,
value: status
}, {
visible: options.isShowOwner,
title: tooltipOwnerText,
value: options.owner || 'unassigned'
}, {
visible: options.isProjectManager,
title: tooltipProjectManagerText,
value: options.projectManager || 'unassigned'
}];
return lines.reduce(function(str, line) {
var s = '',
style = (
defined(line.style) ? line.style : 'font-size: 0.8em;'
);
if (line.visible !== false) {
s = (
'<span style="' + style + '">' +
(defined(line.title) ? line.title + ': ' : '') +
(defined(line.value) ? line.value : '') +
'</span><br/>'
);
}
return str + s;
}, '');
}
},
xAxis: [{ // first x-axis
currentDateIndicator: $parameters.IsCurrDateIndicator,
min: $parameters.StartDate.getTime(),
max: $parameters.EndDate.getTime() + ($parameters.EndDateMarginDays * day),
tickInterval: 1000 * 60 * 60 * 24 // 1 month
}, { // second x-axis
tickInterval: 1000 * 60 * 60 * 24 * 7 // 1 week
}, { // third x-axis
tickInterval: 1000 * 60 * 60 * 24 * 30, // 1 day
}],
accessibility: {
keyboardNavigation: {
seriesNavigation: {
mode: 'serialize'
}
},
point: {
descriptionFormatter: function(point) {
var completedValue = point.completed ?
point.completed.amount || point.completed : null,
completed = completedValue ?
' Task ' + Math.round(completedValue * 1000) / 10 + '% completed.' :
'',
dependency = point.dependency &&
point.series.chart.get(point.dependency).name,
dependsOn = dependency ? ' Depends on ' + dependency + '.' : '';
return Highcharts.format(
point.milestone ?
'{point.yCategory}. Milestone at {point.x:%Y-%m-%d}. Owner: {point.owner}.{dependsOn}' :
'{point.yCategory}.{completed} Start {point.x:%Y-%m-%d}, end {point.x2:%Y-%m-%d}. Owner: {point.owner}.{dependsOn}', {
point,
completed,
dependsOn
}
);
}
}
},
plotOptions: {
series: {
cursor: 'pointer',
allowPointSelect: $parameters.IsAllowPointSelect,
dragDrop: {
draggableX: $parameters.IsDraggableX,
dragPrecisionX: day / 3 // Snap to eight hours
},
point: {
events: {
// Function for click on bar, will return the ID of element
click: function() {
$actions.OnClickElement(this.aux_id, this.aux_type);
},
drop: function(e) {
$actions.OnDragDropElement(this.aux_id, this.aux_type, this.start, this.end);
}
}
}
},
gantt: {
dataLabels: {
formatter: function() {
const point = this.point,
name = point.name;
if (name !== '') {
return name;
} else {
return point.options.completed.amount * 100 + '%';
}
}
}
},
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.'
}
}
},
//Remove logo/credits Highcharts
credits: {
enabled: false
}
},
//Json with elements of Gantt
series: [{
name: $parameters.ProjectName,
data: JSON.parse($parameters.JSONData),
dataLabels: {
enabled: false,
format:
'<img src="https://www.highcharts.com/samples/graphics/sun.png">',
useHTML: true,
outside: true,
y: -10,
},
},
],
});