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

[Stanislaw Tristan]

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

[Dharanidharan Dharmasivam]

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. 

https://www.syncfusion.com/downloads/support/forum/128915/ze/WebApplication1-965608898  

Thanks, 

Dharani. 

[Stanislaw Tristan]

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

[Anandaraj T]

Hi Stanislaw, 

Most welcome. 

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

Regards, 

Anand 

[Stanislaw Tristan]

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!

[Dharanidharan Dharmasivam]

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. 

Thanks, 

Dharani.