JavaScript
// Define days with checkins
var days = [{
name: 'Monday',
intervals: [{ // From-To pairs
from: Date.UTC(0, 0, 0, 9, 06),
to: Date.UTC(0, 0, 0, 12, 30)
}, {
from: Date.UTC(0, 0, 0, 13, 30),
to: Date.UTC(0, 0, 0, 18),
}]
}, {
name: 'Tuesday',
intervals: [{ // From-To pairs
from: Date.UTC(0, 0, 0, 9, 02),
to: Date.UTC(0, 0, 0, 13, 02)
}, {
from: Date.UTC(0, 0, 0, 14, 05),
to: Date.UTC(0, 0, 0, 18, 30)
}]
}, {
name: 'Wednesday',
intervals: [{ // From-To pairs
from: Date.UTC(0, 0, 0, 9),
to: Date.UTC(0, 0, 0, 11)
}, {
from: Date.UTC(0, 0, 0, 12),
to: Date.UTC(0, 0, 0, 12, 30)
}, {
from: Date.UTC(0, 0, 0, 16),
to: Date.UTC(0, 0, 0, 17),
}]
}, {
name: 'Thursday',
intervals: [{ // From-To pairs
from: Date.UTC(0, 0, 0, 8),
to: Date.UTC(0, 0, 0, 16)
}]
}, {
name: 'Friday',
intervals: []
}
];
// re-structure the days with checkins into line seriesvar series = [];
var series = [];
$.each(days.reverse(), function (i, day) {
var item = {
name: day.name,
data: []
};
$.each(day.intervals, function (j, interval) {
item.data.push({
x: interval.from,
y: i,
label: interval.label,
from: interval.from,
to: interval.to,
color: '#333333'
}, {
x: interval.to,
y: i,
from: interval.from,
to: interval.to,
color: '#333333'
});
// add a null value between intervals
if (day.intervals[j + 1]) {
item.data.push([(interval.to + day.intervals[j + 1].from) / 2, null]);
}
});
series.push(item);
});
// create the chart
var chart = new Highcharts.Chart({
chart: {
renderTo: 'checkinWeekHistory',
inverted: true,
backgroundColor: '#F5F5F5'
},
...