We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Convert chart to in memory image

Thread ID:

Created:

Updated:

Platform:

Replies:

150056 Dec 18,2019 09:55 PM UTC Feb 6,2020 05:53 PM UTC Blazor 2
loading
Tags: Charts
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

<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 [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.   
 
  
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 [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. 
  
  
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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon