-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
161 lines (152 loc) · 3.68 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<html>
<head>
<style>
body {
width: 75%;
margin: auto;
}
</style>
<script type="text/javascript">
window.onload = function() {
var chart1 = new CanvasJS.Chart("chartContainer1", {
theme: "light2", // "light1", "dark1", "dark2"
animationEnabled: true,
exportEnabled: true,
title: {
text: "Export Chart Data as CSV"
},
subtitles: [{
text: "When exportEnabled is set to true"
}],
data: [{
// Change type to "bar", "area", "spline", "pie",etc.
type: "column",
dataPoints: [{
label: "apple",
y: 10
}, {
label: "orange",
y: 15
}, {
label: "banana",
y: 25
}, {
label: "mango",
y: 30
}, {
label: "grape",
y: 28
}]
}]
});
var chart2 = new CanvasJS.Chart("chartContainer2", {
theme: "light2", // "light1", "dark1", "dark2"
animationEnabled: true,
exportEnabled: true,
title: {
text: "Exporting Multi-Series Chart Data as CSV"
},
data: [{
type: "line",
dataPoints: [
{ x: 10, y: 21 },
{ x: 20, y: 25 },
{ x: 30, y: 20 },
{ x: 40, y: 25 },
{ x: 50, y: 27 },
{ x: 60, y: 28 },
{ x: 70, y: 28 },
{ x: 80, y: 24 },
{ x: 90, y: 26 }
]
}, {
type: "line",
dataPoints: [
{ x: 10, y: 31 },
{ x: 20, y: 35 },
{ x: 30, y: 30 },
{ x: 40, y: 35 },
{ x: 50, y: 35 },
{ x: 60, y: 38 },
{ x: 70, y: 38 },
{ x: 80, y: 34 },
{ x: 90, y: 44 }
]
}, {
type: "line",
dataPoints: [
{ x: 10, y: 45 },
{ x: 20, y: 50 },
{ x: 30, y: 40 },
{ x: 40, y: 45 },
{ x: 50, y: 45 },
{ x: 60, y: 48 },
{ x: 70, y: 43 },
{ x: 80, y: 41 },
{ x: 90, y: 28 }
]
}, {
type: "line",
dataPoints: [
{ x: 10, y: 71 },
{ x: 20, y: 55 },
{ x: 30, y: 50 },
{ x: 40, y: 65 },
{ x: 50, y: 95 },
{ x: 60, y: 68 },
{ x: 70, y: 28 },
{ x: 80, y: 34 },
{ x: 90, y: 14 }
]
}]
});
chart1.render();
chart2.render();
}
</script>
</head>
<body>
<h1 id="exportcanvasjschartdataascsv">Export CanvasJS Chart Data as CSV</h1>
<p>This plugin allows you to export and save <a href="https://canvasjs.com/" target="_blank">CanvasJS</a> Chart's data as CSV. Check out <a href="https://github.com/vishwas-r/Export-CanvasJS-Chart-Data-as-CSV">Github Repository</a> for more info / examples.</p>
<h4 id="howtouse">How to Use?</h4>
<h5>Import the Script</h5>
<pre><code>/* HTML Script Tag */
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/export-canvasjs-chart-data-as-csv/dist/canvasjsascsv.min.js"></script>
/* or */
import CanvasJS from './canvasjs.min';
window.CanvasJS = CanvasJS;
require('export-canvasjs-chart-data-as-csv');
/* React */
import CanvasJSReact from './canvasjs.react';
window.CanvasJS = CanvasJSReact.CanvasJS;
require('export-canvasjs-chart-data-as-csv');
</code></pre>
<h5>Enable Export & Render the Chart</h5>
<ul>
<li>Enable Exporting by passing exportEnabled property as true.</li>
<li>Render the Chart.</li>
</ul>
<pre><code>var chart = new CanvasJS.Chart("chartContainer", {
.
.
.
exportEnabled: true,
//Chart Options
.
.
.
});
chart.render();
</code></pre>
<h4>Live Example</h4>
<p>Example 1: Basic Example</p>
<div id="chartContainer1" style="height: 360px; width: 60%; border: 1px solid black;"></div>
<br/>
<p>Example 2: Exporting Multi-Series Chart as CSV</p>
<div id="chartContainer2" style="height: 360px; width: 60%; border: 1px solid black;"></div>
<br/>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"> </script>
<script src="dist/canvasjsascsv.min.js"> </script>
</body>
</html>