Skip to content

Commit f4afff7

Browse files
vishwas-rvishwas-r
authored
Added exportAsJSON method
1 parent 52768b6 commit f4afff7

File tree

1 file changed

+98
-76
lines changed

1 file changed

+98
-76
lines changed

‎src/CanvasJS Data As JSON.js‎

Lines changed: 98 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,81 +1,103 @@
1-
function CanvasJSDataAsJSON(chart, fileName) {
2-
var toolBar = document.getElementsByClassName("canvasjs-chart-toolbar")[0];
3-
if (chart.options.exportEnabled) {
4-
var exportJSON = document.createElement('div');
5-
var text = document.createTextNode("Save as JSON");
6-
exportJSON.setAttribute("style", "padding: 12px 8px; background-color: white; color: black")
7-
exportJSON.appendChild(text);
8-
exportJSON.addEventListener("mouseover", function() {
9-
exportJSON.setAttribute("style", "padding: 12px 8px; background-color: #2196F3; color: white")
10-
});
11-
exportJSON.addEventListener("mouseout", function() {
12-
exportJSON.setAttribute("style", "padding: 12px 8px; background-color: white; color: black")
13-
});
14-
exportJSON.addEventListener("click", function() {
15-
parseJSON({
16-
filename: (fileName || "chart-data") + ".json",
17-
chart: chart
18-
})
19-
});
20-
21-
toolBar.lastChild.appendChild(exportJSON);
22-
} else {
23-
var base64Img = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAB3RJTUUH4wISBxkv6UqNPAAAABN0RVh0U29mdHdhcmUAUGhvdG9TY2FwZYB1kb8AAAFMSURBVDhP3dM7LwVBGMbxiUvE/VpqJKIQhdAplKg4CQoF30JCpdAqSHwBLaFW6IWGIBKFOAp3CSHRkPB/ZncnY8+cwxEaT/LLzszOO3ubNf82ZRiMmr+XY6yiwvYCaUd3Sh864acBXTjEO7bRBhddYQWv0ARfFr1QhrCBW6TnXWMANpqUniCbqEcl9GihOWnTcJ0HTGIcw1CacAS/qJAXuM6FOl5KsAO/oJAD6N26gStUayDOLPwC0R2cYh/P8ZisoRY2yaC/YB3ukZzTex5FK7QHlT3o3JzteQktmIHGdqGtE8oWpqKmaUFV1AwvuIx1lNtebkrRGDXNCE7QbHsktGBPfPwqE1DtE3Lu8BJ5f6M8WUJS6z5osqDuUL+VHvO7FqDaG9TA5g4afMM5zorwCNVqD+sCNv3wt8hPzOBTOjAPfd1iLGIMfxVjPgAX3Z+XV+s1aQAAAABJRU5ErkJggg==";
24-
var exportButton = document.createElement('button');
25-
var chartBound = chart.container.getBoundingClientRect();
1+
(function () {
2+
var CanvasJS = window.CanvasJS || CanvasJS ? window.CanvasJS : null;
3+
if (CanvasJS) {
4+
CanvasJS.Chart.prototype.exportAsJSON = function (fileName) {
5+
CanvasJSDataAsJSON(this, fileName);
6+
}
7+
}
268

27-
exportButton.style.cssText = "position:relative;display: inline-block;padding: 0px 4px;width: 35px;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";
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-
parseJSON({
39-
filename: (fileName || "chart-data") + ".json",
40-
chart: chart
41-
})
42-
});
9+
function CanvasJSDataAsJSON(chart, fileName) {
10+
if (chart.options.exportEnabled) {
11+
var exportJSON = document.createElement('div');
12+
var text = document.createTextNode("Save as JSON");
13+
exportJSON.setAttribute("style", "padding: 12px 8px; background-color: white; color: black")
14+
exportJSON.appendChild(text);
15+
exportJSON.addEventListener("mouseover", function () {
16+
exportJSON.setAttribute("style", "padding: 12px 8px; background-color: #2196F3; color: white")
17+
});
18+
exportJSON.addEventListener("mouseout", function () {
19+
exportJSON.setAttribute("style", "padding: 12px 8px; background-color: white; color: black")
20+
});
21+
exportJSON.addEventListener("click", function () {
22+
parseJSON({
23+
filename: (fileName || "chart-data") + ".json",
24+
chart: chart
25+
})
26+
});
4327

44-
chart.container.appendChild(exportButton);
45-
}
46-
};
28+
chart._toolBar.lastChild.appendChild(exportJSON);
29+
} else {
30+
var base64Img = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAB3RJTUUH4wISBxkv6UqNPAAAABN0RVh0U29mdHdhcmUAUGhvdG9TY2FwZYB1kb8AAAFMSURBVDhP3dM7LwVBGMbxiUvE/VpqJKIQhdAplKg4CQoF30JCpdAqSHwBLaFW6IWGIBKFOAp3CSHRkPB/ZncnY8+cwxEaT/LLzszOO3ubNf82ZRiMmr+XY6yiwvYCaUd3Sh864acBXTjEO7bRBhddYQWv0ARfFr1QhrCBW6TnXWMANpqUniCbqEcl9GihOWnTcJ0HTGIcw1CacAS/qJAXuM6FOl5KsAO/oJAD6N26gStUayDOLPwC0R2cYh/P8ZisoRY2yaC/YB3ukZzTex5FK7QHlT3o3JzteQktmIHGdqGtE8oWpqKmaUFV1AwvuIx1lNtebkrRGDXNCE7QbHsktGBPfPwqE1DtE3Lu8BJ5f6M8WUJS6z5osqDuUL+VHvO7FqDaG9TA5g4afMM5zorwCNVqD+sCNv3wt8hPzOBTOjAPfd1iLGIMfxVjPgAX3Z+XV+s1aQAAAABJRU5ErkJggg==";
31+
var exportButton = document.createElement('button');
32+
var chartBound = chart.container.getBoundingClientRect();
4733

48-
function convertChartDataToJSON(args) {
49-
var result, data;
50-
data = args.data || null;
51-
52-
if (data == null || !data.length) {
53-
return null;
54-
}
55-
56-
result = JSON.stringify(data);
57-
return result;
58-
}
34+
exportButton.style.cssText = "position:relative;display: inline-block;padding: 0px 4px;width: 35px;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";
35+
var img = document.createElement("IMG");
36+
img.setAttribute("src", base64Img);
37+
exportButton.appendChild(img);
38+
exportButton.addEventListener("mouseover", function () {
39+
this.style.cssText = this.style.cssText + "background-color: rgb(33, 150, 243)";
40+
});
41+
exportButton.addEventListener("mouseout", function () {
42+
this.style.cssText = this.style.cssText + "background-color: #fff;";
43+
});
44+
exportButton.addEventListener("click", function () {
45+
parseJSON({
46+
filename: (fileName || "chart-data") + ".json",
47+
chart: chart
48+
})
49+
});
5950

60-
function parseJSON(args) {
61-
var filename;
62-
var jsonData;
63-
jsonData = convertChartDataToJSON(args.chart.options);
64-
65-
if (jsonData == null) return;
66-
filename = args.filename || 'chart-data.json';
67-
if (!jsonData.match(/^application:json/i)) {
68-
jsonData = 'data:text/json;charset=utf-8,' + jsonData;
69-
}
70-
downloadFile(jsonData, filename);
71-
}
51+
chart.container.appendChild(exportButton);
52+
}
53+
};
7254

