I found a workaround to draw a gantt chart with highcharts line. It was nice to know that we can make a gantt chart with the fabulous library Highcharts but I want to apply a custom colors. Maybe I tried all possibilities that I found in the API. You can see what I did in my jsfiddle
// Define applications
var applications = [{
name: 'App1',
intervals: [{ // From-To pairs
from: Date.UTC(2015, 0, 5),
to: Date.UTC(2015, 0, 6),
// We can't specify a single color for each data even we give an array of objects with named, intervals values and color.
color: '#FF4719'
}, {
from: Date.UTC(2015, 0, 12),
to: Date.UTC(2015, 0, 16)
,color: '#2EB82E'
}]
// We can specify a single color of a line
//,color: '#2EB82E'
}, {
name: 'App2',
intervals: [{ // From-To pairs
from: Date.UTC(2015, 0, 7),
to: Date.UTC(2015, 0, 9)
// We can't specify a single color for each data even we give an array of objects with named, intervals values and color.
,color: '#FFFF19'
}, {
from: Date.UTC(2015, 0, 26),
to: Date.UTC(2015, 1, 6)
,color: '#3366FF'
}]
// We can specify a single color of a line
//,color: '#3366FF'
}, {
name: 'App3',
intervals: [{ // From-To pairs
from: Date.UTC(2015, 1, 20),
to: Date.UTC(2015, 1, 21),
label: 'Incident1'
// We can't specify a single color for each data even we give an array of objects with named, intervals values and color.
,color: '#E62EB8'
}, {
from: Date.UTC(2015, 2,11),
to: Date.UTC(2015, 2, 13)
,color: '#8A5C2E'
}, {
from: Date.UTC(2015, 2, 19),
to: Date.UTC(2015, 2, 20),
label: 'Incident2'
,color: '#006699'
}, {
from: Date.UTC(2015, 2, 23),
to: Date.UTC(2015, 2, 27)
,color: '#666699'
}]
// We can specify a single color of a line
//,color: '#666699'
}, {
name: 'App4',
intervals: [{ // From-To pairs
from: Date.UTC(2015, 2, 2),
to: Date.UTC(2015, 2, 31)
// We can't specify a single color for each data even we give an array of objects with named, intervals values and color.
,color: '#339966'
}]
//,color: '#339966'
}];
// re-structure the applications into line seriesvar series = [];
var series = [];
$.each(applications.reverse(), function(i, application) {
var item = {
name: application.name,
data: [],
pointStart: Date.UTC(2015, 0, 1),
pointInterval: 3 * 24 * 3600 * 1000
};
$.each(application.intervals, function(j, interval) {
item.data.push({
x: interval.from,
y: i,
label: interval.label,
from: interval.from,
to: interval.to,
color: interval.color
}, {
x: interval.to,
y: i,
from: interval.from,
to: interval.to,
color: interval.color
});
// add a null value between intervals
if (application.intervals[j + 1]) {
item.data.push(
[(interval.to + application.intervals[j + 1].from) / 2, null]
);
}
});
series.push(item);
});
// create the chart
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
title: {
text: 'Deployment Planning'
},
xAxis: {
//startOfWeek: 1,
type: 'datetime',
labels: {
formatter: function () {
return Highcharts.dateFormat('%e %b', this.value);
}
}
},
yAxis: {
tickInterval: 1,
labels: {
formatter: function() {
if (applications[this.value]) {
return applications[this.value].name;
}
}
},
startOnTick: false,
endOnTick: false,
title: {
text: 'Applications'
},
minPadding: 0.2,
maxPadding: 0.2
},
legend: {
enabled: false
},
tooltip: {
formatter: function() {
return '<b>'+ applications[this.y].name + '</b><br/>' +
Highcharts.dateFormat('%Y-%m-%d', this.point.options.from) +
' - ' + Highcharts.dateFormat('%Y-%m-%d', this.point.options.to);
}
},
// We can define the color chart to our lines
//colors: ['#B572A7'],
plotOptions: {
series: {
// We can specify a single color of a line
//lineColor: '#303030'
//lineColor: function() {
// return this.point.options.color;
// return '#303030';
//},
},
line: {
lineWidth: 9,
// We can specify a single color of a line
//color: '#B572A7',
// We can't make function (){ ... } to get color for each point.option or juste return a single color !
//color: function() {
// return this.point.options.color;
// return '#B572A7';
//},
marker: {
enabled: false
},
dataLabels: {
enabled: true,
align: 'left',
formatter: function() {
return this.point.options && this.point.options.label;
}
}
}
},
series: series
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<div id="container" style="height: 180px"></div>I want to specify a single color for each data with givin an array of objects with named, intervals values and color. Like the pic
Any idea to do that ?
Thx
I found an other way to draw a gantt chart with highstock ! I used columnrange chart And now I get what I want :D jsfiddle
Highcharts.setOptions({
lang: {
months: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
weekdays: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
shortMonths: ['Jan', 'Fev', 'Mar', 'Avr', 'Mai', 'Juin', 'Juil', 'Août', 'Sept', 'Oct', 'Nov', 'Déc'],
decimalPoint: ',',
printChart: 'Imprimer',
downloadPNG: 'Télécharger en image PNG',
downloadJPEG: 'Télécharger en image JPEG',
downloadPDF: 'Télécharger en document PDF',
downloadSVG: 'Télécharger en document Vectoriel',
loading: 'Chargement en cours...',
contextButtonTitle: 'Exporter le graphique',
resetZoom: 'Réinitialiser le zoom',
resetZoomTitle: 'Réinitialiser le zoom au niveau 1:1',
thousandsSep: ' ',
decimalPoint: ',',
noData: 'Pas d\'information à afficher'
}
});
// Define applications
var applications = [{
name: 'App1',
intervals: [{ // From-To pairs
from: Date.UTC(2015, 0, 5),
to: Date.UTC(2015, 0, 6)
,step: '1'
,color: '#FF0000'
}, {
from: Date.UTC(2015, 0, 12),
to: Date.UTC(2015, 0, 16)
,color: '#0066FF'
,step: '2'
}, {
from: Date.UTC(2015, 1, 12),
to: Date.UTC(2015, 1, 16)
,color: '#00CC66'
,step: '3'
}]
}, {
name: 'App2',
intervals: [{ // From-To pairs
from: Date.UTC(2015, 0, 7),
to: Date.UTC(2015, 0, 9)
,step: '1'
,color: '#FF0000'
}, {
from: Date.UTC(2015, 0, 26),
to: Date.UTC(2015, 1, 6)
,step: '2'
,color: '#0066FF'
}]
}, {
name: 'App3',
intervals: [{ // From-To pairs
from: Date.UTC(2015, 1, 20),
to: Date.UTC(2015, 1, 21),
label: 'Incident1'
,step: '1'
,color: '#FF0000'
}, {
from: Date.UTC(2015, 2,11),
to: Date.UTC(2015, 2, 13)
,step: '2'
,color: '#0066FF'
}, {
from: Date.UTC(2015, 2, 19),
to: Date.UTC(2015, 2, 20),
label: 'Incident2'
,step: '3'
,color: '#00CC66'
}, {
from: Date.UTC(2015, 2, 23),
to: Date.UTC(2015, 2, 27)
,step: '4'
,color: '#A3CC29'
}]
}, {
name: 'App4',
intervals: [{ // From-To pairs
from: Date.UTC(2015, 2, 2),
to: Date.UTC(2015, 2, 31)
,step: '1'
,color: '#FF0000'
}]
}];
// re-structure the applications into line seriesvar series = [];
var series = [];
$.each(applications.reverse(), function(i, application) {
var item = {
name: application.name,
data: []
};
$.each(application.intervals, function(j, interval) {
item.data.push({
x: i,
label: interval.label,
low: interval.from,
high: interval.to,
step: interval.step,
color: interval.color
}, {
x: i,
low: interval.from,
high: interval.to,
step: interval.step,
color: interval.color
});
// add a null value between intervals
if (application.intervals[j + 1]) {
item.data.push(
[(interval.to + application.intervals[j + 1].from) / 2, null]
);
}
});
series.push(item);
});
$('#container').highcharts({
chart: {
type: 'columnrange',
inverted: true,
width: 800
},
title: {
text: 'Deployment Planning'
},
xAxis: {
categories: ['App4', 'App3', 'App2', 'App1'],
title: {
text: 'Applications'
},
minPadding: 0.2,
maxPadding: 0.2
},
yAxis: {
title: {
text: ''
},
type: 'datetime',
dateTimeLabelFormats: {
week: '%e %b'
},
tickPixelInterval: 70,
labels: {
rotation: -45
}
},
plotOptions: {
columnrange: {
grouping: true,
dataLabels: {
enabled: false,
align: 'center',
formatter: function() {
return this.point.options.label;
}
}
}
},
legend: {
enabled: false
},
tooltip: {
positioner: function () {
return { x: 100, y: 35 };
},
formatter: function () {
return this.point.options.step +" - "+ this.series.name + ' (' + Highcharts.dateFormat('%e %B', this.point.low) +
' - ' + Highcharts.dateFormat('%B %e', this.point.high) + ')';
}
},
series: series
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<div id="container" style="width: 100%; height: 400px;"></div>