How to export the Chart in ASP.NET Web Forms?

The Essential chart is an SVG-based control that also supports canvas rendering by using the EnableCanvasRendering property. The canvas object for Chart can be obtained by calling the export method in the client-side. The image data for canvas can be obtained by using the toDataURL method. You can use this image data to export chart in the client or server side.

Client-Side exporting in Firefox and Chrome

The download attribute of anchor tag can be used for client-side exporting, but this is supported only in Firefox and Chrome browsers. The following code illustrates client-side exporting.

ASP

<a onclick="Export(this)">
    <img src="~/Images/export.png" title="Export"/>
</a>
 
<ej:Chart ID="container" EnableCanvasRendering="true" runat="server">       
</ej:Chart>
 
<script type="text/javascript">    
    //Functions to export chart
    function Export(anchor) {
        //Gets canvas object for chart
        var chartCanvas = $("#container").ejChart("export");
        //Gets image data from canvas object
        var chartData = chartCanvas.toDataURL();
        //Uses 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 and after clicking the export icon.

Figure 1: Chart before clicking export icon

Figure 2: Chart after clicking the export icon

Client-side exporting in IE9+ and Safari browsers

Due to security reasons, IE and Safari browsers do not support downloading the Chart, but it is possible to save the chart image in the 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 choose Save picture as option to save the Chart image.

The following code example opens the Chart as an image in a new browser window

ASP

<a onclick="Export(this)">
    <img src="~/Images/export.png" title="Export"/>
</a>
 
<ej:Chart ID="container" EnableCanvasRendering="true" runat="server">       
</ej:Chart>
 
<script type="text/javascript">    
    //Functions to export chart
    function Export(anchor) {
        //Gets canvas object for chart
        var chartCanvas = $("#container").ejChart("export");
        //Gets image data from canvas object
        var chartData = chartCanvas.toDataURL();
        //Opens Chart as an image in 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 screenshots illustrate saving the Chart as an image in the client-side for IE and Safari browsers.

Figure 3: Before clicking export icon

Figure 4: After clicking export icon, Chart image is opened in a new tab

Figure 5: Right click the image and choose Save picture as a newly opened tab

Now, the Save Picture dialog appears. Provide a file name in the File name textbox and click Save button to save the image.

Note:

A new version of Essential Studio for ASP.NET is available. Versions prior to the release of Essential Studio 2014, Volume 2 will now be referred to as a classic versions.The new ASP.NET suite is powered by Essential Studio for JavaScript providing client-side rendering of HTML 5-JavaScript controls, offering better performance, and better support for touch interactivity. The new version includes all the features of the old version, so migration is easy.

The Classic controls can be used in existing projects; however, if you are starting a new project, we recommend using the latest version of Essential Studio for ASP.NET. Although Syncfusion will continue to support all Classic Versions, we are happy to assist you in migrating to the newest edition.

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!