How to export Chart?

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.

CSHTML

<a onclick="Export(this)">
    <img src="~/Images/export.png" title="Export"/>
</a>
 
@(Html.EJ().Chart("container").EnableCanvasRendering(true))
<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

CSHTML

<a onclick="Export(this)">
    <img src="~/Images/export.png" title="Export"/>
</a>
 
@(Html.EJ().Chart("container").EnableCanvasRendering(true))
<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.