HTMLcopy
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
3
// data
4
var data = [
5
{x: "Chocolate paste", value: 5},
6
{x: "White honey", value: 2},
7
{x: "Strawberry jam", value: 2},
8
{x: "Condensed milk", value: 1}
9
];
10
11
// set chart type
12
var chart = anychart.column(data);
13
14
// set chart title
15
chart.title("Export data sample");
16
17
// set chart container
18
chart.container("container");
19
20
// set chart bounds
21
chart.bounds(0, 0, chart.container().width()-35, chart.container().height());
22
23
// initiate chart drawing
24
chart.draw();
25
26
// create new buttons
27
var csvButton = document.createElement("div");
28
var xlsxButton = document.createElement("div");
29
30
csvButton.className = "custombutton";
31
xlsxButton.className = "custombutton";
32
33
csvButton.innerHTML = "CSV";
34
xlsxButton.innerHTML = "XLSX";
35
36
csvButton.onclick = function() {
37
chart.saveAsCsv();
38
};
39
xlsxButton.onclick = function() {
40
chart.saveAsXlsx();
41
};
42
43
// append button to container
44
container.appendChild(csvButton);
45
container.appendChild(xlsxButton);
46
47
var custombuttons = document.getElementsByClassName("custombutton");
48
49
// set style for all buttons
50
for (var i = 0; i<custombuttons.length; i++){
51
// set button style
52
custombuttons[i].style.top = 45*i + "px";
53
custombuttons[i].style.right = "5px";
54
custombuttons[i].style.width = "50px";
55
custombuttons[i].style.height = "auto";
56
custombuttons[i].style.backgroundColor = "#444444";
57
custombuttons[i].style.color = "white";
58
custombuttons[i].style.fontFamily = chart.title().fontFamily();
59
custombuttons[i].style.position = "absolute";
60
custombuttons[i].style.zIndex = 2;
61
custombuttons[i].style.transition = "0.5s";
62
custombuttons[i].style.textAlign = "center";
63
custombuttons[i].style.border = "3px solid #444444";
64
custombuttons[i].style.borderRadius = "7px 7px 7px 7px";
65
custombuttons[i].style.fontSize = "18px";
66
custombuttons[i].style.cursor = "pointer";
67
}
68
});