How to export the Chart in JavaScript?
JavaScript Chart is an SVG based control that supports canvas rendering by using enableCanvasRendering property. The canvas object for the Chart can be obtained by calling the export method. The image data for canvas can be obtained by using the toDataURL method. You can use this image data to export the Chart in client or server side.
Client-Side exporting in Firefox and Chrome and IE10+
The download attribute of anchor tag can be used for client-side exporting however this is supported only in Firefox and Chrome browsers. The following code example explains the client-side exporting.
JS
<a onclick="Export(this)">
<img src="~/Images/export.png" title="Export"/>
</a>
<div id="container"></div>
<script type="text/javascript">
$(function () {
$("#container").ejChart({
enableCanvasRendering: true
});
});
//Function to export chart
function Export(anchor) {
//Gets canvas object for chart
var chartCanvas = $("#container").ejChart("export");
//Client-side Exporting in IE10+
if(window.navigator.msSaveOrOpenBlob)
window.navigator.msSaveOrOpenBlob(chartCanvas.msToBlob(), "Chart.png");
//Client-side exporting in Chrome and FireFox
else{
//Get image data from canvas object
var chartData = chartCanvas.toDataURL();
//Use download attribute of anchor tag to download image from image data
anchor.download = "Chart.png";
anchor.href = chartData;
}
}
</script>
The following screenshot displays the Chart before clicking the export icon.
The following screenshot displays the Chart after clicking export icon.
Client-side exporting in IE9 and Safari browsers
Due to security reasons, IE and Safari browsers does not support downloading Chart however it is possible to save the chart image in client-side by using the following steps.
1. Chart should be converted to an image and opened in a new tab.
2. Right-click the Chart image in a new tab and select Save picture as option to save the Chart image.
The following code example how to open the Chart as an image in a new browser window.
JS
<a onclick="Export(this)">
<img src="~/Images/export.png" title="Export"/>
</a>
<div id="container"></div>
<script type="text/javascript">
$(function () {
$("#container").ejChart({
enableCanvasRendering: true
});
});
//Function to export chart
function Export(anchor) {
//Gets the canvas object for chart
var chartCanvas = $("#container").ejChart("export");
//Gets the image data from canvas object
var chartData = chartCanvas.toDataURL();
//Opens the Chart as an image in a new window
var newWindow = window.open("");
var head = newWindow.document.createElement("h2");
head.innerHTML = "Right click Chart and choose\"Save picture as\" to save Chart";
var img = newWindow.document.createElement("img");
img.src = chartData;
newWindow.document.body.appendChild(head);
newWindow.document.body.appendChild(img);
newWindow.document.title = "Essential Chart";
}
</script>
The following screenshot displays the Chat before clicking the export icon.
The following screenshot displays the Chart after clicking the export icon. The Chart image is opened in a new tab.
Right-click on the image and select Save picture as in the newly opened tab.
Now the Save Picture dialog appears. Provide a file name in File name textbox and click Save button to save the image.
Sample link: Chart Exporting
I hope you enjoyed learning about how to export the Chart in JavaScript.
You can refer to our JavaScript Chart feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript Chart example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
