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
// To change the way how context menu looks you need to change CSS.3
// By default CSS from AnyChart CDN is used: https://cdn.anychart.com/releases/8.13.0/css/anychart-ui.min.css4
// Download it, alter, upload to your server and link from your pages to change the look.5
6
var data = getData();7
8
var chart = anychart.resource();9
chart.data(data).zoomLevel(1);10
11
// Get context menu.12
var contextMenu = chart.contextMenu();13
14
contextMenu.itemsFormatter(function (items) {15
16
items['custom-item'] = {17
index: 1000,18
text: 'Custom Context Menu Item',19
action: actionHandler20
};21
22
return items;23
});24
25
function actionHandler() {26
alert('Custom Item Clicked');27
}28
29
chart.title('Get and modify context menu. Right-click on the chart');30
chart.container('container');31
chart.draw();32
});33
34
function getData() {35
return [36
{37
name: 'Vasil Kiryienka',38
description: 'Rider',39
activities: [40
{41
name: 'World Championships',42
start: '2016-10-12',43
end: '2016-10-12'44
}45
]46
},47
{48
name: 'Elia Viviani',49
description: 'Rider',50
activities: [51
{52
name: 'Paris - Tours',53
start: '2016-10-09',54
end: '2016-10-09',55
fill: ['#1A237E', '#FFFFFF', '#D50000']56
},57
{58
name: 'World Championships',59
start: '2016-10-16',60
end: '2016-10-16'61
},62
{63
name: 'Abu Dhabi Tour',64
start: '2016-10-20',65
end: '2016-10-23',66
fill: '#FFA000'67
}68
]69
},70
{71
name: 'Ben Swift',72
description: 'Rider',73
activities: [74
{75
name: 'World Championships',76
start: '2016-10-09',77
end: '2016-10-09'78
},79
{80
name: 'World Championships',81
start: '2016-10-16',82
end: '2016-10-16'83
}84
]85
},86
{87
name: 'Michal Kwiatkowski',88
description: 'Rider',89
activities: [90
{91
name: 'World Championships',92
start: '2016-10-09',93
end: '2016-10-09'94
},95
{96
name: 'Abu Dhabi Tour',97
start: '2016-10-20',98
end: '2016-10-23',99
fill: '#FFA000'100
}101
]102
},103
{104
name: 'Alex Peters',105
description: 'Rider',106
activities: [107
{108
name: 'Japan Cup',109
start: '2016-10-23',110
end: '2016-10-23',111
fill: '#EF9A9A'112
}113
]114
},115
{116
name: 'Ian Stannard',117
description: 'Rider',118
activities: [119
{120
name: 'Paris - Tours',121
start: '2016-10-09',122
end: '2016-10-09',123
fill: ['#1A237E', '#FFFFFF', '#D50000']124
},125
{126
name: 'World Championships',127
start: '2016-10-16',128
end: '2016-10-16'129
}130
]131
},132
{133
name: 'Lars Petter Nordhaug',134
description: 'Rider',135
activities: [136
{137
name: 'Paris - Tours',138
start: '2016-10-09',139
end: '2016-10-09',140
fill: ['#1A237E', '#FFFFFF', '#D50000']141
},142
{143
name: 'Japan Cup',144
start: '2016-10-23',145
end: '2016-10-23',146
fill: '#EF9A9A'147
}148
]149
},150
{151
name: 'Nicolas Roche',152
description: 'Rider',153
activities: [154
{155
name: 'World Championships',156
start: '2016-10-09',157
end: '2016-10-09'158
},159
{160
name: 'World Championships',161
start: '2016-10-12',162
end: '2016-10-12'163
},164
{165
name: 'Abu Dhabi Tour',166
start: '2016-10-20',167
end: '2016-10-23',168
fill: '#FFA000'169
}170
]171
},172
{173
name: 'Geraint Thomas',174
description: 'Rider',175
activities: [176
{177
name: 'World Championships',178
start: '2016-10-09',179
end: '2016-10-09'180
},181
{182
name: 'World Championships',183
start: '2016-10-16',184
end: '2016-10-16'185
}186
]187
},188
{189
name: 'Danny van Poppel',190
description: 'Rider',191
activities: [192
{193
name: 'World Championships',194
start: '2016-10-09',195
end: '2016-10-09'196
},197
{198
name: 'World Championships',199
start: '2016-10-16',200
end: '2016-10-16'201
},202
{203
name: 'Abu Dhabi Tour',204
start: '2016-10-20',205
end: '2016-10-23',206
fill: '#FFA000'207
}208
]209
},210
{211
name: 'David Lopez',212
description: 'Rider',213
activities: [214
{215
name: 'Japan Cup',216
start: '2016-10-23',217
end: '2016-10-23',218
fill: '#EF9A9A'219
}220
]221
},222
{223
name: 'Xabier Zandio',224
description: 'Rider',225
activities: [226
{227
name: 'Japan Cup',228
start: '2016-10-23',229
end: '2016-10-23',230
fill: '#EF9A9A'231
}232
]233
}234
];235
}