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. Image for the cookie policy date

How to render chart image run-time and save it to a file?

Hello!
I need to save the rendered chart image to a PNG file without displaying it to UI.
How this is possible?

5 Replies

DD Dharanidharan Dharmasivam Syncfusion Team February 17, 2017 12:52 PM UTC

Hi Stanislaw, 

Thanks for using Syncfusion product. 

We have analyzed your query and prepared a sample with respect to your requirement. In a button click, we have exported chart as image. In this, we can specify the export settings properties and called the export method. In the server side, we have exported to specified folder. In the highlighted path, you can specify your required path, in which the chart has to be saved as image. Find the code snippet below. 

ASP.NET Core: 

View: 
<input type="button" value="PNG" onclick="chartPng()" /> 
 
function chartPng(sender) { 
        var chart = $("#container").ejChart("instance"), 
            exporting = chart.model.exportSettings; 
        exporting.fileName = "chart"; 
        exporting.angle = 0; 
        exporting.action = "Home/ExportChart"; 
        type = "png"; 
        exporting.mode = "server"; 
        chart.export(); 
    } 
 
Controller: 
 
static string path = "E:\\"; 
 
public void ExportChart(string Data, string ChartModel) 
       { 
            ChartProperties obj = ConvertChartObject(ChartModel); 
            string type = obj.ExportSettings.Type.ToString().ToLower(); 
            string fileName = obj.ExportSettings.FileName; 
            string orientation = obj.ExportSettings.Orientation.ToString(); 
 
            Data = Data.Remove(0, Data.IndexOf(',') + 1); 
            MemoryStream stream = new MemoryStream(Convert.FromBase64String(Data)); 
 
            using (FileStream fs = new FileStream(path + "CoreChart.png", FileMode.Create)) 
            { 
                using (BinaryWriter bw = new BinaryWriter(fs)) 
                { 
                    byte[] data = Convert.FromBase64String(Data); 
                    bw.Write(data); 
                    bw.Dispose(); 
                } 
            } 
        } 

We have attached the sample for your reference in the below location. 

Thanks, 
Dharani. 



ST Stanislaw Tristan February 17, 2017 01:20 PM UTC

Hello, Dharani!
Thank you for the solution and sample!


AT Anandaraj T Syncfusion Team February 20, 2017 12:02 PM UTC

Hi Stanislaw, 

Most welcome. 

Please let us know if you have any other queries regarding this. We are glad to assist you. 

Regards, 
Anand 



ST Stanislaw Tristan February 28, 2017 12:24 PM UTC

Hello!
Your sample contains with both server and client code. But I need to export chart completely from server-side.
Your method ExportChart accepts a parameter Data, that comes from client. How to make this sample without touching the client (i.e. get the Data from server-side).
Thank you!


DD Dharanidharan Dharmasivam Syncfusion Team March 2, 2017 01:49 PM UTC

Hi Stanislaw, 

Sorry for the inconvenience. 

As of now we don’t have support for exporting chart completely in server side. To export the chart we need to call the public method (named export). In this method we will fetch the rendered chart element from the DOM and we will convert the canvas element into DataURL and will send this data to the server side. Since these process have to be carried out in client side only, exporting chart completely in server side is not possible. 

Dharani. 


Loader.
Up arrow icon