I am trying to build a GANTT chart as in this JSFiddle example [ http://jsfiddle.net/2xkfm87e/11/ ] (I have now updated this fiddle to the working version using jlbriggs' input below. It also includes some other options I needed -i.e. tooltip on each interval.)
However, I need to display all the categories even if one or more do not have any associated data. The end user needs to be aware that there is no data associated with that category. In my JSFiddle example, the best I could come up with is just use the initial dates and create a point that informs the user that there is no data for that category. I would rather it be null.
Any help with this would be greatly appreciated!
$(function () {
// Define tasks
var tasks = [{
name: 'Category 1',
intervals: [{ // From-To pairs
from: Date.UTC(2010,5, 21),
to: Date.UTC(2015, 5, 21),
label: 'Category 1'
}]
}, {
name: 'Category 2- Should be null',
intervals: [{ // From-To pairs
from: Date.UTC(2010,5, 21),
to: Date.UTC(2010, 5, 21),
label: 'Category 2- Should be null'
}]
}, {
name: 'Category 3',
intervals: [{ // From-To pairs
from: Date.UTC(2011,05,16),
to: Date.UTC(2012,03,21 ),
label: 'Category 3'
}, {
from: Date.UTC(2013,07,09),
to: Date.UTC(2015,05,22),
label: 'Category 3'
}]
}, {
name: 'Category 4',
intervals: [{ // From-To pairs
from: Date.UTC(2013,07,18 ),
to: Date.UTC(2015,05,22),
label: 'Category 4'
}]
}, {
name: 'Category 5',
intervals: [{ // From-To pairs
from: Date.UTC(2013,06,17),
to: Date.UTC(2014,04,21),
label: 'Category 5'
}, {
from: Date.UTC(2015,01,22),
to: Date.UTC(2015,05,22),
label: 'Category 5'
}]
}, {
name: 'Category 6',
intervals: [{ // From-To pairs
from: Date.UTC(2013,06,17),
to: Date.UTC(2014,04,21),
label: 'Category 6'
}, {
from: Date.UTC(2015,01,22),
to: Date.UTC(2015,05,22),
label: 'Category 6'
}]
}, {
name: 'Category 7',
intervals: [{ // From-To pairs
from: Date.UTC(2013,06,17),
to: Date.UTC(2014,04,21),
label: 'Category 7'
}, {
from: Date.UTC(2015,01,22),
to: Date.UTC(2015,05,22),
label: 'Category 7'
}]
}, {
name: 'Category 8',
intervals: [{ // From-To pairs
from: Date.UTC(2013,06,17),
to: Date.UTC(2014,04,21),
label: 'Category 8'
}, {
from: Date.UTC(2015,01,22),
to: Date.UTC(2015,05,22),
label: 'Category 8'
}]
}, {
name: 'Category 9',
intervals: [{ // From-To pairs
from: Date.UTC(2013,06,17),
to: Date.UTC(2014,04,21),
label: 'Category 9'
}, {
from: Date.UTC(2015,01,22),
to: Date.UTC(2015,05,22),
label: 'Category 9'
}]
}];
// Define milestones
/*var milestones = [{
name: 'Get to bed',
time: Date.UTC(0, 0, 0, 22),
task: 1,
marker: {
symbol: 'triangle',
lineWidth: 1,
lineColor: 'black',
radius: 8
}
}];
*/
// re-structure the tasks into line seriesvar series = [];
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);
});
// restructure the milestones
/*$.each(milestones, function(i, milestone) {
var item = Highcharts.extend(milestone, {
data: [[
milestone.time,
milestone.task
]],
type: 'scatter'
});
series.push(item);
});
*/
// create the chart
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
title: {
text: 'Category History'
},
xAxis: {
type: 'datetime'
},
yAxis: {
categories: ['Category 9',
'Category 8',
'Category 7',
'Category 6',
'Category 5',
'Category 4',
'Category 3',
'Category 2',
'Category 1'],
tickInterval: 1,
tickPixelInterval: 200,
labels: {
style: {
color: '#525151',
font: '12px Helvetica',
fontWeight: 'bold'
},
/* formatter: function() {
if (tasks[this.value]) {
return tasks[this.value].name;
}
}*/
},
startOnTick: false,
endOnTick: false,
title: {
text: 'Criteria'
},
minPadding: 0.2,
maxPadding: 0.2,
fontSize:'15px'
},
legend: {
enabled: false
},
tooltip: {
formatter: function() {
return '<b>'+ tasks[this.y].name + '</b><br/>' +
Highcharts.dateFormat('%m-%d-%Y', this.point.options.from) +
' - ' + Highcharts.dateFormat('%m-%d-%Y', this.point.options.to);
}
},
plotOptions: {
line: {
lineWidth: 10,
marker: {
enabled: false
},
dataLabels: {
enabled: true,
align: 'left',
formatter: function() {
return this.point.options && this.point.options.label;
}
}
}
},
series: series
});
});
