Iframe
HTML with links
ZIP with files
Column Chart
Geo Map
Line Chart
Pie Chart
Stock Chart
From scratchHTMLcopy
1
<button onclick="label();">Apply changes (add labels)</button>2
<button onclick="autoRedraw();">Draw changes on the chart</button>3
<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
var chart;2
anychart.onDocumentReady(function () {3
var data = getData();4
5
chart = anychart.resource();6
chart.data(data).zoomLevel(1);7
chart.margin().left('15%');8
chart.title('Disable redrawing of the chart after the changes. \n Use the buttons to apply the changes and draw them');9
chart.container('container');10
chart.draw();11
12
// Disable chart redrawing.13
chart.autoRedraw(false);14
});15
16
function autoRedraw() {17
18
// Enable chart redrawing.19
chart.autoRedraw(true);20
}21
22
var counter = 0;23
24
function label() {25
chart.label(counter++, {enabled: true, offsetY: 10 * counter++, fontWeight: 600, fontColor: 'rgba(' + Math.floor(Math.random() * 130).toString(10) + ','26
+ Math.floor(Math.random() * 140).toString(10) + ','27
+ Math.floor(Math.random() * 150).toString(10) + ')'});28
}29
30
function getData() {31
return [32
{33
name: 'Vasil Kiryienka',34
description: 'Rider',35
activities: [36
{37
name: 'World Championships',38
start: '2016-10-12',39
end: '2016-10-12'40
}41
]42
},43
{44
name: 'Elia Viviani',45
description: 'Rider',46
activities: [47
{48
name: 'Paris - Tours',49
start: '2016-10-09',50
end: '2016-10-09',51
fill: ['#1A237E', '#FFFFFF', '#D50000']52
},53
{54
name: 'World Championships',55
start: '2016-10-16',56
end: '2016-10-16'57
},58
{59
name: 'Abu Dhabi Tour',60
start: '2016-10-20',61
end: '2016-10-23',62
fill: '#FFA000'63
}64
]65
},66
{67
name: 'Ben Swift',68
description: 'Rider',69
activities: [70
{71
name: 'World Championships',72
start: '2016-10-09',73
end: '2016-10-09'74
},75
{76
name: 'World Championships',77
start: '2016-10-16',78
end: '2016-10-16'79
}80
]81
},82
{83
name: 'Michal Kwiatkowski',84
description: 'Rider',85
activities: [86
{87
name: 'World Championships',88
start: '2016-10-09',89
end: '2016-10-09'90
},91
{92
name: 'Abu Dhabi Tour',93
start: '2016-10-20',94
end: '2016-10-23',95
fill: '#FFA000'96
}97
]98
},99
{100
name: 'Alex Peters',101
description: 'Rider',102
activities: [103
{104
name: 'Japan Cup',105
start: '2016-10-23',106
end: '2016-10-23',107
fill: '#EF9A9A'108
}109
]110
},111
{112
name: 'Ian Stannard',113
description: 'Rider',114
activities: [115
{116
name: 'Paris - Tours',117
start: '2016-10-09',118
end: '2016-10-09',119
fill: ['#1A237E', '#FFFFFF', '#D50000']120
},121
{122
name: 'World Championships',123
start: '2016-10-16',124
end: '2016-10-16'125
}126
]127
},128
{129
name: 'Lars Petter Nordhaug',130
description: 'Rider',131
activities: [132
{133
name: 'Paris - Tours',134
start: '2016-10-09',135
end: '2016-10-09',136
fill: ['#1A237E', '#FFFFFF', '#D50000']137
},138
{139
name: 'Japan Cup',140
start: '2016-10-23',141
end: '2016-10-23',142
fill: '#EF9A9A'143
}144
]145
},146
{147
name: 'Nicolas Roche',148
description: 'Rider',149
activities: [150
{151
name: 'World Championships',152
start: '2016-10-09',153
end: '2016-10-09'154
},155
{156
name: 'World Championships',157
start: '2016-10-12',158
end: '2016-10-12'159
},160
{161
name: 'Abu Dhabi Tour',162
start: '2016-10-20',163
end: '2016-10-23',164
fill: '#FFA000'165
}166
]167
},168
{169
name: 'Geraint Thomas',170
description: 'Rider',171
activities: [172
{173
name: 'World Championships',174
start: '2016-10-09',175
end: '2016-10-09'176
},177
{178
name: 'World Championships',179
start: '2016-10-16',180
end: '2016-10-16'181
}182
]183
},184
{185
name: 'Danny van Poppel',186
description: 'Rider',187
activities: [188
{189
name: 'World Championships',190
start: '2016-10-09',191
end: '2016-10-09'192
},193
{194
name: 'World Championships',195
start: '2016-10-16',196
end: '2016-10-16'197
},198
{199
name: 'Abu Dhabi Tour',200
start: '2016-10-20',201
end: '2016-10-23',202
fill: '#FFA000'203
}204
]205
},206
{207
name: 'David Lopez',208
description: 'Rider',209
activities: [210
{211
name: 'Japan Cup',212
start: '2016-10-23',213
end: '2016-10-23',214
fill: '#EF9A9A'215
}216
]217
},218
{219
name: 'Xabier Zandio',220
description: 'Rider',221
activities: [222
{223
name: 'Japan Cup',224
start: '2016-10-23',225
end: '2016-10-23',226
fill: '#EF9A9A'227
}228
]229
}230
];231
}