HTMLcopy
1
<div id="container"></div>
CSScopy
6
1
html, body, #container {
2
width: 100%;
3
height: 100%;
4
margin: 0;
5
padding: 0;
6
}
JavaScriptcopy
x
1
anychart.onDocumentReady(function () {
2
var data = getData();
3
4
var chart = anychart.resource();
5
chart.zoomLevel(1);
6
chart.data(data);
7
8
var grid = chart.grid();
9
grid.verticalStroke('#F44336');
10
11
// Enable left line.
12
grid.drawLeftLine(true);
13
14
chart.title('Enable left line');
15
chart.container('container');
16
chart.draw();
17
});
18
function getData() {
19
return [
20
{
21
name: 'Vasil Kiryienka',
22
description: 'Rider',
23
activities: [
24
{
25
name: 'World Championships',
26
start: '2016-10-12',
27
end: '2016-10-12'
28
}
29
]
30
},
31
{
32
name: 'Elia Viviani',
33
description: 'Rider',
34
activities: [
35
{
36
name: 'Paris - Tours',
37
start: '2016-10-09',
38
end: '2016-10-09'
39
},
40
{
41
name: 'World Championships',
42
start: '2016-10-16',
43
end: '2016-10-16'
44
},
45
{
46
name: 'Abu Dhabi Tour',
47
start: '2016-10-20',
48
end: '2016-10-23'
49
}
50
]
51
},
52
{
53
name: 'Ben Swift',
54
description: 'Rider',
55
activities: [
56
{
57
name: 'World Championships',
58
start: '2016-10-09',
59
end: '2016-10-09'
60
},
61
{
62
name: 'World Championships',
63
start: '2016-10-16',
64
end: '2016-10-16'
65
}
66
]
67
},
68
{
69
name: 'Michal Kwiatkowski',
70
description: 'Rider',
71
activities: [
72
{
73
name: 'World Championships',
74
start: '2016-10-09',
75
end: '2016-10-09'
76
},
77
{
78
name: 'Abu Dhabi Tour',
79
start: '2016-10-20',
80
end: '2016-10-23'
81
}
82
]
83
},
84
{
85
name: 'Alex Peters',
86
description: 'Rider',
87
activities: [
88
{
89
name: 'Japan Cup',
90
start: '2016-10-23',
91
end: '2016-10-23'
92
}
93
]
94
},
95
{
96
name: 'Ian Stannard',
97
description: 'Rider',
98
activities: [
99
{
100
name: 'Paris - Tours',
101
start: '2016-10-09',
102
end: '2016-10-09'
103
},
104
{
105
name: 'World Championships',
106
start: '2016-10-16',
107
end: '2016-10-16'
108
}
109
]
110
},
111
{
112
name: 'Lars Petter Nordhaug',
113
description: 'Rider',
114
activities: [
115
{
116
name: 'Paris - Tours',
117
start: '2016-10-09',
118
end: '2016-10-09'
119
},
120
{
121
name: 'Japan Cup',
122
start: '2016-10-23',
123
end: '2016-10-23'
124
}
125
]
126
},
127
{
128
name: 'Nicolas Roche',
129
description: 'Rider',
130
activities: [
131
{
132
name: 'World Championships',
133
start: '2016-10-09',
134
end: '2016-10-09'
135
},
136
{
137
name: 'World Championships',
138
start: '2016-10-12',
139
end: '2016-10-12'
140
},
141
{
142
name: 'Abu Dhabi Tour',
143
start: '2016-10-20',
144
end: '2016-10-23'
145
}
146
]
147
},
148
{
149
name: 'Geraint Thomas',
150
description: 'Rider',
151
activities: [
152
{
153
name: 'World Championships',
154
start: '2016-10-09',
155
end: '2016-10-09'
156
},
157
{
158
name: 'World Championships',
159
start: '2016-10-16',
160
end: '2016-10-16'
161
}
162
]
163
},
164
{
165
name: 'Danny van Poppel',
166
description: 'Rider',
167
activities: [
168
{
169
name: 'World Championships',
170
start: '2016-10-09',
171
end: '2016-10-09'
172
},
173
{
174
name: 'World Championships',
175
start: '2016-10-16',
176
end: '2016-10-16'
177
},
178
{
179
name: 'Abu Dhabi Tour',
180
start: '2016-10-20',
181
end: '2016-10-23'
182
}
183
]
184
},
185
{
186
name: 'David Lopez',
187
description: 'Rider',
188
activities: [
189
{
190
name: 'Japan Cup',
191
start: '2016-10-23',
192
end: '2016-10-23'
193
}
194
]
195
},
196
{
197
name: 'Xabier Zandio',
198
description: 'Rider',
199
activities: [
200
{
201
name: 'Japan Cup',
202
start: '2016-10-23',
203
end: '2016-10-23'
204
}
205
]
206
}
207
];
208
}