Skip to content

Commit f450d4b

Browse files
vishwas-rvishwas-r
authored
Added logic to integrate with React, Angular, etc
1 parent 78a5b3a commit f450d4b

File tree

1 file changed

+114
-91
lines changed

1 file changed

+114
-91
lines changed

‎src/CanvasJS As CSV.js‎

Lines changed: 114 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -1,95 +1,118 @@
1-
function CanvasJSDataAsCSV(chart, fileName) {
2-
var toolBar = document.getElementsByClassName("canvasjs-chart-toolbar")[0];
3-
if (chart.options.exportEnabled) {
4-
var exportCSV = document.createElement('div');
5-
var text = document.createTextNode("Save as CSV");
6-
exportCSV.setAttribute("style", "padding: 12px 8px; background-color: white; color: black")
7-
exportCSV.appendChild(text);
8-
exportCSV.addEventListener("mouseover", function() {
9-
exportCSV.setAttribute("style", "padding: 12px 8px; background-color: #2196F3; color: white")
10-
});
11-
exportCSV.addEventListener("mouseout", function() {
12-
exportCSV.setAttribute("style", "padding: 12px 8px; background-color: white; color: black")
13-
});
14-
exportCSV.addEventListener("click", function() {
15-
parseCSV({
16-
filename: (fileName || "chart-data") + ".csv",
17-
chart: chart
18-
})
19-
});
20-
21-
toolBar.lastChild.appendChild(exportCSV);
22-
} else {
23-
var base64Img = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAEgSURBVEhL3dM/SgNBFMfxBS8gWkYb0dJSyBGCwdIzRPAKgrZKINdIkVJB0qqteIdYCYoHEPX74P1gMszuzG5SiD/4wM6/99jJpvq3GeIVPwUu0ToLpIrVad1EB3Pp3KRLA1PcRAdyCYtLURNtziUsHMqmeGOUxnNtPs2cZNp+mk2S0eIteu7O5y5wgFN8Yw8vePZnnZVktLiDJzxi1+cOfe4GHxhhgjHOoLOSTLgYbjZz7OPaxzOc4Nif4/3JaNHe4MHpDc7xiW284R1b2IS9ka61MWpg925NrPi9z9mfx65pgC+fO0Lfn21/Nqt8RUo8XordZ9cmSjyuTfHGKH+nQe6qptiA5QqpPcbWkin5PXJNaot3Tdhk7cUVKxwUr6pfwprgQh4A9MYAAAAASUVORK5CYII=";
24-
var exportButton = document.createElement('button');
25-
26-
exportButton.style.cssText = "position:relative;display: inline-block;padding: 0px 4px;height: 27px;cursor: pointer;text-align: center;text-decoration: none;background-color: #fff;border: 1px solid rgb(33, 150, 243);left:" + (chart.container.clientWidth - (chart.options.zoomEnabled ? 115 : 60)) + "px; top: 1px";
27-
28-
var img = document.createElement("IMG");
29-
img.setAttribute("src", base64Img);
30-
exportButton.appendChild(img);
31-
exportButton.addEventListener("mouseover", function() {
32-
this.style.cssText = this.style.cssText + "background-color: rgb(33, 150, 243)";
33-
});
34-
exportButton.addEventListener("mouseout", function() {
35-
this.style.cssText = this.style.cssText + "background-color: #fff;";
36-
});
37-
exportButton.addEventListener("click", function() {
38-
parseCSV({
39-
filename: (fileName || "chart-data") + ".csv",
40-
chart: chart
41-
})
42-
});
1+
(function () {
2+
var CanvasJS = window.CanvasJS || CanvasJS ? window.CanvasJS : null;
3+
if (CanvasJS) {
4+
CanvasJS.Chart.prototype.exportAsCSV = function (fileName) {
5+
CanvasJSDataAsCSV(this, fileName);
6+
}
7+
}
438

44-
chart.container.appendChild(exportButton);
45-
}
46-
}
9+
function CanvasJSDataAsCSV(chart, fileName) {
10+
if (chart.exportEnabled) {
11+
var exportCSV = document.createElement('div');
12+
var text = document.createTextNode("Save as CSV");
13+
console.log(chart)
14+
exportCSV.setAttribute("style", "padding: 12px 8px; background-color: white; color: black")
15+
exportCSV.appendChild(text);
16+
exportCSV.addEventListener("mouseover", function () {
17+
exportCSV.setAttribute("style", "padding: 12px 8px; background-color: #2196F3; color: white")
18+
});
19+
exportCSV.addEventListener("mouseout", function () {
20+
exportCSV.setAttribute("style", "padding: 12px 8px; background-color: white; color: black")
21+
});
22+
exportCSV.addEventListener("click", function () {
23+
parseCSV({
24+
filename: (fileName || "chart-data") + ".csv",
25+
chart: chart
26+
})
27+
});
4728

48-
function convertChartDataToCSV(args) {
49-
var result, ctr, keys, columnDelimiter, lineDelimiter, data;
50-
data = args.data || null;
51-
if (data == null || !data.length) {
52-
return null;
53-
}
54-
columnDelimiter = args.columnDelimiter || ',';
55-
lineDelimiter = args.lineDelimiter || '\n';
56-
keys = Object.keys(data[0]);
57-
result = '';
58-
result += keys.join(columnDelimiter);
59-
result += lineDelimiter;
60-
data.forEach(function(item) {
61-
ctr = 0;
62-
keys.forEach(function(key) {
63-
if (ctr > 0) result += columnDelimiter;
64-
result += (!(typeof item[key] === 'undefined' || item[key] === null) ? item[key] : "");
65-
ctr++;
66-
});
67-
result += lineDelimiter;
68-
});
69-
return result;
70-
}
29+
chart._toolBar.lastChild.appendChild(exportCSV);
30+
} else {
31+
var base64Img = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAEgSURBVEhL3dM/SgNBFMfxBS8gWkYb0dJSyBGCwdIzRPAKgrZKINdIkVJB0qqteIdYCYoHEPX74P1gMszuzG5SiD/4wM6/99jJpvq3GeIVPwUu0ToLpIrVad1EB3Pp3KRLA1PcRAdyCYtLURNtziUsHMqmeGOUxnNtPs2cZNp+mk2S0eIteu7O5y5wgFN8Yw8vePZnnZVktLiDJzxi1+cOfe4GHxhhgjHOoLOSTLgYbjZz7OPaxzOc4Nif4/3JaNHe4MHpDc7xiW284R1b2IS9ka61MWpg925NrPi9z9mfx65pgC+fO0Lfn21/Nqt8RUo8XordZ9cmSjyuTfHGKH+nQe6qptiA5QqpPcbWkin5PXJNaot3Tdhk7cUVKxwUr6pfwprgQh4A9MYAAAAASUVORK5CYII=";
32+
var exportButton = document.createElement('button');
7133

72-
function parseCSV(args) {
73-
var csv = "";
74-
for (var i = 0; i < args.chart.options.data.length; i++) {
75-
csv += convertChartDataToCSV({
76-
data: args.chart.options.data[i].dataPoints
77-
});
78-
}
79-
if (csv == null) return;
80-
var filename = args.filename || 'chart-data.csv';
81-
if (!csv.match(/^data:text\/csv/i)) {
82-
csv = 'data:text/csv;charset=utf-8,' + csv;
83-
}
84-
downloadFile(csv, filename);
85-
}
34+
exportButton.style.cssText = "position:relative;display: inline-block;padding: 0px 4px;height: 27px;cursor: pointer;text-align: center;text-decoration: none;background-color: #fff;border: 1px solid rgb(33, 150, 243);left:" + (chart.container.clientWidth - (chart.options.zoomEnabled ? 115 : 60)) + "px; top: 1px";
8635

87-
function downloadFile(extData, filename){
88-
var data = encodeURI(extData);
89-
var link = document.createElement('a');
90-
link.setAttribute('href', data);
91-
link.setAttribute('download', filename);
92-
document.body.appendChild(link); // Required for FF
93-
link.click();
94-
document.body.removeChild(link);
95-
}
36+
var img = document.createElement("IMG");
37+
img.setAttribute("src", base64Img);
38+
exportButton.appendChild(img);
39+
exportButton.addEventListener("mouseover", function () {
40+
this.style.cssText = this.style.cssText + "background-color: rgb(33, 150, 243)";
41+
});
42+
exportButton.addEventListener("mouseout", function () {
43+
this.style.cssText = this.style.cssText + "background-color: #fff;";
44+
});
45+
exportButton.addEventListener("click", function () {
46+
parseCSV({
47+
filename: (fileName || "chart-data") + ".csv",
48+
chart: chart
49+
})
50+
});
51+
52+
chart.container.appendChild(exportButton);
53+
}
54+
}
55+
56+
function convertChartDataToCSV(args) {
57+
var result, ctr, keys, columnDelimiter, lineDelimiter, data;
58+
data = args.data || null;
59+
if (data == null || !data.length) {
60+
return null;
61+
}
62+
columnDelimiter = args.columnDelimiter || ',';
63+
lineDelimiter = args.lineDelimiter || '\n';
64+
keys = Object.keys(data[0]);
65+
result = '';
66+
result += keys.join(columnDelimiter);
67+
result += lineDelimiter;
68+
data.forEach(function (item) {
69+
ctr = 0;
70+
keys.forEach(function (key) {
71+
if (ctr > 0) result += columnDelimiter;
72+
result += (!(typeof item[key] === 'undefined' || item[key] === null) ? item[key] : "");
73+
ctr++;
74+
});
75+
result += lineDelimiter;
76+
});
77+
return result;
78+
}
79+
80+
function parseCSV(args) {
81+
var csv = "";
82+
for (var i = 0; i < args.chart.options.data.length; i++) {
83+
csv += convertChartDataToCSV({
84+
data: args.chart.options.data[i].dataPoints
85+
});
86+
}
87+
if (csv == null) return;
88+
var filename = args.filename || 'chart-data.csv';
89+
if (!csv.match(/^data:text\/csv/i)) {
90+
csv = 'data:text/csv;charset=utf-8,' + csv;
91+
}
92+
downloadFile(csv, filename);
93+
}
94+
95+
function downloadFile(extData, filename) {
96+
var data = encodeURI(extData);
97+
var link = document.createElement('a');
98+
link.setAttribute('href', data);
99+
link.setAttribute('download', filename);
100+
document.body.appendChild(link); // Required for FF
101+
link.click();
102+
document.body.removeChild(link);
103+
}
104+
105+
if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
106+
module.exports = CanvasJSDataAsCSV;
107+
}
108+
else {
109+
if (typeof define === 'function' && define.amd) {
110+
define([], function () {
111+
return CanvasJSDataAsCSV;
112+
});
113+
}
114+
else {
115+
window.CanvasJSDataAsCSV = CanvasJSDataAsCSV;
116+
}
117+
}
118+
})();

0 commit comments

Comments
 (0)