Convert chart to in memory image

[Graeme]

I am trying to see how I can convert a chart into an image that is in memory so that from a button click I can generate the content for an email.

The export function on the chart will download an image that looks correct but I cannot get access to this image from that method call.

@using Syncfusion.EJ2.Blazor.Charts

<div class="Row">

    <div class="col-md-6">

        <div class="control-section">

            <EjsChart @ref="BurndownChart" Title="Sprint 2019.25 Burndown">

                <ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>

                <ChartPrimaryXAxis ValueType="Syncfusion.EJ2.Blazor.Charts.ValueType.DateTime" LabelFormat="dd-MM" IntervalType="IntervalType.Days" EdgeLabelPlacement="EdgeLabelPlacement.Shift">

                    <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>

                </ChartPrimaryXAxis>

                <ChartPrimaryYAxis LabelFormat="{value}" RangePadding="ChartRangePadding.None" Minimum="0" Maximum="30" Interval="3">

                    <ChartAxisLineStyle Width="0"></ChartAxisLineStyle>

                    <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>

                </ChartPrimaryYAxis>

                <ChartTooltipSettings Enable="true"></ChartTooltipSettings>

                <ChartSeriesCollection>

                    <ChartSeries DataSource="@chartData" Name="Predicted" XName="xValue" Width="2"

                                 Opacity="1" YName="PredictedBurndown" Type="ChartSeriesType.Line" Fill="Blue">

                        <ChartMarker Visible="true" Width="10" Height="10">

                        </ChartMarker>

                    </ChartSeries>

                    <ChartSeries DataSource="@chartData" Name="Actual" XName="xValue" Width="2" Fill="Orange"

                                 Opacity="1" YName="ActualBurndown" Type="ChartSeriesType.Line">

                        <ChartMarker Visible="true" Width="10" Height="10">

                        </ChartMarker>

                    </ChartSeries>

                    <ChartSeries DataSource="@chartData" Name="Points Claimed" XName="xValue" Width="2"

                                 Opacity="1" YName="PointsClaimed" Type="ChartSeriesType.Line" Fill="Black">

                        <ChartMarker Visible="true" Width="10" Height="10">

                        </ChartMarker>

                    </ChartSeries>

                </ChartSeriesCollection>

            </EjsChart>

        </div>

    </div>

    <div class="col-md-6">

        <button @onclick="Export">Export</button>

    </div>

</div>

@code{

    EjsChart BurndownChart;

    public void Export()

    {

        BurndownChart.Export(ExportType.PNG, "pngImage");

    }

    public class LineChartData

    {

        public DateTime xValue { get; set; } //Date

        public double PredictedBurndown { get; set; } // Predicted Burndown

        public double? ActualBurndown { get; set; } //Actual Burndown

        public double? PointsClaimed { get; set; } //Points Claimed

    }

    public List<LineChartData> chartData = new List<LineChartData>

{

        new LineChartData { xValue = new DateTime(2020, 12, 09), PredictedBurndown = 27, ActualBurndown = 27, PointsClaimed = 0 },

        new LineChartData { xValue = new DateTime(2020, 12, 10), PredictedBurndown = 24.5, ActualBurndown = 24, PointsClaimed = 0  },

        new LineChartData { xValue = new DateTime(2020, 12, 11), PredictedBurndown = 21.4, ActualBurndown = 18.5, PointsClaimed = 0  },

        new LineChartData { xValue = new DateTime(2020, 12, 12), PredictedBurndown = 18.7, ActualBurndown = 13.5, PointsClaimed = 0  },

        new LineChartData { xValue = new DateTime(2020, 12, 13), PredictedBurndown = 17.1, ActualBurndown = 9, PointsClaimed = 0  },

        new LineChartData { xValue = new DateTime(2020, 12, 16), PredictedBurndown = 15.1, ActualBurndown = 7, PointsClaimed = 0  },

        new LineChartData { xValue = new DateTime(2020, 12, 17), PredictedBurndown = 12, ActualBurndown = 5.5, PointsClaimed = 2  },

        new LineChartData { xValue = new DateTime(2020, 12, 18), PredictedBurndown = 8.8},

        new LineChartData { xValue = new DateTime(2020, 12, 19), PredictedBurndown = 6.2},

        new LineChartData { xValue = new DateTime(2020, 12, 20), PredictedBurndown = 0},

    };

}

[Srihari Muthukaruppan]

Hi Graeme,  

We have analyzed your query. From that, we would like to let you know that as of now we do not have support to “access the image from export method”. We consider this scenario as improvement and we have logged a feature request on this . It can be tracked through our feedback portal below.   

 

Feedback Portal: https://www.syncfusion.com/feedback/10905  

  

Based on other logged tasks priority, this fix will be included in our volume 4 sp1 release.  

If you have any more specification/suggestions to the feature request, you can add it as a comment in the portal.   

Let us know, if you need further assistance.  

Regards  

Srihari M. 

[Srihari Muthukaruppan]

Hi Graeme, 

  

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. 

  

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/MemoryStreamImage-32639271.zip  

  

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:  

 

  

Let us know if you have any concerns. 

  

Regards, 

Srihari M