73-
function downloadFile(extData, filename){
74-
var data = encodeURI(extData);
75-
var link = document.createElement('a');
76-
link.setAttribute('href', data);
77-
link.setAttribute('download', filename);
78-
document.body.appendChild(link); // Required for FF
79-
link.click();
80-
document.body.removeChild(link);
81-
}
55+
function convertChartDataToJSON(args) {
56+
var result, data;
57+
data = args.data || null;
58+
59+
if (data == null || !data.length) {
60+
return null;
61+
}
62+
63+
result = JSON.stringify(data);
64+
return result;
65+
}
66+
67+
function parseJSON(args) {
68+
var filename;
69+
var jsonData;
70+
jsonData = convertChartDataToJSON(args.chart.options);
71+
72+
if (jsonData == null) return;
73+
filename = args.filename || 'chart-data.json';
74+
if (!jsonData.match(/^application:json/i)) {
75+
jsonData = 'data:text/json;charset=utf-8,' + jsonData;
76+
}
77+
downloadFile(jsonData, filename);
78+
}
79+
80+
function downloadFile(extData, filename) {
81+
var data = encodeURI(extData);
82+
var link = document.createElement('a');
83+
link.setAttribute('href', data);
84+
link.setAttribute('download', filename);
85+
document.body.appendChild(link); // Required for FF
86+
link.click();
87+
document.body.removeChild(link);
88+
}
89+
90+
if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
91+
module.exports = CanvasJSDataAsJSON;
92+
}
93+
else {
94+
if (typeof define === 'function' && define.amd) {
95+
define([], function () {
96+
return CanvasJSDataAsJSON;
97+
});
98+
}
99+
else {
100+
window.CanvasJSDataAsJSON = CanvasJSDataAsJSON;
101+
}
102+
}
103+
})();

0 commit comments

Comments
 (0)