Write a Blazor generated chart to a excel spreadsheet with XlsIO

I'm looking to generate a Excel spreadsheet using XlsIO with embedded charts generated with theSyncfusion Blazor chart functionality. 

To add the chart to the Excel spreadsheet it looks like I need to call worksheet.Pictures.AddPicture which requires a stream object. I'm struggling to convert the chart to  a stream. I've tried using the chart event AfterExport as suggested in thread Id 151623 but like David I'm unable to get it to fire, I also suspect that it would download the chart image to the users browser which I want to avoid as I want to download just the generated Excel spreadsheet.

Is there a way to do this?

Neither the before or after events fire for me in this sample.

@page "/"

@using Syncfusion.Blazor.Charts
@using Syncfusion.Blazor.Buttons
@using System.IO
@using System.Text.RegularExpressions
@using System.Drawing

<SfButton OnClick="@ChartDownload">Download Chart</SfButton>
<br />
<br />
<br />
<SfChart @ref="@ChartObj" EnableCanvas="false">
    <ChartEvents AfterExport=@AfterGetChartImage BeforeExport="BeforeGetChartImage"></ChartEvents>
    <ChartPrimaryXAxis LabelFormat="n0" Minimum="15" Maximum="19" Interval="1"></ChartPrimaryXAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@chartData" XName="xValue" YName="yValue1" Opacity="1" Fill="green" Width=2 Type="ChartSeriesType.Column">
        </ChartSeries>
        <ChartSeries DataSource="@chartData" XName="xValue" YName="yValue2" Opacity="1" Fill="blueviolet" Width=2 Type="ChartSeriesType.Column">
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

@code{
    SfChart ChartObj;
    public class DoubleData
    {
        public double xValue { get; set; }
        public double yValue1 { get; set; }
        public double yValue2 { get; set; }
    }
    public List<DoubleData> chartData = new List<DoubleData>
{
                new DoubleData { xValue = 16, yValue1 = 2, yValue2= 7},
                new DoubleData { xValue = 17, yValue1 = 7, yValue2 = 8 },
                new DoubleData { xValue = 18, yValue1 = 10, yValue2 = 24 },
    };

    void BeforeGetChartImage(IExportEventArgs Arg)
    {

    }

    void AfterGetChartImage(IAfterExportEventArgs Arg)
    {
        var dataURL = Arg.DataUrl;
        var base64Data = Regex.Match(dataURL, @"data:image/(?<type>.+?),(?<data>.+)").Groups["data"].Value;
        var binData = Convert.FromBase64String(base64Data);
        MemoryStream stream = new MemoryStream(binData);
        var image = Image.FromStream(stream);
        image.Save("chartmemoryimage.png", System.Drawing.Imaging.ImageFormat.Png);
    }
    void ChartDownload()
    {
        ChartObj.Export(ExportType.PNG, "Chart-Mem-dwnld");
    }
}

5 Replies 1 reply marked as answer

SM Srihari Muthukaruppan Syncfusion Team December 14, 2020 10:38 AM UTC

Hi Michael, 
  
Please find the response to the mentioned queries. 

 
Query #1: I'm looking to generate a Excel spreadsheet using XlsIO with embedded charts generated with theSyncfusion Blazor chart functionality. 

 
 
We suggest you to save the generated chart as picture file and use the below code to open the picture as stream as in the following UG link. 


  
Code snippet: 

//Adding a picture 
FileStream imageStream = new FileStream("Image.png", FileMode.Open, FileAccess.Read); 
IPictureShape shape = worksheet.Pictures.AddPicture(1, 1, imageStream); 


 
 
Query #2 & #3: I'm struggling to convert the chart to a stream. & I also suspect that it would download the chart image to the users browser which I want to avoid as I want to download just the generated Excel spreadsheet.  
  
We haveanalyzedyour query. From that, we would like to let you know that the chart is working fine in the latest version 18.3.53 and the AfterExport event is triggered as expected. Unfortunately we are unable to reproduce the reported scenario. We suspect the issue might be due to the usage of older version package. Hence We would like to inform you to update the nugget package to latest version “18.3.53”. We have also prepared a sample for your reference. Please find the below sample and screenshot. And also we would like to let you know that theAfterExportevent gets triggered after the chart is exported and hence it is not possible to avoid storing the image in user browser. 
    
  
Screenshot: 
 
  



MA Michael Aston December 16, 2020 12:19 PM UTC

Got the event firing now. The issue was that the SignalR connection was being dropped due to a message size limit. Fixed by adding

services.AddSignalR(e => {e.MaximumReceiveMessageSize = 102400000;});

A followup question:
Is it possible to stop the image being downloaded to the browser on the ChartObj.Export call? I just what to process the event to get the chart into the memory stream.



SM Srihari Muthukaruppan Syncfusion Team December 17, 2020 05:57 AM UTC

Hi Michael, 
 
Sorry for the inconvenience. 
 
We have analysed your query. As stated earlier, the AfterExport event in the chart will be triggered only after the chart is being exported and dataURL args wont be available in the beforeExport event of the chart. Hence it is not possible to achieve your requirement without the image being downloaded to the browser on the ChartObj.Export call. 
 
Let us know if you have any concerns. 
 
Regards, 
Srihari M 



MA Michael Aston December 17, 2020 10:19 AM UTC

Ok, understood. How do I raise a feature request to add support for the generation of the chart to a stream without the download of the chart?


SM Srihari Muthukaruppan Syncfusion Team December 18, 2020 07:52 AM UTC

Hi Michael, 
 
We have analysed your query. From that, we would like to let you know that as of now we don't have the support to achieve your requirement. We have already considered a scenario as an improvement and logged a feature request through which your requirement can be achieved. You can keep track of the feature from the feedback portal below. 
 
    
The feature will be available in any of our releases. Please cast your vote to make it count. We will prioritize the features of every release based on the demands.    
 
Regards, 
Srihari M 


Marked as answer
Loader.
Up arrow icon