Iframe
HTML with links
ZIP with files
Column Chart
Geo Map
Line Chart
Pie Chart
Stock Chart
From scratchHTMLcopy
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.data(data).zoomLevel(1);6
chart.title('Click on the chart. You have 3 clicks');7
8
var listenKey = chart.listen('click', customListener);9
10
var counter = 3;11
12
function customListener(e) {13
counter--;14
chart.title('Click on the chart. You have ' + counter + ' clicks');15
if (counter === 0) {16
// Removes event listener by the key.17
chart.unlistenByKey(listenKey);18
chart.title('You have no more clicks');19
}20
}21
22
chart.container('container');23
chart.draw();24
});25
26
function getData() {27
return [28
{29
name: 'Vasil Kiryienka',30
description: 'Rider',31
activities: [32
{33
name: 'World Championships',34
start: '2016-10-12',35
end: '2016-10-12'36
}37
]38
},39
{40
name: 'Elia Viviani',41
description: 'Rider',42
activities: [43
{44
name: 'Paris - Tours',45
start: '2016-10-09',46
end: '2016-10-09',47
fill: ['#1A237E', '#FFFFFF', '#D50000']48
},49
{50
name: 'World Championships',51
start: '2016-10-16',52
end: '2016-10-16'53
},54
{55
name: 'Abu Dhabi Tour',56
start: '2016-10-20',57
end: '2016-10-23',58
fill: '#FFA000'59
}60
]61
},62
{63
name: 'Ben Swift',64
description: 'Rider',65
activities: [66
{67
name: 'World Championships',68
start: '2016-10-09',69
end: '2016-10-09'70
},71
{72
name: 'World Championships',73
start: '2016-10-16',74
end: '2016-10-16'75
}76
]77
},78
{79
name: 'Michal Kwiatkowski',80
description: 'Rider',81
activities: [82
{83
name: 'World Championships',84
start: '2016-10-09',85
end: '2016-10-09'86
},87
{88
name: 'Abu Dhabi Tour',89
start: '2016-10-20',90
end: '2016-10-23',91
fill: '#FFA000'92
}93
]94
},95
{96
name: 'Alex Peters',97
description: 'Rider',98
activities: [99
{100
name: 'Japan Cup',101
start: '2016-10-23',102
end: '2016-10-23',103
fill: '#EF9A9A'104
}105
]106
},107
{108
name: 'Ian Stannard',109
description: 'Rider',110
activities: [111
{112
name: 'Paris - Tours',113
start: '2016-10-09',114
end: '2016-10-09',115
fill: ['#1A237E', '#FFFFFF', '#D50000']116
},117
{118
name: 'World Championships',119
start: '2016-10-16',120
end: '2016-10-16'121
}122
]123
},124
{125
name: 'Lars Petter Nordhaug',126
description: 'Rider',127
activities: [128
{129
name: 'Paris - Tours',130
start: '2016-10-09',131
end: '2016-10-09',132
fill: ['#1A237E', '#FFFFFF', '#D50000']133
},134
{135
name: 'Japan Cup',136
start: '2016-10-23',137
end: '2016-10-23',138
fill: '#EF9A9A'139
}140
]141
},142
{143
name: 'Nicolas Roche',144
description: 'Rider',145
activities: [146
{147
name: 'World Championships',148
start: '2016-10-09',149
end: '2016-10-09'150
},151
{152
name: 'World Championships',153
start: '2016-10-12',154
end: '2016-10-12'155
},156
{157
name: 'Abu Dhabi Tour',158
start: '2016-10-20',159
end: '2016-10-23',160
fill: '#FFA000'161
}162
]163
},164
{165
name: 'Geraint Thomas',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
},180
{181
name: 'Danny van Poppel',182
description: 'Rider',183
activities: [184
{185
name: 'World Championships',186
start: '2016-10-09',187
end: '2016-10-09'188
},189
{190
name: 'World Championships',191
start: '2016-10-16',192
end: '2016-10-16'193
},194
{195
name: 'Abu Dhabi Tour',196
start: '2016-10-20',197
end: '2016-10-23',198
fill: '#FFA000'199
}200
]201
},202
{203
name: 'David Lopez',204
description: 'Rider',205
activities: [206
{207
name: 'Japan Cup',208
start: '2016-10-23',209
end: '2016-10-23',210
fill: '#EF9A9A'211
}212
]213
},214
{215
name: 'Xabier Zandio',216
description: 'Rider',217
activities: [218
{219
name: 'Japan Cup',220
start: '2016-10-23',221
end: '2016-10-23',222
fill: '#EF9A9A'223
}224
]225
}226
];227
}