Export Chart Data to Base64

[Nils Steinle]

Hello,

i have seen that exporting multiple chart data is not possible. Therefore I want the export of the chart as base64 string back. So I can generate a report with the collected chart images.

I have set allowDownload: false

The documentation says: if allowDownload:false -> you will get back an base64 string.
https://blazor.syncfusion.com/documentation/chart/chart-print#export

I tried this:

Error: Cant convert void to string.

Can you tell me, how i get the base64 string of the png?

Thanks
Nils

[Durga Gopalakrishnan]

Hi Nils, 

Greetings from Syncfusion. 

We request you to use OnExportComplete event to get the base64string of chart and pass a boolean argument as false in ExportAsync method to stop exporting the file. We have prepared sample based on your requirement. Please check with below snippet and sample. 

<SfChart @ref="@chartInstance"> 

    <ChartEvents OnExportComplete="@GetUrl"></ChartEvents> 

</SfChart> 

@code 

{ 

    private SfChart chartInstance; 

    public async Task ExportChart(MouseEventArgs args) 

    { 

        await chartInstance.ExportAsync(ExportType.PNG, "Chart", Syncfusion.PdfExport.PdfPageOrientation.Portrait, false); 

    } 

    public void GetUrl(ExportEventArgs Args) 

    { 

        var dataURL = Args.DataUrl; 

    } 

} 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/Base641433591856.zip 

UG : https://blazor.syncfusion.com/documentation/chart/events#onexportcomplete 

Kindly revert us if you have any concerns. 

Regards, 

Durga G 

[Nils Steinle]

Hello,

with a <SfChart> it is working well.

But with a <SfAccumulationChart> the OnExportComplete Event is not fired.

This is my AccumulationChart:

This function is fired:

But at the AaccumulationChart this Event isnt calling:

I tried the same with a <SfChart> and its working. Can u tell me the Problem here with the <AccumulationChart> Type?

Regards,

Nils

[Srihari Muthukaruppan]

Hi Nils, 

  

Based on the provided code snippet. We suspect that the reported scenario occurs since ChartEvents has been used for accumulation chart. Hence we suggest you to use AccumulationChartEvent tag to achieve your requirement. We have also prepared a sample for your reference. Please find the below sample, code snippet and screenshot below. 

  

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/AccumulationExportEvent-1769708917.zip 

  

Code Snippet: 

<SfAccumulationChart @ref="@accumulationchartInstance" Title="Mobile Browser Statistics" EnableAnimation="true"> 

   <AccumulationChartSeriesCollection> 

        <AccumulationChartSeries DataSource="@ChartPoints" XName="Country" YName="GigaWatts"> 

            <AccumulationDataLabelSettings Visible="true" Name="Browser" Position="AccumulationLabelPosition.Outside"></AccumulationDataLabelSettings> 

        </AccumulationChartSeries> 

    </AccumulationChartSeriesCollection> 

    <AccumulationChartEvents OnExportComplete="@GetUrl"></AccumulationChartEvents> 

</SfAccumulationChart>  

  

@code  

{  

    public SfAccumulationChart accumulationchartInstance; 

    public async Task ExportChart(MouseEventArgs args)  

    {  

        await accumulationchartInstance.ExportAsync(ExportType.PNG, "Chart", Syncfusion.PdfExport.PdfPageOrientation.Portrait, false); 

    }  

    public void GetUrl(ExportEventArgs Args)  

    {  

        var dataURL = Args.DataUrl;  

    }  

}  

  

  

Let us know if you have any concerns. 

  

Regards, 

Srihari M 

 

[Nils Steinle]

Hello,

the export with PNG is working well. But if I change the ExportType to SVG, the args.DataUrl is null.

Is the export to svg not the same?

Regards,

Nils

 

[Durga Gopalakrishnan]

Hi Nils, 

As of now, we don’t have support to obtain the DataUrl for SVG export. We can only able to get base64string for image export. Please let us know if you have any concerns. 

Regards,  

Durga G 

