Iframe
HTML with links
ZIP with files
Column Chart
Geo Map
Line Chart
Pie Chart
Stock Chart
From scratchHTMLcopy
1
<div id="container"></div>2
<div style="position: absolute; top: 40px; left: 70%; width: 20%;">3
<input style="margin-bottom: 10px;" type="button" value="getPngBase64String" onclick="getPngBase64String()">4
<textarea style="width: 100%;" rows="5" cols="70" id="getPngBase64String"></textarea>5
</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([0, '45%', 0, 0]);8
chart.title('Returns PNG as base64 string');9
chart.container('container');10
chart.draw();11
});12
13
function getPngBase64String() {14
15
// Get PDF as base64 string.16
chart.getPngBase64String(function (response) {17
var base64String = document.getElementById('getPngBase64String');18
base64String.innerHTML = response;19
});20
}21
22
function getData() {23
return [24
{25
name: 'Vasil Kiryienka',26
description: 'Rider',27
activities: [28
{29
name: 'World Championships',30
start: '2016-10-12',31
end: '2016-10-12'32
}33
]34
},35
{36
name: 'Elia Viviani',37
description: 'Rider',38
activities: [39
{40
name: 'Paris - Tours',41
start: '2016-10-09',42
end: '2016-10-09',43
fill: ['#1A237E', '#FFFFFF', '#D50000']44
},45
{46
name: 'World Championships',47
start: '2016-10-16',48
end: '2016-10-16'49
},50
{51
name: 'Abu Dhabi Tour',52
start: '2016-10-20',53
end: '2016-10-23',54
fill: '#FFA000'55
}56
]57
},58
{59
name: 'Ben Swift',60
description: 'Rider',61
activities: [62
{63
name: 'World Championships',64
start: '2016-10-09',65
end: '2016-10-09'66
},67
{68
name: 'World Championships',69
start: '2016-10-16',70
end: '2016-10-16'71
}72
]73
},74
{75
name: 'Michal Kwiatkowski',76
description: 'Rider',77
activities: [78
{79
name: 'World Championships',80
start: '2016-10-09',81
end: '2016-10-09'82
},83
{84
name: 'Abu Dhabi Tour',85
start: '2016-10-20',86
end: '2016-10-23',87
fill: '#FFA000'88
}89
]90
},91
{92
name: 'Alex Peters',93
description: 'Rider',94
activities: [95
{96
name: 'Japan Cup',97
start: '2016-10-23',98
end: '2016-10-23',99
fill: '#EF9A9A'100
}101
]102
},103
{104
name: 'Ian Stannard',105
description: 'Rider',106
activities: [107
{108
name: 'Paris - Tours',109
start: '2016-10-09',110
end: '2016-10-09',111
fill: ['#1A237E', '#FFFFFF', '#D50000']112
},113
{114
name: 'World Championships',115
start: '2016-10-16',116
end: '2016-10-16'117
}118
]119
},120
{121
name: 'Lars Petter Nordhaug',122
description: 'Rider',123
activities: [124
{125
name: 'Paris - Tours',126
start: '2016-10-09',127
end: '2016-10-09',128
fill: ['#1A237E', '#FFFFFF', '#D50000']129
},130
{131
name: 'Japan Cup',132
start: '2016-10-23',133
end: '2016-10-23',134
fill: '#EF9A9A'135
}136
]137
},138
{139
name: 'Nicolas Roche',140
description: 'Rider',141
activities: [142
{143
name: 'World Championships',144
start: '2016-10-09',145
end: '2016-10-09'146
},147
{148
name: 'World Championships',149
start: '2016-10-12',150
end: '2016-10-12'151
},152
{153
name: 'Abu Dhabi Tour',154
start: '2016-10-20',155
end: '2016-10-23',156
fill: '#FFA000'157
}158
]159
},160
{161
name: 'Geraint Thomas',162
description: 'Rider',163
activities: [164
{165
name: 'World Championships',166
start: '2016-10-09',167
end: '2016-10-09'168
},169
{170
name: 'World Championships',171
start: '2016-10-16',172
end: '2016-10-16'173
}174
]175
},176
{177
name: 'Danny van Poppel',178
description: 'Rider',179
activities: [180
{181
name: 'World Championships',182
start: '2016-10-09',183
end: '2016-10-09'184
},185
{186
name: 'World Championships',187
start: '2016-10-16',188
end: '2016-10-16'189
},190
{191
name: 'Abu Dhabi Tour',192
start: '2016-10-20',193
end: '2016-10-23',194
fill: '#FFA000'195
}196
]197
},198
{199
name: 'David Lopez',200
description: 'Rider',201
activities: [202
{203
name: 'Japan Cup',204
start: '2016-10-23',205
end: '2016-10-23',206
fill: '#EF9A9A'207
}208
]209
},210
{211
name: 'Xabier Zandio',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
}