- Chart Gallery
- Gantt General Features
- Optimistic and Pessimistic Views on a Single Gantt
Optimistic and Pessimistic Views on a Single Gantt
{
"gantt": {
"zIndex": 0,
"enabled": true,
"type": "gantt-project",
"title": {
"zIndex": 80,
"enabled": false,
"maxLength": null,
"fontSize": 16,
"fontFamily": "Verdana, Helvetica, Arial, sans-serif",
"fontColor": "#7c868e",
"fontOpacity": 1,
"fontDecoration": "none",
"fontStyle": "normal",
"fontVariant": "normal",
"fontWeight": "normal",
"letterSpacing": "normal",
"textDirection": "ltr",
"textShadow": "none",
"lineHeight": "normal",
"textIndent": 0,
"vAlign": "top",
"hAlign": "center",
"wordWrap": "normal",
"wordBreak": "normal",
"textOverflow": "",
"selectable": false,
"disablePointerEvents": false,
"useHtml": false,
"width": null,
"height": null,
"align": "center",
"text": "Chart Title",
"margin": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
},
"padding": {
"left": 0,
"top": 0,
"bottom": 10,
"right": 0
},
"background": {
"zIndex": 0,
"enabled": false
}
},
"background": {
"zIndex": 0.5,
"enabled": true
},
"tooltip": {
"enabled": true,
"title": {
"zIndex": 1,
"enabled": true,
"maxLength": null,
"fontSize": 14,
"fontFamily": "Verdana, Helvetica, Arial, sans-serif",
"fontColor": "#ffffff",
"fontOpacity": 1,
"fontDecoration": "none",
"fontStyle": "normal",
"fontVariant": "normal",
"fontWeight": "normal",
"letterSpacing": "normal",
"textDirection": "ltr",
"textShadow": "none",
"lineHeight": "normal",
"textIndent": 0,
"vAlign": "top",
"hAlign": "left",
"wordWrap": "normal",
"wordBreak": "normal",
"textOverflow": "",
"selectable": false,
"disablePointerEvents": false,
"useHtml": false,
"width": null,
"height": null,
"align": "left",
"orientation": "top",
"rotation": 0,
"text": "",
"margin": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
},
"padding": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
},
"background": {
"enabled": false
}
},
"separator": {
"zIndex": 1,
"enabled": true,
"fill": {
"color": "#CECECE",
"opacity": 0.3
},
"stroke": "none",
"width": "100%",
"height": 1,
"orientation": "top",
"margin": {
"left": 0,
"top": 5,
"bottom": 5,
"right": 0
}
},
"background": {
"zIndex": 0,
"enabled": true
}
},
"margin": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
},
"padding": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
},
"a11y": {
"enabled": true,
"mode": "chart-elements"
},
"autoRedraw": true,
"bounds": {},
"contextMenu": {
"enabled": true
},
"credits": {
"text": "AnyChart",
"url": "https://www.anychart.com/?utm_source=registered",
"alt": "AnyChart - JavaScript Charts designed to be embedded and integrated{{anychart-version}}",
"imgAlt": "AnyChart - JavaScript Charts",
"logoSrc": "https://static.anychart.com/logo.png",
"enabled": false
},
"selectRectangleMarqueeFill": {
"color": "#d3d3d3",
"opacity": 0.4
},
"selectRectangleMarqueeStroke": "#d3d3d3",
"interactivity": {
"spotRadius": 2,
"multiSelectOnClick": false,
"unselectOnClickOutOfPoint": true,
"hoverMode": "single",
"selectionMode": "multi-select"
},
"defaultRowHeight": 60,
"controller": {
"isResourceChart": false,
"treeData": {
"rootMapping": {},
"children": [
{
"treeDataItemData": {
"id": 1,
"name": "Hardware"
},
"treeDataItemMeta": {},
"children": [
{
"treeDataItemData": {
"id": 4,
"optimisticStart": 1535760000000,
"optimisticEnd": 1537488000000,
"pessimisticStart": 1535760000000,
"pessimisticEnd": 1538179200000,
"mostLikelyStart": 1535760000000,
"mostLikelyEnd": 1537833600000,
"progressValue": 1,
"connectTo": 5,
"name": "Formalize Specs"
},
"treeDataItemMeta": {}
},
{
"treeDataItemData": {
"id": 5,
"optimisticStart": 1537488000000,
"optimisticEnd": 1539561600000,
"pessimisticStart": 1538179200000,
"pessimisticEnd": 1540771200000,
"mostLikelyStart": 1537833600000,
"mostLikelyEnd": 1540166400000,
"progressValue": 1,
"connectTo": 8,
"name": "Design Hardware"
},
"treeDataItemMeta": {}
},
{
"treeDataItemData": {
"id": 8,
"optimisticStart": 1539561600000,
"optimisticEnd": 1542153600000,
"pessimisticStart": 1540771200000,
"pessimisticEnd": 1543708800000,
"mostLikelyStart": 1540166400000,
"mostLikelyEnd": 1543017600000,
"progressValue": 1,
"connectTo": 10,
"name": "Breadboard Hardware"
},
"treeDataItemMeta": {}
},
{
"treeDataItemData": {
"id": 10,
"optimisticStart": 1542153600000,
"optimisticEnd": 1544572800000,
"pessimisticStart": 1543708800000,
"pessimisticEnd": 1546646400000,
"mostLikelyStart": 1543017600000,
"mostLikelyEnd": 1545782400000,
"progressValue": 1,
"connectTo": 11,
"name": "Test hardware"
},
"treeDataItemMeta": {}
},
{
"treeDataItemData": {
"id": 11,
"optimisticStart": 1544572800000,
"optimisticEnd": 1546473600000,
"pessimisticStart": 1546646400000,
"pessimisticEnd": 1549065600000,
"mostLikelyStart": 1545782400000,
"mostLikelyEnd": 1547856000000,
"progressValue": 0.6,
"connectTo": 14,
"name": "Release Hardware"
},
"treeDataItemMeta": {}
},
{
"treeDataItemData": {
"id": 14,
"optimisticStart": 1546473600000,
"optimisticEnd": 1549152000000,
"pessimisticStart": 1549065600000,
"pessimisticEnd": 1551830400000,
"mostLikelyStart": 1547856000000,
"mostLikelyEnd": 1550707200000,
"name": "Manufacture Hardware"
},
"treeDataItemMeta": {}
}
]
},
{
"treeDataItemData": {
"id": 2,
"name": "Software"
},
"treeDataItemMeta": {},
"children": [
{
"treeDataItemData": {
"id": 7,
"optimisticStart": 1537488000000,
"optimisticEnd": 1540857600000,
"pessimisticStart": 1538179200000,
"pessimisticEnd": 1542672000000,
"mostLikelyStart": 1537833600000,
"mostLikelyEnd": 1541980800000,
"progressValue": 1,
"connectTo": 12,
"name": "Design Software"
},
"treeDataItemMeta": {}
},
{
"treeDataItemData": {
"id": 12,
"optimisticStart": 1540857600000,
"optimisticEnd": 1543881600000,
"pessimisticStart": 1542672000000,
"pessimisticEnd": 1546300800000,
"mostLikelyStart": 1542067200000,
"mostLikelyEnd": 1545264000000,
"progressValue": 0.8,
"connectTo": 15,
"name": "Complete Software"
},
"treeDataItemMeta": {}
},
{
"treeDataItemData": {
"id": 15,
"optimisticStart": 1543881600000,
"optimisticEnd": 1545782400000,
"pessimisticStart": 1546300800000,
"pessimisticEnd": 1548374400000,
"mostLikelyStart": 1545264000000,
"mostLikelyEnd": 1547251200000,
"name": "Release Software"
},
"treeDataItemMeta": {}
}
]
},
{
"treeDataItemData": {
"id": 3,
"name": "Manual"
},
"treeDataItemMeta": {},
"children": [
{
"treeDataItemData": {
"id": 6,
"optimisticStart": 1537488000000,
"optimisticEnd": 1539561600000,
"pessimisticStart": 1538179200000,
"pessimisticEnd": 1540425600000,
"mostLikelyStart": 1537833600000,
"mostLikelyEnd": 1539993600000,
"progressValue": 1,
"connectTo": 9,
"name": "Layout Manual"
},
"treeDataItemMeta": {}
},
{
"treeDataItemData": {
"id": 9,
"optimisticStart": 1539561600000,
"optimisticEnd": 1541980800000,
"pessimisticStart": 1540425600000,
"pessimisticEnd": 1543017600000,
"mostLikelyStart": 1539993600000,
"mostLikelyEnd": 1542499200000,
"progressValue": 1,
"connectTo": 13,
"name": "Finish Manual"
},
"treeDataItemMeta": {}
},
{
"treeDataItemData": {
"id": 13,
"optimisticStart": 1541980800000,
"optimisticEnd": 1543536000000,
"pessimisticStart": 1542931200000,
"pessimisticEnd": 1544659200000,
"mostLikelyStart": 1542499200000,
"mostLikelyEnd": 1544140800000,
"progressValue": 0.5,
"connectTo": 16,
"name": "Release Manual"
},
"treeDataItemMeta": {}
},
{
"treeDataItemData": {
"id": 16,
"optimisticStart": 1543536000000,
"optimisticEnd": 1544832000000,
"pessimisticStart": 1544659200000,
"pessimisticEnd": 1546128000000,
"mostLikelyStart": 1544140800000,
"mostLikelyEnd": 1545523200000,
"name": "Print Manuals"
},
"treeDataItemMeta": {}
}
]
}
],
"index": [
"id"
],
"mapping": {
"actualStart": "mostLikelyStart",
"actualEnd": "mostLikelyEnd"
}
},
"verticalOffset": 0,
"startIndex": 0,
"scrollTo": 0
},
"dataGrid": {
"zIndex": 5,
"enabled": true,
"isStandalone": false,
"headerHeight": 70,
"edit": {},
"horizontalOffset": 0,
"buttons": {
"enabled": true,
"cursor": "pointer",
"width": 15,
"height": 15,
"normal": {
"content": "▸",
"minFontSize": 8,
"maxFontSize": 72,
"adjustFontSize": {
"width": false,
"height": false
},
"fontSize": 12,
"fontColor": "#7c868e",
"vAlign": "middle",
"hAlign": "center",
"selectable": false,
"disablePointerEvents": true,
"background": {
"enabled": true,
"fill": {
"color": "#fff",
"opacity": 0.00001
},
"stroke": "none"
}
},
"hovered": {
"background": {}
},
"selected": {
"content": "▾",
"background": {}
},
"padding": {}
},
"columns": [
{
"enabled": true,
"labels": {},
"title": {
"enabled": true,
"maxLength": null,
"fontSize": 16,
"fontFamily": "Verdana, Helvetica, Arial, sans-serif",
"fontColor": "#7c868e",
"fontOpacity": 1,
"fontDecoration": "none",
"fontStyle": "normal",
"fontVariant": "normal",
"fontWeight": "normal",
"letterSpacing": "normal",
"textDirection": "ltr",
"textShadow": "none",
"lineHeight": "normal",
"textIndent": 0,
"vAlign": "middle",
"hAlign": "center",
"wordWrap": "normal",
"wordBreak": "normal",
"textOverflow": "",
"selectable": false,
"disablePointerEvents": false,
"useHtml": false,
"width": null,
"height": 70,
"align": "center",
"text": "#",
"margin": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
},
"padding": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
},
"background": {
"enabled": false
}
}
},
{
"enabled": true,
"labels": {},
"title": {
"enabled": true,
"maxLength": null,
"fontSize": 16,
"fontFamily": "Verdana, Helvetica, Arial, sans-serif",
"fontColor": "#7c868e",
"fontOpacity": 1,
"fontDecoration": "none",
"fontStyle": "normal",
"fontVariant": "normal",
"fontWeight": "normal",
"letterSpacing": "normal",
"textDirection": "ltr",
"textShadow": "none",
"lineHeight": "normal",
"textIndent": 0,
"vAlign": "middle",
"hAlign": "center",
"wordWrap": "normal",
"wordBreak": "normal",
"textOverflow": "",
"selectable": false,
"disablePointerEvents": false,
"useHtml": false,
"width": null,
"height": 70,
"align": "center",
"text": "Name",
"margin": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
},
"padding": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
},
"background": {
"enabled": false
}
}
}
],
"horizontalScrollBar": {
"enabled": true,
"backgroundStroke": {
"color": "#d5d5d5",
"opacity": 0.25
},
"backgroundFill": {
"color": "#e0e0e0",
"opacity": 0.25
},
"sliderFill": {
"color": "#d5d5d5",
"opacity": 0.25
},
"sliderStroke": {
"color": "#656565",
"opacity": 0.25
},
"mouseOverOpacity": 0.45,
"mouseOutOpacity": 0.25,
"buttonsVisible": false,
"barSize": 10,
"cornersRadius": 5
},
"tooltip": {
"enabled": true,
"useHtml": true,
"title": {
"zIndex": 1,
"enabled": true,
"maxLength": null,
"fontSize": "14px",
"fontFamily": "Verdana, Helvetica, Arial, sans-serif",
"fontColor": "#e5e5e5",
"fontOpacity": 1,
"fontDecoration": "none",
"fontStyle": "normal",
"fontVariant": "normal",
"fontWeight": "normal",
"letterSpacing": "normal",
"textDirection": "ltr",
"textShadow": "none",
"lineHeight": "normal",
"textIndent": 0,
"vAlign": "top",
"hAlign": "left",
"wordWrap": "normal",
"wordBreak": "normal",
"textOverflow": "",
"selectable": false,
"disablePointerEvents": false,
"useHtml": false,
"width": null,
"height": null,
"align": "left",
"orientation": "top",
"rotation": 0,
"text": "",
"margin": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
},
"padding": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
},
"background": {
"enabled": false
}
},
"separator": {
"zIndex": 1,
"enabled": true,
"fill": {
"color": "#CECECE",
"opacity": 0.3
},
"stroke": "none",
"width": "100%",
"height": 1,
"orientation": "top",
"margin": {
"left": 0,
"top": 5,
"bottom": 5,
"right": 0
}
},
"background": {
"zIndex": 0,
"enabled": true
}
}
},
"timeline": {
"zIndex": 5,
"enabled": true,
"isStandalone": false,
"headerHeight": 70,
"edit": {},
"scale": {
"visibleMinimum": 1534564224000,
"visibleMaximum": 1552949280000,
"dataMinimum": 1535760000000,
"dataMaximum": 1550707200000,
"minimumGap": {
"value": 0.08,
"isPixels": false
},
"maximumGap": {
"value": 0.15,
"isPixels": false
},
"maxTicksCount": 200,
"zoomLevels": [
[
{
"unit": "minute",
"count": 10
},
{
"unit": "hour",
"count": 1
},
{
"unit": "day",
"count": 1
}
],
[
{
"unit": "hour",
"count": 2
},
{
"unit": "day",
"count": 1
},
{
"unit": "month",
"count": 1
}
],
[
{
"unit": "day",
"count": 1
},
{
"unit": "week",
"count": 1
},
{
"unit": "month",
"count": 1
}
],
[
{
"unit": "month",
"count": 1
},
{
"unit": "quarter",
"count": 1
},
{
"unit": "year",
"count": 1
}
],
[
{
"unit": "quarter",
"count": 1
},
{
"unit": "year",
"count": 1
},
{
"unit": "year",
"count": 10
}
]
]
},
"labels": {
"zIndex": 40,
"enabled": true
},
"markers": {
"zIndex": 50,
"enabled": null,
"anchor": "center",
"offsetX": 0,
"offsetY": 0,
"type": "star5",
"rotation": 0,
"size": 6
},
"header": {
"zIndex": 80,
"enabled": true,
"stroke": "#cecece",
"levels": [
{
"enabled": true,
"height": null
},
{
"enabled": true,
"height": null
},
{
"enabled": true,
"height": null
}
],
"labels": {},
"background": {
"enabled": true
}
},
"elements": {
"labels": {
"enabled": null
},
"rendering": {},
"normal": {},
"selected": {},
"edit": {
"thumbs": {},
"connectorThumbs": {},
"start": {
"thumb": {},
"connectorThumb": {}
},
"end": {
"thumb": {},
"connectorThumb": {}
}
},
"tooltip": {
"enabled": true,
"useHtml": true,
"title": {
"zIndex": 1,
"enabled": true,
"maxLength": null,
"fontSize": "14px",
"fontFamily": "Verdana, Helvetica, Arial, sans-serif",
"fontColor": "#e5e5e5",
"fontOpacity": 1,
"fontDecoration": "none",
"fontStyle": "normal",
"fontVariant": "normal",
"fontWeight": "normal",
"letterSpacing": "normal",
"textDirection": "ltr",
"textShadow": "none",
"lineHeight": "normal",
"textIndent": 0,
"vAlign": "top",
"hAlign": "left",
"wordWrap": "normal",
"wordBreak": "normal",
"textOverflow": "",
"selectable": false,
"disablePointerEvents": false,
"useHtml": false,
"width": null,
"height": null,
"align": "left",
"orientation": "top",
"rotation": 0,
"text": "",
"margin": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
},
"padding": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
},
"background": {
"enabled": false
}
},
"separator": {
"zIndex": 1,
"enabled": true,
"fill": {
"color": "#CECECE",
"opacity": 0.3
},
"stroke": "none",
"width": "100%",
"height": 1,
"orientation": "top",
"margin": {
"left": 0,
"top": 5,
"bottom": 5,
"right": 0
}
},
"background": {
"zIndex": 0,
"enabled": true
}
}
},
"connectors": {
"normal": {},
"selected": {}
},
"milestones": {
"labels": {
"enabled": null
},
"rendering": {},
"normal": {},
"selected": {},
"edit": {
"thumbs": {},
"connectorThumbs": {},
"start": {
"thumb": {},
"connectorThumb": {}
},
"end": {
"thumb": {},
"connectorThumb": {}
}
},
"preview": {
"labels": {
"enabled": false
},
"rendering": {},
"normal": {},
"selected": {},
"edit": {
"thumbs": {},
"connectorThumbs": {},
"start": {
"thumb": {},
"connectorThumb": {}
},
"end": {
"thumb": {},
"connectorThumb": {}
}
}
}
},
"tasks": {
"labels": {
"enabled": null
},
"rendering": {
"shapes": [
{
"name": "pessimisticTask",
"shapeType": "path",
"disablePointerEvents": false
},
{
"name": "mostLikelyTask",
"shapeType": "path",
"disablePointerEvents": false
},
{
"name": "optimisticTask",
"shapeType": "path",
"disablePointerEvents": false
}
]
},
"normal": {},
"selected": {
"fill": "#45738B"
},
"edit": {
"thumbs": {},
"connectorThumbs": {},
"start": {
"thumb": {},
"connectorThumb": {}
},
"end": {
"thumb": {},
"connectorThumb": {}
}
},
"progress": {
"height": "15%",
"labels": {
"enabled": false
},
"rendering": {},
"normal": {},
"selected": {
"fill": "#47B7F2",
"stroke": {
"color": "#666",
"opacity": 0.6
}
},
"edit": {
"thumbs": {},
"connectorThumbs": {},
"start": {
"thumb": {},
"connectorThumb": {}
},
"end": {
"thumb": {},
"connectorThumb": {}
}
}
}
},
"groupingTasks": {
"labels": {
"enabled": null,
"padding": {
"left": 0,
"top": 0,
"bottom": 5,
"right": 0
},
"position": "center",
"anchor": "center"
},
"rendering": {
"shapes": [
{
"name": "mostLikelyTask",
"shapeType": "path",
"disablePointerEvents": false
}
]
},
"normal": {},
"selected": {},
"edit": {
"thumbs": {},
"connectorThumbs": {},
"start": {
"thumb": {},
"connectorThumb": {}
},
"end": {
"thumb": {},
"connectorThumb": {}
}
},
"progress": {
"height": "50%",
"offset": "50%",
"labels": {
"enabled": false
},
"rendering": {},
"normal": {
"fill": {
"color": "#0078CD",
"opacity": 0.7
}
},
"selected": {
"fill": {
"color": "#47B7F1",
"opacity": 0.7
}
},
"edit": {
"thumbs": {},
"connectorThumbs": {},
"start": {
"thumb": {},
"connectorThumb": {}
},
"end": {
"thumb": {},
"connectorThumb": {}
}
}
}
},
"baselines": {
"labels": {
"enabled": false
},
"rendering": {},
"normal": {},
"selected": {},
"edit": {
"thumbs": {},
"connectorThumbs": {},
"start": {
"thumb": {},
"connectorThumb": {}
},
"end": {
"thumb": {},
"connectorThumb": {}
}
},
"progress": {
"labels": {
"enabled": null
},
"rendering": {},
"normal": {},
"selected": {},
"edit": {
"thumbs": {},
"connectorThumbs": {},
"start": {
"thumb": {},
"connectorThumb": {}
},
"end": {
"thumb": {},
"connectorThumb": {}
}
}
}
},
"baselineMilestones": {
"labels": {
"enabled": null
},
"rendering": {},
"normal": {},
"selected": {},
"edit": {
"thumbs": {},
"connectorThumbs": {},
"start": {
"thumb": {},
"connectorThumb": {}
},
"end": {
"thumb": {},
"connectorThumb": {}
}
},
"preview": {
"labels": {
"enabled": false
},
"rendering": {},
"normal": {},
"selected": {},
"edit": {
"thumbs": {},
"connectorThumbs": {},
"start": {
"thumb": {},
"connectorThumb": {}
},
"end": {
"thumb": {},
"connectorThumb": {}
}
}
}
},
"horizontalScrollBar": {
"enabled": true,
"backgroundStroke": {
"color": "#d5d5d5",
"opacity": 0.25
},
"backgroundFill": {
"color": "#e0e0e0",
"opacity": 0.25
},
"sliderFill": {
"color": "#d5d5d5",
"opacity": 0.25
},
"sliderStroke": {
"color": "#656565",
"opacity": 0.25
},
"mouseOverOpacity": 0.45,
"mouseOutOpacity": 0.25,
"buttonsVisible": false,
"barSize": 10,
"cornersRadius": 5
},
"verticalScrollBar": {
"zIndex": 20,
"enabled": true,
"backgroundStroke": {
"color": "#d5d5d5",
"opacity": 0.25
},
"backgroundFill": {
"color": "#e0e0e0",
"opacity": 0.25
},
"sliderFill": {
"color": "#d5d5d5",
"opacity": 0.25
},
"sliderStroke": {
"color": "#656565",
"opacity": 0.25
},
"mouseOverOpacity": 0.45,
"mouseOutOpacity": 0.25,
"buttonsVisible": false,
"barSize": 10,
"cornersRadius": 5
}
},
"edit": {},
"palette": {
"type": "distinct",
"items": [
"#64b5f6",
"#1976d2",
"#ef6c00",
"#ffd54f",
"#455a64",
"#96a6a6",
"#dd2c00",
"#00838f",
"#00bfa5",
"#ffa000"
]
}
}
}
<html>
<head>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-base.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-ui.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-exports.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-gantt.min.js"></script>
<script src="https://cdn.anychart.com/samples-data/gantt-general-features/custom-drawing/gantt-custom-drawing.js"></script>
<link href="https://cdn.anychart.com/releases/v8/css/anychart-ui.min.css" type="text/css" rel="stylesheet">
<link href="https://cdn.anychart.com/releases/v8/fonts/css/anychart-font.min.css" type="text/css" rel="stylesheet">
<style type="text/css">
html,
body,
#container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.anychart-tooltip {
background: #fff;
padding: 15px;
color: #333;
box-shadow: 1px 1px 3px #333;
}
.anychart-tooltip h4 {
margin-bottom: 0;
}
.anychart-tooltip ul {
margin: 0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
var scale;
var timeline;
anychart.onDocumentReady(function () {
// The data used in this sample can be obtained from the CDN
// https://cdn.anychart.com/samples-data/gantt-general-features/custom-drawing/gantt-custom-drawing.js
var treeData = anychart.data.tree(getData(), 'as-table');
// map loaded data for the gantt project chart
var mapping = treeData.mapAs({
actualStart: 'mostLikelyStart',
actualEnd: 'mostLikelyEnd'
});
// create gantt project chart
var chart = anychart.ganttProject();
// set data for the chart
chart.data(mapping);
// set chart row's height
chart.defaultRowHeight(60);
// get data grid
var dataGrid = chart.dataGrid();
// set data grid tooltip's formatter
dataGrid.tooltip().useHtml(true);
dataGrid.tooltip().format(tooltipFormatter);
// get timeline
timeline = chart.getTimeline();
// set timeline tooltip's formatter
timeline.tooltip().useHtml(true);
timeline.tooltip().format(tooltipFormatter);
// set default task bar and progress fill settings
timeline.tasks().selected().fill('#45738B');
timeline.tasks().progress().selected().fill('#47B7F2');
timeline
.groupingTasks()
.labels()
.padding(0, 0, 5, 0)
.position('center')
.anchor('center');
timeline
.groupingTasks()
.labels()
.format(function () {
return (
'Duration: ' +
Math.round(
(this.autoEnd - this.autoStart) / (24 * 60 * 60 * 1000)
) +
' days'
);
});
// set shapes for timeline tasks rendering
timeline
.tasks()
.rendering()
.shapes([
{
name: 'pessimisticTask',
shapeType: 'path',
disablePointerEvents: false
},
{
name: 'mostLikelyTask',
shapeType: 'path',
disablePointerEvents: false
},
{
name: 'optimisticTask',
shapeType: 'path',
disablePointerEvents: false
}
]);
timeline
.groupingTasks()
.rendering()
.shapes([
{
name: 'mostLikelyTask',
shapeType: 'path',
disablePointerEvents: false
}
]);
// get timeline's scale
scale = timeline.scale();
// setup custom drawer for timeline tasks
timeline.tasks().rendering().drawer(taskDrawer);
// setup custom drawer for timeline grouping tasks
timeline.groupingTasks().rendering().drawer(groupingTasksDrawer);
// set task progress' settings
timeline.tasks().progress().height('15%').selected().stroke('#666 .6');
// set grouping task progress' settings
timeline
.groupingTasks()
.progress()
.height('50%')
.fill('#0078CD .7')
.offset('50%')
.selected()
.fill('#47B7F1 .7');
// set container id for the chart
chart.container('container');
// initiate chart drawing
chart.draw();
// Set scale maximum and minimum.
scale.minimumGap(0.08);
scale.maximumGap(0.15);
// zoom chart all dates range
chart.fitAll();
});
// custom drawer for the tasks
function taskDrawer() {
var path;
var shift;
var left;
var top;
var width;
var height;
var itemBounds;
var startRatio;
var endRatio;
// get timeline width and left border coordinates
var tlBounds = timeline.getPixelBounds();
var tlWidth = tlBounds.width;
var tlLeft = tlBounds.left;
// get recommended bounds for drawing
var bounds = this.predictedBounds;
// get bar height
var barHeight = Math.round(bounds.height / 3);
/* OPTIMISTIC BAR */
// get path from shapes
path = this.shapes.optimisticTask;
// set path's fill and stroke settings
path.fill('#90D6C1 .6');
path.stroke('#80A291 .8');
// get shift value
shift = halfShift(path.strokeThickness());
// calculate start and end ratio for the optimistic bar using it's data
startRatio = scale.transform(this.item.get('optimisticStart'));
endRatio = scale.transform(this.item.get('optimisticEnd'));
// calculate X coordinate for the optimistic bar
left = Math.round(tlWidth * startRatio + tlLeft) + shift;
// calculate Y coordinate for the optimistic bar
top = Math.round(bounds.top) - 4 + shift;
// calculate optimistic bar's width
width = Math.round(tlWidth * (endRatio - startRatio));
// set optimistic bar's height
height = barHeight;
// set optimistic bar's bounds
itemBounds = anychart.math.rect(left, top, width, height);
// draw rounded rectangle on the path
anychart.graphics.vector.primitives.roundedRect(path, itemBounds, 3);
/* MOST LIKELY BAR */
// get path prom shapes
path = this.shapes.mostLikelyTask;
// set stroke color and opacity
path.stroke('#666 .6');
// get shift value
shift = halfShift(path.strokeThickness());
// calculate start and end ratio for the most-likely bar using it's data
startRatio = scale.transform(this.item.get('mostLikelyStart'));
endRatio = scale.transform(this.item.get('mostLikelyEnd'));
// calculate X coordinate for the most-likely bar
left = Math.round(tlWidth * startRatio + tlLeft) + shift;
// calculate Y coordinate for the most-likely bar
top =
Math.round(bounds.top + (bounds.height - barHeight) / 2) - 1 + shift;
// calculate most-likely bar's width
width = Math.round(tlWidth * (endRatio - startRatio));
// set most-likely bar's height
height = barHeight;
// set most-likely bar's bounds
itemBounds = anychart.math.rect(left, top, width, height);
// draw rounded rectangle on the path
anychart.graphics.vector.primitives.roundedRect(path, itemBounds, 3);
/* PESSIMISTIC BAR */
// get path from shapes
path = this.shapes.pessimisticTask;
// set path's fill and stroke settings
path.fill('#FF4B12 .4');
path.stroke('#6F5264 .6');
// get shift value
shift = halfShift(path.strokeThickness());
// calculate start and end ratio for the pessimistic bar using it's data
startRatio = scale.transform(this.item.get('pessimisticStart'));
endRatio = scale.transform(this.item.get('pessimisticEnd'));
// calculate X coordinate for the pessimistic bar
left = Math.round(tlWidth * startRatio + tlLeft) + shift;
// calculate Y coordinate for the pessimistic bar
top = Math.round(bounds.top + bounds.height - barHeight + 2) + shift;
// calculate pessimistic bar's width
width = Math.round(tlWidth * (endRatio - startRatio)) + shift;
// set pessimistic bar's height
height = barHeight;
// set pessimistic bar's bounds
itemBounds = anychart.math.rect(left, top, width, height);
// draw rounded rectangle on the path
anychart.graphics.vector.primitives.roundedRect(path, itemBounds, 3);
}
// custom drawer for the grouping tasks
function groupingTasksDrawer() {
// get path prom shapes
var path = this.shapes.mostLikelyTask;
// set path stroke settings
path.stroke({
dash: '3 7 2',
thickness: 5,
color: '#385960'
});
// get shift value
var shift = halfShift(path.strokeThickness());
// get recommended bounds for drawing
var bounds = this.predictedBounds;
// get parameters for the element drawer
var left = Math.round(bounds.left) + shift;
var height = Math.round(bounds.height);
var center = Math.round(height / 2);
var top = Math.round(bounds.top + center - 2) + shift;
var width = Math.round(bounds.width);
var right = left + width;
// draw grouping task
path
.moveTo(left, top + center)
.lineTo(right, top + center)
.close();
}
// formatter function for the tooltips
function tooltipFormatter() {
if (!this.item.numChildren()) {
// formatter for the timeline task
return (
'<h4 style="color: #80A291">Optimistic (' +
Math.round(
(this.item.get('optimisticEnd') -
this.item.get('optimisticStart')) /
(24 * 60 * 60 * 1000)
) +
' days):</h4><ul><li>Start - ' +
anychart.format.dateTime(
this.item.get('optimisticStart'),
'dd.MM.yyyy'
) +
'</li><li>End - ' +
anychart.format.dateTime(
this.item.get('optimisticEnd'),
'dd.MM.yyyy'
) +
'</li></ul><hr>' +
'<h4 style="color: #00A6DA">Most Likely (' +
Math.round(
(this.item.get('mostLikelyEnd') -
this.item.get('mostLikelyStart')) /
(24 * 60 * 60 * 1000)
) +
' days):</h4><ul><li>Start - ' +
anychart.format.dateTime(
this.item.get('mostLikelyStart'),
'dd.MM.yyyy'
) +
'</li><li>End - ' +
anychart.format.dateTime(
this.item.get('mostLikelyEnd'),
'dd.MM.yyyy'
) +
'</li></ul><hr>' +
'<h4 style="color: #E24B26">Pessimistic (' +
Math.round(
(this.item.get('pessimisticEnd') -
this.item.get('pessimisticStart')) /
(24 * 60 * 60 * 1000)
) +
' days):</h4><ul><li>Start - ' +
anychart.format.dateTime(
this.item.get('pessimisticStart'),
'dd.MM.yyyy'
) +
'</li><li>End - ' +
anychart.format.dateTime(
this.item.get('pessimisticEnd'),
'dd.MM.yyyy'
) +
'</li></ul>'
);
} // formatter for the grouping task
return (
'Duration: ' +
Math.round((this.autoEnd - this.autoStart) / (24 * 60 * 60 * 1000)) +
' days'
);
}
function halfShift(strokeThickness) {
return strokeThickness % 2 ? 0.5 : 0;
}
</script>
</body>
</html>