<html>
<head>
<link href="https://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.css" rel="stylesheet"/>
<script src="https://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.js"></script>
<script src="https://cdn.dhtmlx.com/gantt/edge/ext/dhtmlxgantt_tooltip.js"></script>
<script src="https://cdn.dhtmlx.com/gantt/edge/ext/dhtmlxgantt_keyboard_navigation.js"></script>
<script src="https://cdn.dhtmlx.com/gantt/edge/ext/dhtmlxgantt_multiselect.js"></script>
</head>
<body>
<div id="gantt_here" style="width:100%; height:100%"></div>
<script type="text/javascript">
gantt.config.date_format = "%Y-%m-%d %H:%i:%s";
gantt.config.scales = [
{unit: "day", step: 1, format: "%Y-%m-%d"},
{unit: "hour", step: 1, format: "%H"},
];
gantt.config.readonly = true;
gantt.config.auto_types = true;
gantt.config.auto_scheduling = true;
gantt.config.auto_scheduling_compatibility = true;
gantt.config.columns = [
{name:"text", label:"Task name", width:"400", tree:true }
];
gantt.config.layout = {
css: "gantt_container",
cols:[
{
width:400,
min_width: 300,
rows:[
{view: "grid", scrollX: "gridScroll", scrollable: true, scrollY: "scrollVer"},
{view: "scrollbar", id: "gridScroll", group:"horizontal"}
]
},
{resizer: true, width: 1},
{
rows:[
{view: "timeline", scrollX: "scrollHor", scrollY: "scrollVer"},
{view: "scrollbar", id: "scrollHor", group:"horizontal"}
]
},
{view: "scrollbar", id: "scrollVer"}
]
};
gantt.config.show_errors = false;
gantt.init("gantt_here");
jobs = {
"data": [
{{ range $index, $job := .Jobs }}
{"id": {{ $job.Id }}, "text": "{{ $job.Provider }} - {{ $job.Type }} - {{ $job.Name }}", "start_date": "{{ index $job.Start 0 }}", "open": false, "render":"split"},
{{ range $startIndex, $start := $job.Start }}
{{ $end := index $job.End $startIndex }}
{"text": "{{ $job.Type }}: {{ $job.Name }}", "start_date": "{{ $start }}", "end_date": "{{ $end }}", "parent": {{ $job.Id }}, "open": true},
{{ end }}
{{ end }}
],
"links": []
};
gantt.parse(jobs);
</script>
</body>
</html>