)
We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Essential JS2

Syncfusion jQuery based widgets are no longer in active development. Switch to our pure JavaScript based next generation Essential JS 2 library.

Syncfusion Feedback

How to export the Chart?

Platform: jQuery |
Control: ejChart |
Published Date: May 26, 2015 |
Last Revised Date: July 3, 2019

Essential 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.

Before clicking export icon

The following screenshot displays the Chart after clicking export icon.

After clicking the 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.

Before clicking 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

Right-click on the image and select Save picture as in the newly opened tab.

Right-click on the image and save picture

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

ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon