canvas-calendar-chart
Version:
Calendar chart using an HTML canvas
192 lines (160 loc) • 18.5 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas Calendar Chart Example</title>
</head>
<body>
<h3>Calendar with weekends disabled, alternate color-scheme and custom alert on click</h3>
<div id="calendar">
</div>
<h3>Calendar with weekends enabled, primary color-scheme, a custom value callback function on hover and a custom border on click</h3>
<div id="calendar2">
</div>
<h3>Calendar with weekends enabled, no data, a custom date callback function on hover and change color of date on click</h3>
<div id="calendar3">
</div>
<h3>Calendar with weekends disabled and real data for MSFT</h3>
<div id="calendar4">
</div>
<h3>Calendar which gets its data updated after 3 seconds</h3>
<div id="calendar5">
</div>
<script type="text/javascript" src="dist/calendar.bundle.js"></script>
<script type="text/javascript">
// Prepare some data
var data = [];
var startDate = new Date("2016-01-01");
var endDate = new Date("2016-12-31");
var oneDay = 1000*60*60*24;
var numberOfDays = (endDate.getTime() - startDate.getTime())/oneDay;
var currentDate = new Date("2016-01-01");
for(var i = 0; i <= numberOfDays; i++) {
if(currentDate.getDay() !== 0 && currentDate.getDay() !== 6) {
data.push({
date: currentDate,
value: currentDate.getDay() !== 0 && currentDate.getDay() !== 6 ? Math.random() : 0
});
}
currentDate = new Date(currentDate.getTime() + oneDay);
}
var customColors = ["#edf8e9", "#bae4b3", "#74c476", "#31a354", "#006d2c"];
function callBack(point, calendar, event) {
alert("Clicked on point with date: " + new Date(point.date) + " x:" + point.x + " y:" + point.y);
}
// Configuration for a calendar
var config = {
id: "calendar",
color: {
range: customColors
},
chart: {
startDate: "2016-01-01",
endDate: "2016-12-31",
skipWeekend: true
},
data: data,
events: {
onClick: callBack
}
};
var calendar = CalendarFactory.createChart(config);
var selectedData2 = [];
function callBack2(point, calendar, event) {
let index = selectedData2.indexOf(point);
if(index === -1) {
calendar.getCanvasHelper().drawSquare(calendar.context, point.x + 1, point.y + 1, calendar.config.style.squareSideLength - 2, calendar.config.color.monthOutline, point.color);
selectedData2.push(point);
} else {
calendar.getCanvasHelper().drawSquare(calendar.context, point.x, point.y, calendar.config.style.squareSideLength, calendar.config.color.dateOutline, point.color);
selectedData2.splice(index, 1);
}
calendar.drawMonthBorder(new Date(point.date), point.x, point.y);
}
// Configuration for another calendar
var config2 = {
id: "calendar2",
chart: {
startDate: "2015-12-01",
endDate: "2017-01-31"
},
data: data,
events: {
onClick: callBack2,
onHover: {
value: function (point) {
return "New Value: " + point.value.toFixed(3);
}
}
}
};
var calendar2 = CalendarFactory.createChart(config2);
var selectedData3 = [];
function callBack3(point, calendar, event) {
let index = selectedData3.indexOf(point);
if(index === -1) {
calendar.getCanvasHelper().drawSquare(calendar.context, point.x + 1, point.y + 1, calendar.config.style.squareSideLength - 2, calendar.config.color.dateOutline, "#A6D96A");
selectedData3.push(point);
} else {
calendar.getCanvasHelper().drawSquare(calendar.context, point.x, point.y, calendar.config.style.squareSideLength, calendar.config.color.dateOutline, "#FFFFFF");
selectedData3.splice(index, 1);
}
calendar.drawMonthBorder(new Date(point.date), point.x, point.y);
}
// Configuration for yet another calendar but this time without data
var config3 = {
id: "calendar3",
chart: {
startDate: "2016-01-01",
endDate: "2016-12-31"
},
events: {
onClick: callBack3,
onHover: {
date: function(point) {
return "Date: " + point.date.getFullYear() + "-" + (point.date.getMonth() < 9 ? "0" + (point.date.getMonth() + 1) : (point.date.getMonth() + 1)) + "-" + (point.date.getDate() < 10 ? "0" + point.date.getDate() : point.date.getDate());
}
}
}
};
var calendar3 = CalendarFactory.createChart(config3);
var data2 = [{"date":"2016-01-04","midPointPrice":"53.9344"},{"date":"2016-01-05","midPointPrice":"55.0293"},{"date":"2016-01-06","midPointPrice":"54.1070"},{"date":"2016-01-07","midPointPrice":"52.8030"},{"date":"2016-01-08","midPointPrice":"52.8262"},{"date":"2016-01-11","midPointPrice":"52.1192"},{"date":"2016-01-12","midPointPrice":"52.5271"},{"date":"2016-01-13","midPointPrice":"52.8670"},{"date":"2016-01-14","midPointPrice":"52.7021"},{"date":"2016-01-15","midPointPrice":"51.0181"},{"date":"2016-01-19","midPointPrice":"50.6789"},{"date":"2016-01-20","midPointPrice":"50.0661"},{"date":"2016-01-21","midPointPrice":"50.9757"},{"date":"2016-01-22","midPointPrice":"52.0658"},{"date":"2016-01-25","midPointPrice":"52.2135"},{"date":"2016-01-26","midPointPrice":"52.1704"},{"date":"2016-01-27","midPointPrice":"51.7469"},{"date":"2016-01-28","midPointPrice":"51.7682"},{"date":"2016-01-29","midPointPrice":"54.7370"},{"date":"2016-02-01","midPointPrice":"54.7740"},{"date":"2016-02-02","midPointPrice":"53.4452"},{"date":"2016-02-03","midPointPrice":"52.0787"},{"date":"2016-02-04","midPointPrice":"51.8756"},{"date":"2016-02-05","midPointPrice":"50.5669"},{"date":"2016-02-08","midPointPrice":"48.8031"},{"date":"2016-02-09","midPointPrice":"49.4331"},{"date":"2016-02-10","midPointPrice":"50.0472"},{"date":"2016-02-11","midPointPrice":"49.2467"},{"date":"2016-02-12","midPointPrice":"50.2197"},{"date":"2016-02-16","midPointPrice":"50.7043"},{"date":"2016-02-17","midPointPrice":"52.2894"},{"date":"2016-02-18","midPointPrice":"52.4692"},{"date":"2016-02-19","midPointPrice":"51.9587"},{"date":"2016-02-22","midPointPrice":"52.7349"},{"date":"2016-02-23","midPointPrice":"51.4774"},{"date":"2016-02-24","midPointPrice":"50.8235"},{"date":"2016-02-25","midPointPrice":"51.3187"},{"date":"2016-02-26","midPointPrice":"51.4429"},{"date":"2016-02-29","midPointPrice":"51.2034"},{"date":"2016-03-01","midPointPrice":"52.0075"},{"date":"2016-03-02","midPointPrice":"52.4792"},{"date":"2016-03-03","midPointPrice":"52.1328"},{"date":"2016-03-04","midPointPrice":"51.9838"},{"date":"2016-03-07","midPointPrice":"51.1019"},{"date":"2016-03-08","midPointPrice":"51.6965"},{"date":"2016-03-09","midPointPrice":"52.5503"},{"date":"2016-03-10","midPointPrice":"51.8727"},{"date":"2016-03-11","midPointPrice":"52.7824"},{"date":"2016-03-14","midPointPrice":"53.1956"},{"date":"2016-03-15","midPointPrice":"53.2380"},{"date":"2016-03-16","midPointPrice":"53.9296"},{"date":"2016-03-17","midPointPrice":"54.6786"},{"date":"2016-03-18","midPointPrice":"53.9092"},{"date":"2016-03-21","midPointPrice":"53.5797"},{"date":"2016-03-22","midPointPrice":"53.9440"},{"date":"2016-03-23","midPointPrice":"53.9540"},{"date":"2016-03-24","midPointPrice":"54.1299"},{"date":"2016-03-28","midPointPrice":"53.6501"},{"date":"2016-03-29","midPointPrice":"54.3862"},{"date":"2016-03-30","midPointPrice":"55.2261"},{"date":"2016-03-31","midPointPrice":"55.2903"},{"date":"2016-04-01","midPointPrice":"55.1842"},{"date":"2016-04-04","midPointPrice":"55.3299"},{"date":"2016-04-05","midPointPrice":"54.8326"},{"date":"2016-04-06","midPointPrice":"54.7595"},{"date":"2016-04-07","midPointPrice":"54.5044"},{"date":"2016-04-08","midPointPrice":"54.7008"},{"date":"2016-04-11","midPointPrice":"54.8758"},{"date":"2016-04-12","midPointPrice":"54.3636"},{"date":"2016-04-13","midPointPrice":"55.1240"},{"date":"2016-04-14","midPointPrice":"55.3690"},{"date":"2016-04-15","midPointPrice":"55.6589"},{"date":"2016-04-18","midPointPrice":"56.2460"},{"date":"2016-04-19","midPointPrice":"56.2476"},{"date":"2016-04-20","midPointPrice":"56.0292"},{"date":"2016-04-21","midPointPrice":"55.8268"},{"date":"2016-04-22","midPointPrice":"51.7674"},{"date":"2016-04-25","midPointPrice":"51.8998"},{"date":"2016-04-26","midPointPrice":"51.4297"},{"date":"2016-04-27","midPointPrice":"50.8604"},{"date":"2016-04-28","midPointPrice":"50.2881"},{"date":"2016-04-29","midPointPrice":"49.9117"},{"date":"2016-05-02","midPointPrice":"50.2405"},{"date":"2016-05-03","midPointPrice":"49.8774"},{"date":"2016-05-04","midPointPrice":"49.8691"},{"date":"2016-05-05","midPointPrice":"49.9962"},{"date":"2016-05-06","midPointPrice":"49.9662"},{"date":"2016-05-09","midPointPrice":"50.2328"},{"date":"2016-05-10","midPointPrice":"50.7215"},{"date":"2016-05-11","midPointPrice":"51.3105"},{"date":"2016-05-12","midPointPrice":"51.3456"},{"date":"2016-05-13","midPointPrice":"51.5029"},{"date":"2016-05-16","midPointPrice":"51.5492"},{"date":"2016-05-17","midPointPrice":"50.7821"},{"date":"2016-05-18","midPointPrice":"50.7760"},{"date":"2016-05-19","midPointPrice":"50.0680"},{"date":"2016-05-20","midPointPrice":"50.8687"},{"date":"2016-05-23","midPointPrice":"50.2438"},{"date":"2016-05-24","midPointPrice":"51.3578"},{"date":"2016-05-25","midPointPrice":"52.2484"},{"date":"2016-05-26","midPointPrice":"51.7144"},{"date":"2016-05-27","midPointPrice":"52.1103"},{"date":"2016-05-31","midPointPrice":"52.2932"},{"date":"2016-06-01","midPointPrice":"52.7537"},{"date":"2016-06-02","midPointPrice":"52.2956"},{"date":"2016-06-03","midPointPrice":"51.8386"},{"date":"2016-06-06","midPointPrice":"52.1758"},{"date":"2016-06-07","midPointPrice":"52.4554"},{"date":"2016-06-08","midPointPrice":"52.0907"},{"date":"2016-06-09","midPointPrice":"51.7254"},{"date":"2016-06-10","midPointPrice":"51.6460"},{"date":"2016-06-13","midPointPrice":"50.0863"},{"date":"2016-06-14","midPointPrice":"49.7977"},{"date":"2016-06-15","midPointPrice":"49.8990"},{"date":"2016-06-16","midPointPrice":"50.0351"},{"date":"2016-06-17","midPointPrice":"50.0874"},{"date":"2016-06-20","midPointPrice":"50.5187"},{"date":"2016-06-21","midPointPrice":"51.0560"},{"date":"2016-06-22","midPointPrice":"51.1704"},{"date":"2016-06-23","midPointPrice":"51.8026"},{"date":"2016-06-24","midPointPrice":"50.0282"},{"date":"2016-06-27","midPointPrice":"48.5400"},{"date":"2016-06-28","midPointPrice":"49.1657"},{"date":"2016-06-29","midPointPrice":"50.3556"},{"date":"2016-06-30","midPointPrice":"50.9819"},{"date":"2016-07-01","midPointPrice":"51.4128"},{"date":"2016-07-05","midPointPrice":"50.9903"},{"date":"2016-07-06","midPointPrice":"51.1067"},{"date":"2016-07-07","midPointPrice":"51.3154"},{"date":"2016-07-08","midPointPrice":"52.2178"},{"date":"2016-07-11","midPointPrice":"52.6832"},{"date":"2016-07-12","midPointPrice":"53.2128"},{"date":"2016-07-13","midPointPrice":"53.5938"},{"date":"2016-07-14","midPointPrice":"53.7828"},{"date":"2016-07-15","midPointPrice":"53.4939"},{"date":"2016-07-18","midPointPrice":"54.1044"},{"date":"2016-07-19","midPointPrice":"53.3742"},{"date":"2016-07-20","midPointPrice":"56.4288"},{"date":"2016-07-21","midPointPrice":"55.9795"},{"date":"2016-07-22","midPointPrice":"56.4078"},{"date":"2016-07-25","midPointPrice":"56.4466"},{"date":"2016-07-26","midPointPrice":"56.8587"},{"date":"2016-07-27","midPointPrice":"56.3919"},{"date":"2016-07-28","midPointPrice":"56.0834"},{"date":"2016-07-29","midPointPrice":"56.5250"},{"date":"2016-08-01","midPointPrice":"56.4075"},{"date":"2016-08-02","midPointPrice":"56.5697"},{"date":"2016-08-03","midPointPrice":"56.8203"},{"date":"2016-08-04","midPointPrice":"57.2592"},{"date":"2016-08-05","midPointPrice":"57.9649"},{"date":"2016-08-08","midPointPrice":"57.9228"},{"date":"2016-08-09","midPointPrice":"58.2252"},{"date":"2016-08-10","midPointPrice":"57.9994"},{"date":"2016-08-11","midPointPrice":"58.2535"},{"date":"2016-08-12","midPointPrice":"57.7754"},{"date":"2016-08-15","midPointPrice":"58.3513"},{"date":"2016-08-16","midPointPrice":"57.4466"},{"date":"2016-08-17","midPointPrice":"57.4303"},{"date":"2016-08-18","midPointPrice":"57.4891"},{"date":"2016-08-19","midPointPrice":"57.5462"},{"date":"2016-08-22","midPointPrice":"57.5482"},{"date":"2016-08-23","midPointPrice":"57.9741"},{"date":"2016-08-24","midPointPrice":"57.9017"},{"date":"2016-08-25","midPointPrice":"58.1696"},{"date":"2016-08-26","midPointPrice":"58.1126"},{"date":"2016-08-29","midPointPrice":"58.3158"},{"date":"2016-08-30","midPointPrice":"57.8233"},{"date":"2016-09-01","midPointPrice":"57.5154"},{"date":"2016-09-02","midPointPrice":"57.7579"},{"date":"2016-09-06","midPointPrice":"57.5112"},{"date":"2016-09-07","midPointPrice":"57.5937"},{"date":"2016-09-08","midPointPrice":"57.4300"},{"date":"2016-09-09","midPointPrice":"56.9077"},{"date":"2016-09-12","midPointPrice":"56.6213"},{"date":"2016-09-13","midPointPrice":"56.2910"},{"date":"2016-09-14","midPointPrice":"56.3621"},{"date":"2016-09-15","midPointPrice":"56.9075"},{"date":"2016-09-16","midPointPrice":"57.1194"},{"date":"2016-09-19","midPointPrice":"57.2497"},{"date":"2016-09-20","midPointPrice":"56.9285"},{"date":"2016-09-21","midPointPrice":"57.3973"},{"date":"2016-09-22","midPointPrice":"57.8503"},{"date":"2016-09-23","midPointPrice":"57.5084"},{"date":"2016-09-26","midPointPrice":"56.9742"},{"date":"2016-09-27","midPointPrice":"57.6444"},{"date":"2016-09-28","midPointPrice":"57.8784"},{"date":"2016-09-29","midPointPrice":"57.7474"},{"date":"2016-09-30","midPointPrice":"57.5440"},{"date":"2016-10-03","midPointPrice":"57.3315"},{"date":"2016-10-04","midPointPrice":"57.2342"},{"date":"2016-10-05","midPointPrice":"57.7793"},{"date":"2016-10-06","midPointPrice":"57.6655"},{"date":"2016-10-07","midPointPrice":"57.7417"},{"date":"2016-10-10","midPointPrice":"58.1142"},{"date":"2016-10-11","midPointPrice":"57.3074"},{"date":"2016-10-12","midPointPrice":"56.9479"},{"date":"2016-10-13","midPointPrice":"56.8776"},{"date":"2016-10-14","midPointPrice":"57.4805"},{"date":"2016-10-17","midPointPrice":"57.1497"},{"date":"2016-10-18","midPointPrice":"57.7029"},{"date":"2016-10-19","midPointPrice":"57.5944"},{"date":"2016-10-20","midPointPrice":"57.0686"},{"date":"2016-10-21","midPointPrice":"59.8735"},{"date":"2016-10-24","midPointPrice":"60.6148"},{"date":"2016-10-25","midPointPrice":"60.9865"},{"date":"2016-10-26","midPointPrice":"60.8174"},{"date":"2016-10-27","midPointPrice":"60.5300"},{"date":"2016-10-28","midPointPrice":"60.1454"},{"date":"2016-10-31","midPointPrice":"60.2276"},{"date":"2016-11-01","midPointPrice":"59.7493"},{"date":"2016-11-02","midPointPrice":"59.6318"},{"date":"2016-11-03","midPointPrice":"59.2583"},{"date":"2016-11-04","midPointPrice":"59.0531"},{"date":"2016-11-07","midPointPrice":"60.3662"},{"date":"2016-11-08","midPointPrice":"60.4677"},{"date":"2016-11-09","midPointPrice":"60.0279"},{"date":"2016-11-10","midPointPrice":"58.8676"},{"date":"2016-11-11","midPointPrice":"58.7781"},{"date":"2016-11-14","midPointPrice":"58.0538"},{"date":"2016-11-15","midPointPrice":"58.9706"},{"date":"2016-11-16","midPointPrice":"59.3090"},{"date":"2016-11-17","midPointPrice":"60.5676"},{"date":"2016-11-18","midPointPrice":"60.5258"},{"date":"2016-11-21","midPointPrice":"60.6937"},{"date":"2016-11-22","midPointPrice":"61.0854"},{"date":"2016-11-23","midPointPrice":"60.4058"},{"date":"2016-11-25","midPointPrice":"60.3909"},{"date":"2016-11-28","midPointPrice":"60.6900"},{"date":"2016-11-29","midPointPrice":"61.1136"},{"date":"2016-11-30","midPointPrice":"60.5551"},{"date":"2016-12-01","midPointPrice":"59.3228"},{"date":"2016-12-02","midPointPrice":"59.1987"},{"date":"2016-12-05","midPointPrice":"60.1619"},{"date":"2016-12-06","midPointPrice":"60.0428"},{"date":"2016-12-07","midPointPrice":"60.5618"},{"date":"2016-12-08","midPointPrice":"61.1908"},{"date":"2016-12-09","midPointPrice":"61.7534"},{"date":"2016-12-12","midPointPrice":"61.9597"},{"date":"2016-12-13","midPointPrice":"63.1209"},{"date":"2016-12-14","midPointPrice":"63.0049"},{"date":"2016-12-15","midPointPrice":"62.7824"},{"date":"2016-12-16","midPointPrice":"62.3367"},{"date":"2016-12-19","midPointPrice":"63.4932"},{"date":"2016-12-20","midPointPrice":"63.4467"},{"date":"2016-12-21","midPointPrice":"63.4482"},{"date":"2016-12-22","midPointPrice":"63.6307"},{"date":"2016-12-23","midPointPrice":"63.0262"},{"date":"2016-12-27","midPointPrice":"63.5010"},{"date":"2016-12-28","midPointPrice":"63.0906"},{"date":"2016-12-29","midPointPrice":"62.8676"},{"date":"2016-12-30","midPointPrice":"62.2878"}];
for(var i = 0; i < data2.length; i++) {
data2[i].value = parseFloat(data2[i]["midPointPrice"]);
}
var customColors = ["#edf8e9", "#bae4b3", "#74c476", "#31a354", "#006d2c"];
// Configuration for a calendar
var config4 = {
id: "calendar4",
color: {
range: customColors
},
chart: {
startDate: "2016-01-01",
endDate: "2016-12-31",
skipWeekend: true
},
data: data2
};
var calendar4 = CalendarFactory.createChart(config4);
// Configuration for a calendar
var config5 = {
id: "calendar5",
color: {
range: customColors
},
chart: {
startDate: "2016-01-01",
endDate: "2016-12-31",
skipWeekend: true
},
data: data2
};
var calendar5 = CalendarFactory.createChart(config5);
data2.splice(0, 5);
setTimeout(function () {
calendar5.updateChart(data2);
}, 3000);
</script>
</body>
</html>