Convert chart to in memory image

Graeme

Asked On December 18, 2019 09:55 PM UTC

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

</ChartPrimaryXAxis>

</ChartPrimaryYAxis>

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

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

</ChartMarker>

</ChartSeries>

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

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

</ChartMarker>

</ChartSeries>

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

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

</ChartMarker>

</ChartSeries>

</ChartSeriesCollection>

</EjsChart>

</div>

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

</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},

};

}

Reply | Reply with quote

Srihari Muthukaruppan [Syncfusion]

Replied On December 23, 2019 11:14 AM UTC

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.

Reply | Reply with quote

Srihari Muthukaruppan [Syncfusion]

Replied On February 6, 2020 05:53 PM UTC

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:

</ChartSeries>

</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

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
150056	Dec 18,2019 09:55 PM UTC	Feb 6,2020 05:53 PM UTC	Blazor	2

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US