1. Home
  2. Forum
  3. Blazor
  4. Server-side Chart Generation

Server-side Chart Generation

 Hello,

Is there a way to generate a Chart Output (in a binary image format) on Server-Side?
The goal is to pre-generate a high quantity of PDF with the same graphical output of a browser with your Blazor Component.

I thought of a kind of Prerender in Server-Side (Your components seems working with Server Pre-Rendering).
Perhaps have you another component for that?

Thank you for your help.


Regards,

David

3 Replies
SM Srihari Muthukaruppan Syncfusion Team February 18, 2020 11:45 AM UTC

Hi David, 
 
Greetings from Syncfusion. 
 
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 
 
Query 1: Is there a way to generate a Chart Output (in a binary image format) on Server-Side? 
 
We have analyzed your query. From that, we would like to let you know that we can achieve your requirement by getting the dataURL using “AterExport” event in the chart and convert the dataURL into bindata and then store it as memory stream to access the image as requested. Based on your requirement we have prepared a sample for your reference. Please find the below sample, code snippet and screenshot. 
  
  
Code Snippet: 
<EjsChart @ref="@ChartObj" EnableCanvas="false"> 
    <ChartEvents AfterExport="@GetChartImage"></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> 
</EjsChart>     
 
void GetChartImage(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); 
    } 
  
Screenshot:  
 
  
Query 2: I thought of a kind of Prerender in Server-Side (Your components seems working with Server Pre-Rendering). Perhaps have you another component for that? 
 
We have analyzed your query. Since we are not clear about your exact requirement, Kindly revert us with more information which will be more helpful for further analysis and provide you the solution sooner. 
 
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 
 
Let us know if you have any concerns. 
  
Regards, 
Srihari M 


DR David Rouillon February 18, 2020 02:14 PM UTC

Hello,

Thank you for your quick response.

About Request 1 :
The example is clear, but when I test on my environment, the Event AfterExport doesn't seem's to be fired.
I have added the line below, and all is working as usual (PNG File is well downloaded by the Browser and there isn't any Error)

    void GetChartImage(IAfterExportEventArgs Arg)
    {
        throw new Exception("Force Fail!");

The Callback "GetChartImage" is not called. Or perhaps (probably ;) I miss-understand how Server-Side Blazor work.

Is somethink missing to fire this Event on the Server ?


About Request 2:
It was just a remark about a possible alternative with another Library not linked with Web technologies. But If the code in Request 1 is operationnal, it should be OK.


Regards,

David

SM Srihari Muthukaruppan Syncfusion Team February 19, 2020 10:30 AM UTC

Hi David, 
 
We have analyzed your query. From that, we would like to let you know that the map is working fine in the provided sample 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 “17.4.50” and also modify the host.cshtml page as shown in the code snippet. We have also prepared a sample for your reference. Please find the below sample, code snippet and screenshot 
   
  
Code Snippet:  
<head> 
    // add additional code here 
   <link rel='nofollow' href="https://cdn.syncfusion.com/ej2/17.4.50/material.css" rel="stylesheet" /> 
</head> 
 
If you still face this issue. Please share the following information which will be more helpful for further analysis and provide you the solution sooner.  

  • Try to reproduce the reported scenario in the above sample

  • Please share your datasource file.

  • Share the details if you have done any other customization in your sample.
 
Let us know if you have any concerns. 
  
Regards, 
Srihari M 


Loader.
Up arrow icon