Skip to content

Commit c9622ca

Browse files
vishwas-rvishwas-r
committed
Added examples for zooming
1 parent fa2dc5a commit c9622ca

File tree

2 files changed

+132
-6
lines changed

2 files changed

+132
-6
lines changed

‎examples/Example 3.html‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<html>
2+
<head>
3+
<script type="text/javascript">
4+
window.onload = function() {
5+
var chart = new CanvasJS.Chart("chartContainer", {
6+
theme: "light2", // "light1", "dark1", "dark2"
7+
animationEnabled: true,
8+
zoomEnabled: true,
9+
title: {
10+
text: "Basic Column Chart"
11+
},
12+
data: [{
13+
// Change type to "bar", "area", "spline", "pie",etc.
14+
type: "column",
15+
dataPoints: [{
16+
label: "apple",
17+
y: 10
18+
}, {
19+
label: "orange",
20+
y: 15
21+
}, {
22+
label: "banana",
23+
y: 25
24+
}, {
25+
label: "mango",
26+
y: 30
27+
}, {
28+
label: "grape",
29+
y: 28
30+
}]
31+
}]
32+
});
33+
chart.render();
34+
//CanvasJSDataAsJSON(chart, ["Filename"]); //Filename is optional - defaults to "chart-data"
35+
CanvasJSDataAsJSON(chart, "Chart Data");
36+
}
37+
</script>
38+
</head>
39+
40+
<body>
41+
<div id="chartContainer" style="height: 400px; width: 60%;margin: auto;"></div>
42+
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"> </script>
43+
<script src="../dist/canvasjsasjson.min.js"> </script>
44+
</body>
45+
46+
</html>

‎index.html‎

Lines changed: 86 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,16 @@
99
</style>
1010
<script type="text/javascript">
1111
window.onload = function() {
12-
var chart = new CanvasJS.Chart("chartContainer", {
12+
var chart1 = new CanvasJS.Chart("chartContainer1", {
1313
theme: "light2", // "light1", "dark1", "dark2"
1414
animationEnabled: true,
1515
exportEnabled: true,
1616
title: {
17-
text: "Basic Column Chart"
18-
},
17+
text: "Export Chart Data as JSON"
18+
},
19+
subtitles: [{
20+
text: "When exportEnabled is set to true"
21+
}],
1922
data: [{
2023
// Change type to "bar", "area", "spline", "pie",etc.
2124
type: "column",
@@ -37,9 +40,79 @@
3740
}]
3841
}]
3942
});
40-
chart.render();
43+
44+
var chart2 = new CanvasJS.Chart("chartContainer2", {
45+
theme: "light2", // "light1", "dark1", "dark2"
46+
animationEnabled: true,
47+
title: {
48+
text: "Export Chart Data as JSON"
49+
},
50+
subtitles: [{
51+
text: "When exportEnabled is set to false"
52+
}],
53+
data: [{
54+
// Change type to "bar", "area", "spline", "pie",etc.
55+
type: "column",
56+
dataPoints: [{
57+
label: "apple",
58+
y: 10
59+
}, {
60+
label: "orange",
61+
y: 15
62+
}, {
63+
label: "banana",
64+
y: 25
65+
}, {
66+
label: "mango",
67+
y: 30
68+
}, {
69+
label: "grape",
70+
y: 28
71+
}]
72+
}]
73+
});
74+
75+
var chart3 = new CanvasJS.Chart("chartContainer3", {
76+
theme: "light2", // "light1", "dark1", "dark2"
77+
animationEnabled: true,
78+
zoomEnabled: true,
79+
title: {
80+
text: "Export Chart Data as JSON"
81+
},
82+
subtitles: [{
83+
text: "When exportEnabled is set to false and zoomEnabled is set to true"
84+
}],
85+
data: [{
86+
// Change type to "bar", "area", "spline", "pie",etc.
87+
type: "column",
88+
dataPoints: [{
89+
label: "apple",
90+
y: 10
91+
}, {
92+
label: "orange",
93+
y: 15
94+
}, {
95+
label: "banana",
96+
y: 25
97+
}, {
98+
label: "mango",
99+
y: 30
100+
}, {
101+
label: "grape",
102+
y: 28
103+
}]
104+
}]
105+
});
106+
107+
chart1.render();
108+
chart2.render();
109+
chart3.render();
110+
41111
//CanvasJSDataAsJSON(chart, ["Filename"]); //Filename is optional - defaults to "chart-data"
42-
CanvasJSDataAsJSON(chart, "Chart Data");
112+
CanvasJSDataAsJSON(chart1, "Chart Data");
113+
CanvasJSDataAsJSON(chart2, "Chart Data");
114+
CanvasJSDataAsJSON(chart3, "Chart Data");
115+
43116
}
44117
</script>
45118
</head>
@@ -78,7 +151,14 @@ <h4 id="howtouse">How to Use?</h4>
78151
CanvasJSDataAsJSON(chart, "filename");
79152
</code></pre>
80153
<h4>Live Example</h4>
81-
<div id="chartContainer" style="height: 400px; width: 60%;"></div>
154+
<p>Example 1: When exportEnabled property is set to true</p>
155+
<div id="chartContainer1" style="height: 360px; width: 60%; border: 1px solid black;"></div>
156+
<br/>
157+
<p>Example 2: When exportEnabled property is set to false</p>
158+
<div id="chartContainer2" style="height: 360px; width: 60%; border: 1px solid black;"></div>
159+
<br/>
160+
<p>Example 3: When exportEnabled property is set to false and zoomEnabled is set to true</p>
161+
<div id="chartContainer3" style="height: 360px; width: 60%; border: 1px solid black;"></div>
82162
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"> </script>
83163
<script src="dist/canvasjsasjson.min.js"> </script>
84164
</body>

0 commit comments

Comments
 (0)