index.html

<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 JSON"
		},		
		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,
		title: {
			text: "Export Chart Data as JSON"
		},		
		subtitles: [{
			text: "When exportEnabled is set to false"
		}],
		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 chart3 = new CanvasJS.Chart("chartContainer3", {
		theme: "light2", // "light1", "dark1", "dark2"
		animationEnabled: true,
		zoomEnabled: true,
		title: {
			text: "Export Chart Data as JSON"
		},		
		subtitles: [{
			text: "When exportEnabled is set to false and zoomEnabled 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
			}]
		}]
	});
	
	chart1.render();
	chart2.render();
	chart3.render();
	
	//CanvasJSDataAsJSON(chart, ["Filename"]); //Filename is optional - defaults to "chart-data"
	CanvasJSDataAsJSON(chart1, "Chart Data");
	CanvasJSDataAsJSON(chart2, "Chart Data");
	CanvasJSDataAsJSON(chart3, "Chart Data");
	
}
</script>
</head>

<body>
	<h1 id="exportcanvasjschartdataasjson">Export CanvasJS Chart Data as JSON</h1>
	<p>This plugin allows you to export and save <a href="https://canvasjs.com/" target="_blank">CanvasJS</a> Chart's data as JSON. Check out <a href="https://github.com/vishwas-r/Export-CanvasJS-Chart-Data-as-JSON/">Github Repository</a> for more info / examples.</p>
	<h4 id="howtouse">How to Use?</h4>
	<ul>
		<li>Create and Render CanvasJS Chart</li>
		<li>Call CanvasJSDataAsJSON method with chart and filename as parameter</li>
	</ul>
	<pre><code>var chart = new CanvasJS.Chart("chartContainer", {
    .
    .
    .
    //Chart Options
    .
    .
    .
});
chart.render();

CanvasJSDataAsJSON(chart, "filename");
</code></pre>
	<h4>Live Example</h4>
	<p>Example 1: When exportEnabled property is set to true</p>
	<div id="chartContainer1" style="height: 360px; width: 60%; border: 1px solid black;"></div>
	<br/>
	<p>Example 2: When exportEnabled property is set to false</p>
	<div id="chartContainer2" style="height: 360px; width: 60%; border: 1px solid black;"></div>
	<br/>
	<p>Example 3: When exportEnabled property is set to false and zoomEnabled is set to true</p>
	<div id="chartContainer3" style="height: 360px; width: 60%; border: 1px solid black;"></div>
	<script src="https://canvasjs.com/assets/script/canvasjs.min.js"> </script>
	<script src="dist/canvasjsasjson.min.js"> </script>
</body>

</html>