HTMLcopy
1
<label><input onclick="weekendsShown(true)" type="radio" name="type" checked>Show Weekends</label>
2
<label><input onclick="weekendsShown(false)" type="radio" name="type">Hide Weekends</label>
3
<div id="container"></div>
CSScopy
16
1
html, body {
2
width: 100%;
3
height: 100%;
4
margin: 0;
5
padding: 0;
6
}
7
label {
8
display: inline-block;
9
margin: 10px 0 0 10px;
10
}
11
#container {
12
position: absolute;
13
width: 100%;
14
top: 35px;
15
bottom: 0;
16
}
JavaScriptcopy
x
1
anychart.onDocumentReady(function () {
2
3
// create data
4
var data = [
5
{x: "2020-01-12", value: "6"},
6
{x: "2020-01-15", value: "2"},
7
{x: "2020-01-18", value: "2"},
8
{x: "2020-01-19", value: "5"},
9
{x: "2020-02-03", value: "1"},
10
{x: "2020-02-19", value: "9"},
11
{x: "2020-03-19", value: "2"},
12
{x: "2020-04-13", value: "3"},
13
{x: "2020-04-15", value: "3"},
14
{x: "2020-04-20", value: "4"},
15
{x: "2020-04-21", value: "1"},
16
{x: "2020-05-10", value: "3"},
17
{x: "2020-05-11", value: "1"},
18
{x: "2020-05-14", value: "1"},
19
{x: "2021-01-12", value: "2"}
20
];
21
22
// create a chart and set the data
23
var chart = anychart.calendar(data);
24
25
// configure weeks
26
weeks = chart.weeks();
27
weeks.labels().fontColor("#dd2c00");
28
weeks.labels().fontWeight(600);
29
weeks.labels().fontStyle('italic');
30
weeks.rightSpace(10);
31
32
// configure years
33
chart.years().title().fontSize(30);
34
35
// set the chart title
36
chart.title().useHtml(true);
37
chart.title("Calendar Chart: Weeks<br><br>" +
38
"<span style='font-size:12; font-style:italic'>" +
39
"GitHub Contributions</span>");
40
41
// set the container id
42
chart.container("container");
43
44
// initiate drawing the chart
45
chart.draw();
46
});
47
48
// set the order of years
49
function weekendsShown(shown) {
50
weeks.showWeekends(shown);
51
}