Here is an example of a GANTT chart created with Highcharts: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/studies/xrange-series/
I am currently working on implementing a similar example that includes milestones.
This is how my code looks right now:
$(function () {
/**
* Highcharts X-range series plugin
*/ (function (H) {
var defaultPlotOptions = H.getOptions().plotOptions,
columnType = H.seriesTypes.column,
each = H.each;
defaultPlotOptions.xrange = H.merge(defaultPlotOptions.column, {});
H.seriesTypes.xrange = H.extendClass(columnType, {
type: 'xrange',
parallelArrays: ['x', 'x2', 'y'],
animate: H.seriesTypes.line.prototype.animate,
// More code here...
});
/**
* Max x2 should be considered in xAxis extremes
*/
H.wrap(H.Axis.prototype, 'getSeriesExtremes', function (proceed) {
var axis = this,
dataMax = Number.MIN_VALUE;
proceed.call(this);
if (this.isXAxis) {
each(this.series, function (series) {
// Logic for adjusting axis extremes based on x2 values
});
if (dataMax > Number.MIN_VALUE) {
axis.dataMax = dataMax;
}
}
});
}(Highcharts));
// THE CHART
$('#container').highcharts({
chart: {
type: 'xrange'
},
title: {
text: 'Highcharts X-range study'
},
// Chart configuration options...
});
});
In the edit, I have provided a mock-up example of the desired look:
https://i.sstatic.net/W80lj.jpg
I intend to pull lines from a Sharepoint list to display bank holidays and freeze periods on the GANTT chart.