Highcharts Gantt Chart
HTML
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<div id="container" style="height: 500px"></div>
JavaScript
Date.prototype.addMinutes = function(minutes) {
var copiedDate = new Date(this.getTime());
return new Date(copiedDate.getTime() + minutes * 60000);
};
$(function () {
// Define tasks
var tasks = [{
name: '',
intervals: [{ // From-To pairs
from: new Date('2018-12-13 13:12:27.000').addMinutes(60),
to: new Date('2018-12-13 13:16:01.000' ).addMinutes(60),
label: 'Praca'
}, {
from: new Date('2018-12-13 13:04:41.000').addMinutes(60),
to: new Date('2018-12-13 13:08:28.000').addMinutes(60),
label: 'Praca'
}]
}];
var series = [];
$.each(tasks.reverse(), function(i, task) {
var item = {
name: task.name,
data: []
};
$.each(task.intervals, function(j, interval) {
item.data.push({
x: interval.from,
y: i,
label: interval.label,
from: interval.from,
to: interval.to
}, {
x: interval.to,
y: i,
from: interval.from,
to: interval.to
});
// add a null value between intervals
if (task.intervals[j + 1]) {
item.data.push(
[(interval.to + task.intervals[j + 1].from) / 2, null]
);
}
});
series.push(item);
});
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
title: {
text: 'Czas Pracy'
},
xAxis: {
type: 'datetime'
},
yAxis: {
categories: ['Praca',
'Category 1'],
tickInterval: 1,
tickPixelInterval: 200,
...