[bossink]

Hello Syncfusion,

I am using chart.Export(). The function ExportAsync does not even exist.

Even though it works the same as far as I know. The problem that I am accounting is:

System.Threading.Tasks.TaskCanceledException: A task was canceled.

   at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)

   at Syncfusion.Blazor.Charts.SvgPrintExport.TriggerOnExportCompleted(SfChart chart, SfAccumulationChart accChart, ExportType type, String fileName, String id)

   at System.Threading.Tasks.Task.<>c.<ThrowAsync>b__140_1(Object state)

   at System.Threading.QueueUserWorkItemCallback.<>c.<.cctor>b__6_0(QueueUserWorkItemCallback quwi)

   at System.Threading.ExecutionContext.RunForThreadPoolUnsafe[TState](ExecutionContext executionContext, Action`1 callback,

TState& state)

   at System.Threading.QueueUserWorkItemCallback.Execute()

   at System.Threading.ThreadPoolWorkQueue.Dispatch()

This is happening on a Chart while another Chart(4 bars) and Accumulation chart are working fine. These are only half the div and depending on the div the Chart that is giving this error will work if the col-md is 9 or smaller. (The other 2 are both 6). If there are less bars in the chart (1 or 2) it is also working but when more the same error occurs. The download works fine, so personally I think the Base64 string is to long, but I have no idea to verify this.

Is there a way to either split it in multiple base64 strings or maybe a longer timeout on the side of Syncfusion to get the result of the Export?

Kind Regards,

Bosisnk

[Swetha Babu]

Hi Bosisnk, 

  

Greetings from Syncfusion. 

  

We have analyzed the reported scenario. We are not able to reproduce the reported issue with the latest version(v19.4.0.43). The charts can be exported in the SVG format using the "ExportAsync" method in Charts. However, we have created the simple blazor application to demonstrate the same and it can be downloaded from the below link. 

  

Sample link: https://www.syncfusion.com/downloads/support/forum/169967/ze/ChartExport-87620607 

  

Screenshot: 

  

 

  

Please find the below documentation link for the Export  

  

Documentation link: https://blazor.syncfusion.com/documentation/chart/chart-print#export 

  

In the above sample, we have rendered the bar chart inside the col-md-6 class and exported it in SVG format. Please let us know if the above sample meets your requirement. If not, please replicate the reported issue in our sample and it will be helpful for us to analyze further and assist you better. 

  

Thanks, 

Swetha 

[bossink]

Hello Syncfusion,

Thank you for the fast reply. Ofcourse I wasn't able to reproduce within the example you gave me.

I tried to update the version to see if that made the difference but it didn't.

I was able to strip down the project and still have the same problem.

It might be one of the packages that I am using.

The startPage is -> Pages/TestPage->Test.razor

Model is in ModelCalsses.cs

And Chart is in UserControls->OEE->MichaelColumnChart.razor

You can set a breakpoint on the GetChartImage function. But it will never get there.

If it is one of the packages let me know which one and how to solve please.

With Kind Regard,

Bossink

Attachment: TestExportSyncfusion_26ee8228.zip

[Swetha Babu]

Hi Bossink,

Greetings from Syncfusion.

When we analyzed the provided sample, we came to know that you are using the old package and files. While using the latest version, We suggest you increase the SignalR maximum message size in Startup.cs file to resolve the connection lost issue. Please find the below documentation link for the same.

documentation link: https://blazor.syncfusion.com/documentation/chart/getting-started#add-syncfusionblazor-service-in-startupcs

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp-658976582.zip

Startup.cs

public void ConfigureServices(IServiceCollection services)

{

     services.AddSignalR(e => {

           e.MaximumReceiveMessageSize = 65536

     });

}

You need to add the base script file in the Host.cshtml file. Please find the below code snippet for the same.

<head>

       .......

       .......

    <script src="https://cdn.syncfusion.com/blazor/syncfusion-blazor-base.min.js"></script>

</head>

Please let us know if you need further assistance

Thanks,

Swetha