JSFiddle - React, Tailwind, and code Playground
HTML
<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>
JavaScript
// Define applications
var applications = [{
name: 'Sunday',
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: '#FFFF19'
}, {
from: Date.UTC(2015, 0, 12),
to: Date.UTC(2015, 0, 16)
,color: '#FFFF19'
}]
// We can specify a single color of a line
//,color: '#2EB82E'
},{
name: 'Monday',
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: '#FFFF19'
}]
// We can specify a single color of a line
//,color: '#3366FF'
}
];
// 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]
);
}
});
...