// JS
var config = {
debug: true,
type: 'heatmap solid',
toolbar_visible: false,
palette: {
pointValue: '%zValue',
colors: ['#039BE5','#E0E0E0','#E53935' ],
ranges: [
{
value: 0,
legendEntry: {
name: 'Sleep: ',
style_fontWeight: 'bold',
style_fontSize: 12
}
},
{ value: 1},
{ value: 2},
{ value: 3},
{ value: 4},
{ value: 5},
{
value: 6,
legendEntry: {
name: ' Inactive: ',
style_fontWeight: 'bold',
style_fontSize: 12
}
},
{
value: 7,
legendEntry: {
name: ' Active: ',
style_fontWeight: 'bold',
style_fontSize: 12
}
},
{ value: 8},
{ value: 9},
{ value: 10},
{ value: 11},
{ value: 12}
]
},
legend: {
template: '%name,%icon',
position: 'bottom',
boxVisible: false,
cellSpacing: 1,
defaultEntry_iconWidth: 10
},
yAxis: {
defaultTick_gridLine_width: 0,
alternateGridFill: 'none'
},
xAxis: {
orientation: 'opposite',
scale: {interval: 1 },
defaultTick: {
label_text: function(v){return (v%12).toString()},
gridLine_width: 0
},
customTicks: [
{
value: 0,
label_text: '<icon name=weather/moon size=18 fill=#14327f><br>AM'
},
{
value: 12,
label_text: '<icon name=weather/sun size=24 fill=#e9b82e><br>PM'
},
{ value: 24, label_text: '12'}
]
},
defaultPoint: { outline_width: 0, tooltip: tooltipFormatter },
series: [
{
/*Defines spacing between heatmap tiles.*/
shape_innerPadding: 0.05
}
]
};
var csvData = {
data:[[0.25,'Monday',1],[0.75,'Monday',0],[1.25,'Monday',4],[1.75,'Monday',5],[2.25,'Monday',3],[2.75,'Monday',2],[3.25,'Monday',1],[3.75,'Monday',5],[4.25,'Monday',5],[4.75,'Monday',0],[5.25,'Monday',4],[5.75,'Monday',1],[6.25,'Monday',3],[6.75,'Monday',6],[7.25,'Monday',6],[7.75,'Monday',6],[8.25,'Monday',6],[8.75,'Monday',6],[9.25,'Monday',6],[9.75,'Monday',6],[10.25,'Monday',6],[10.75,'Monday',6],[11.25,'Monday',8],[11.75,'Monday',6],[12.25,'Monday',7],[12.75,'Monday',8],[13.25,'Monday',7],[13.75,'Monday',7],[14.25,'Monday',7],[14.75,'Monday',7],[15.25,'Monday',7],[15.75,'Monday',6],[16.25,'Monday',6],[16.75,'Monday',8],[17.25,'Monday',7],[17.75,'Monday',8],[18.25,'Monday',7],[18.75,'Monday',12],[19.25,'Monday',11],[19.75,'Monday',10],[20.25,'Monday',11],[20.75,'Monday',8],[21.25,'Monday',9],[21.75,'Monday',7],[22.25,'Monday',4],[22.75,'Monday',0],[23.25,'Monday',5],[23.75,'Monday',4],
[0.25,'Tuesday',0],[0.75,'Tuesday',2],[1.25,'Tuesday',0],[1.75,'Tuesday',2],[2.25,'Tuesday',1],[2.75,'Tuesday',3],[3.25,'Tuesday',1],[3.75,'Tuesday',2],[4.25,'Tuesday',5],[4.75,'Tuesday',1],[5.25,'Tuesday',4],[5.75,'Tuesday',3],[6.25,'Tuesday',3],[6.75,'Tuesday',2],[7.25,'Tuesday',3],[7.75,'Tuesday',6],[8.25,'Tuesday',6],[8.75,'Tuesday',6],[9.25,'Tuesday',6],[9.75,'Tuesday',6],[10.25,'Tuesday',6],[10.75,'Tuesday',6],[11.25,'Tuesday',7],[11.75,'Tuesday',8],[12.25,'Tuesday',7],[12.75,'Tuesday',7],[13.25,'Tuesday',7],[13.75,'Tuesday',7],[14.25,'Tuesday',6],[14.75,'Tuesday',7],[15.25,'Tuesday',6],[15.75,'Tuesday',7],[16.25,'Tuesday',8],[16.75,'Tuesday',6],[17.25,'Tuesday',7],[17.75,'Tuesday',8],[18.25,'Tuesday',8],[18.75,'Tuesday',7],[19.25,'Tuesday',9],[19.75,'Tuesday',8],[20.25,'Tuesday',8],[20.75,'Tuesday',8],[21.25,'Tuesday',8],[21.75,'Tuesday',7],[22.25,'Tuesday',9],[22.75,'Tuesday',7],[23.25,'Tuesday',5],[23.75,'Tuesday',3],
[0.25,'Wednesday',0],[0.75,'Wednesday',2],[1.25,'Wednesday',1],[1.75,'Wednesday',0],[2.25,'Wednesday',2],[2.75,'Wednesday',3],[3.25,'Wednesday',1],[3.75,'Wednesday',5],[4.25,'Wednesday',2],[4.75,'Wednesday',5],[5.25,'Wednesday',1],[5.75,'Wednesday',4],[6.25,'Wednesday',5],[6.75,'Wednesday',2],[7.25,'Wednesday',5],[7.75,'Wednesday',6],[8.25,'Wednesday',6],[8.75,'Wednesday',6],[9.25,'Wednesday',7],[9.75,'Wednesday',6],[10.25,'Wednesday',7],[10.75,'Wednesday',8],[11.25,'Wednesday',6],[11.75,'Wednesday',7],[12.25,'Wednesday',7],[12.75,'Wednesday',7],[13.25,'Wednesday',7],[13.75,'Wednesday',6],[14.25,'Wednesday',8],[14.75,'Wednesday',7],[15.25,'Wednesday',7],[15.75,'Wednesday',6],[16.25,'Wednesday',6],[16.75,'Wednesday',6],[17.25,'Wednesday',7],[17.75,'Wednesday',8],[18.25,'Wednesday',8],[18.75,'Wednesday',8],[19.25,'Wednesday',8],[19.75,'Wednesday',8],[20.25,'Wednesday',8],[20.75,'Wednesday',7],[21.25,'Wednesday',9],[21.75,'Wednesday',9],[22.25,'Wednesday',8],[22.75,'Wednesday',9],[23.25,'Wednesday',3],[23.75,'Wednesday',5],
[0.25,'Thursday',4],[0.75,'Thursday',4],[1.25,'Thursday',1],[1.75,'Thursday',4],[2.25,'Thursday',4],[2.75,'Thursday',4],[3.25,'Thursday',4],[3.75,'Thursday',4],[4.25,'Thursday',2],[4.75,'Thursday',0],[5.25,'Thursday',4],[5.75,'Thursday',4],[6.25,'Thursday',5],[6.75,'Thursday',8],[7.25,'Thursday',8],[7.75,'Thursday',9],[8.25,'Thursday',7],[8.75,'Thursday',7],[9.25,'Thursday',6],[9.75,'Thursday',7],[10.25,'Thursday',7],[10.75,'Thursday',6],[11.25,'Thursday',7],[11.75,'Thursday',8],[12.25,'Thursday',7],[12.75,'Thursday',6],[13.25,'Thursday',7],[13.75,'Thursday',8],[14.25,'Thursday',6],[14.75,'Thursday',8],[15.25,'Thursday',6],[15.75,'Thursday',8],[16.25,'Thursday',6],[16.75,'Thursday',7],[17.25,'Thursday',6],[17.75,'Thursday',9],[18.25,'Thursday',7],[18.75,'Thursday',12],[19.25,'Thursday',10],[19.75,'Thursday',11],[20.25,'Thursday',9],[20.75,'Thursday',7],[21.25,'Thursday',6],[21.75,'Thursday',6],[22.25,'Thursday',3],[22.75,'Thursday',1],[23.25,'Thursday',1],[23.75,'Thursday',1],
[0.25,'Friday',2],[0.75,'Friday',0],[1.25,'Friday',1],[1.75,'Friday',0],[2.25,'Friday',3],[2.75,'Friday',4],[3.25,'Friday',3],[3.75,'Friday',3],[4.25,'Friday',0],[4.75,'Friday',5],[5.25,'Friday',0],[5.75,'Friday',5],[6.25,'Friday',0],[6.75,'Friday',5],[7.25,'Friday',5],[7.75,'Friday',9],[8.25,'Friday',9],[8.75,'Friday',9],[9.25,'Friday',9],[9.75,'Friday',8],[10.25,'Friday',8],[10.75,'Friday',7],[11.25,'Friday',7],[11.75,'Friday',8],[12.25,'Friday',7],[12.75,'Friday',8],[13.25,'Friday',8],[13.75,'Friday',7],[14.25,'Friday',8],[14.75,'Friday',8],[15.25,'Friday',8],[15.75,'Friday',7],[16.25,'Friday',7],[16.75,'Friday',7],[17.25,'Friday',6],[17.75,'Friday',8],[18.25,'Friday',6],[18.75,'Friday',9],[19.25,'Friday',8],[19.75,'Friday',8],[20.25,'Friday',7],[20.75,'Friday',7],[21.25,'Friday',8],[21.75,'Friday',7],[22.25,'Friday',6],[22.75,'Friday',7],[23.25,'Friday',6],[23.75,'Friday',6],
[0.25,'Saturday',6],[0.75,'Saturday',6],[1.25,'Saturday',0],[1.75,'Saturday',5],[2.25,'Saturday',4],[2.75,'Saturday',1],[3.25,'Saturday',3],[3.75,'Saturday',5],[4.25,'Saturday',5],[4.75,'Saturday',5],[5.25,'Saturday',0],[5.75,'Saturday',0],[6.25,'Saturday',2],[6.75,'Saturday',0],[7.25,'Saturday',1],[7.75,'Saturday',2],[8.25,'Saturday',4],[8.75,'Saturday',2],[9.25,'Saturday',3],[9.75,'Saturday',0],[10.25,'Saturday',5],[10.75,'Saturday',2],[11.25,'Saturday',4],[11.75,'Saturday',9],[12.25,'Saturday',8],[12.75,'Saturday',7],[13.25,'Saturday',9],[13.75,'Saturday',9],[14.25,'Saturday',8],[14.75,'Saturday',7],[15.25,'Saturday',8],[15.75,'Saturday',8],[16.25,'Saturday',7],[16.75,'Saturday',9],[17.25,'Saturday',9],[17.75,'Saturday',8],[18.25,'Saturday',9],[18.75,'Saturday',9],[19.25,'Saturday',9],[19.75,'Saturday',7],[20.25,'Saturday',9],[20.75,'Saturday',8],[21.25,'Saturday',6],[21.75,'Saturday',6],[22.25,'Saturday',6],[22.75,'Saturday',6],[23.25,'Saturday',6],[23.75,'Saturday',6],
[0.25,'Sunday',2],[0.75,'Sunday',4],[1.25,'Sunday',0],[1.75,'Sunday',5],[2.25,'Sunday',0],[2.75,'Sunday',1],[3.25,'Sunday',2],[3.75,'Sunday',5],[4.25,'Sunday',5],[4.75,'Sunday',2],[5.25,'Sunday',2],[5.75,'Sunday',4],[6.25,'Sunday',3],[6.75,'Sunday',4],[7.25,'Sunday',3],[7.75,'Sunday',4],[8.25,'Sunday',5],[8.75,'Sunday',2],[9.25,'Sunday',4],[9.75,'Sunday',5],[10.25,'Sunday',5],[10.75,'Sunday',6],[11.25,'Sunday',7],[11.75,'Sunday',6],[12.25,'Sunday',7],[12.75,'Sunday',6],[13.25,'Sunday',6],[13.75,'Sunday',6],[14.25,'Sunday',6],[14.75,'Sunday',6],[15.25,'Sunday',6],[15.75,'Sunday',8],[16.25,'Sunday',9],[16.75,'Sunday',7],[17.25,'Sunday',9],[17.75,'Sunday',7],[18.25,'Sunday',8],[18.75,'Sunday',7],[19.25,'Sunday',8],[19.75,'Sunday',9],[20.25,'Sunday',8],[20.75,'Sunday',8],[21.25,'Sunday',9],[21.75,'Sunday',9],[22.25,'Sunday',9],[22.75,'Sunday',6],[23.25,'Sunday',6],[23.75,'Sunday',6]],
mapTo:'x,y,z'
};
config.series[0].points = csvData;
chart = JSC.chart('chartDiv',config);
function formatHour(v){ return (v%12)+'';}
function tooltipFormatter(point) {
var day = point.tokenValue('%yValue');
var time = point.tokenValue('%xValue');
var hour = Math.floor(time);
hour = hour === 0 ? 12 : hour % 12;
var min = (time % 1) * 60;
return '<b>' + day + '</b> ' + hour + ':' + min;
} |