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 stage = anychart.graphics.create('container');3
4
var data = getData();5
6
var chart = anychart.resource();7
chart.data(data).zoomLevel(1);8
chart.top('10%');9
chart.title('Convert the global coordinates to local coordinates');10
chart.container(stage);11
chart.draw();12
13
// Converts the global coordinates to local coordinates.14
var localCoordinates = chart.globalToLocal(8, 8);15
16
var rectangle = stage.rect(0, 0, 170, 30);17
rectangle.fill({opacity: 0.1});18
19
rectangle.setX(localCoordinates.x);20
rectangle.setY(localCoordinates.y);21
22
var customText = anychart.graphics.text(localCoordinates.x, localCoordinates.y, "");23
customText.htmlText("Local coordinates [x: "24
+ localCoordinates.x + ", y: " + localCoordinates.y + "]<br>Global coordinates [x: 8, y: 8]");25
customText.parent(stage);26
27
// Visualises local bounds.28
var localBounds = stage.rect();29
localBounds.setBounds(stage.getBounds());30
});31
32
function getData() {33
return [34
{35
name: 'Vasil Kiryienka',36
description: 'Rider',37
activities: [38
{39
name: 'World Championships',40
start: '2016-10-12',41
end: '2016-10-12'42
}43
]44
},45
{46
name: 'Elia Viviani',47
description: 'Rider',48
activities: [49
{50
name: 'Paris - Tours',51
start: '2016-10-09',52
end: '2016-10-09',53
fill: ['#1A237E', '#FFFFFF', '#D50000']54
},55
{56
name: 'World Championships',57
start: '2016-10-16',58
end: '2016-10-16'59
},60
{61
name: 'Abu Dhabi Tour',62
start: '2016-10-20',63
end: '2016-10-23',64
fill: '#FFA000'65
}66
]67
},68
{69
name: 'Ben Swift',70
description: 'Rider',71
activities: [72
{73
name: 'World Championships',74
start: '2016-10-09',75
end: '2016-10-09'76
},77
{78
name: 'World Championships',79
start: '2016-10-16',80
end: '2016-10-16'81
}82
]83
},84
{85
name: 'Michal Kwiatkowski',86
description: 'Rider',87
activities: [88
{89
name: 'World Championships',90
start: '2016-10-09',91
end: '2016-10-09'92
},93
{94
name: 'Abu Dhabi Tour',95
start: '2016-10-20',96
end: '2016-10-23',97
fill: '#FFA000'98
}99
]100
},101
{102
name: 'Alex Peters',103
description: 'Rider',104
activities: [105
{106
name: 'Japan Cup',107
start: '2016-10-23',108
end: '2016-10-23',109
fill: '#EF9A9A'110
}111
]112
},113
{114
name: 'Ian Stannard',115
description: 'Rider',116
activities: [117
{118
name: 'Paris - Tours',119
start: '2016-10-09',120
end: '2016-10-09',121
fill: ['#1A237E', '#FFFFFF', '#D50000']122
},123
{124
name: 'World Championships',125
start: '2016-10-16',126
end: '2016-10-16'127
}128
]129
},130
{131
name: 'Lars Petter Nordhaug',132
description: 'Rider',133
activities: [134
{135
name: 'Paris - Tours',136
start: '2016-10-09',137
end: '2016-10-09',138
fill: ['#1A237E', '#FFFFFF', '#D50000']139
},140
{141
name: 'Japan Cup',142
start: '2016-10-23',143
end: '2016-10-23',144
fill: '#EF9A9A'145
}146
]147
},148
{149
name: 'Nicolas Roche',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-12',160
end: '2016-10-12'161
},162
{163
name: 'Abu Dhabi Tour',164
start: '2016-10-20',165
end: '2016-10-23',166
fill: '#FFA000'167
}168
]169
},170
{171
name: 'Geraint Thomas',172
description: 'Rider',173
activities: [174
{175
name: 'World Championships',176
start: '2016-10-09',177
end: '2016-10-09'178
},179
{180
name: 'World Championships',181
start: '2016-10-16',182
end: '2016-10-16'183
}184
]185
},186
{187
name: 'Danny van Poppel',188
description: 'Rider',189
activities: [190
{191
name: 'World Championships',192
start: '2016-10-09',193
end: '2016-10-09'194
},195
{196
name: 'World Championships',197
start: '2016-10-16',198
end: '2016-10-16'199
},200
{201
name: 'Abu Dhabi Tour',202
start: '2016-10-20',203
end: '2016-10-23',204
fill: '#FFA000'205
}206
]207
},208
{209
name: 'David Lopez',210
description: 'Rider',211
activities: [212
{213
name: 'Japan Cup',214
start: '2016-10-23',215
end: '2016-10-23',216
fill: '#EF9A9A'217
}218
]219
},220
{221
name: 'Xabier Zandio',222
description: 'Rider',223
activities: [224
{225
name: 'Japan Cup',226
start: '2016-10-23',227
end: '2016-10-23',228
fill: '#EF9A9A'229
}230
]231
}232
];233
}