Category / Section
How to export all the charts in the panel properly?
1 min read
Description:
This article describes how to export more than one chart in a panel when more than one chart is added to a panel such as grid and need to view all the charts in single image.
Solution:
By using the RenderTargetBitmap property, we can export multiple charts as shown in the following code example.
XAML
<Grid x:Name="chartPanel" Background="White"> <Grid.ColumnDefinitions> <ColumnDefinition/> <ColumnDefinition/> </Grid.ColumnDefinitions> <syncfusion:SfChart> </syncfusion:SfChart> <syncfusion:SfChart Grid.Column="1"> </syncfusion:SfChart> </Grid>
C#
private void SaveImage_Click(object sender, RoutedEventArgs e) { //To export panel which contains charts. Save(chartPanel); } private async void Save(UIElement element) { var renderTargetBitmap = new RenderTargetBitmap(); await renderTargetBitmap.RenderAsync(element); var pixels = await renderTargetBitmap.GetPixelsAsync(); //Initialize FileSavePicker with the image formats and its default file name var fileSavePicker = new FileSavePicker(); fileSavePicker.FileTypeChoices.Add("BMP", new List<string>() { ".bmp" }); fileSavePicker.FileTypeChoices.Add("GIF", new List<string>() { ".gif" }); fileSavePicker.FileTypeChoices.Add("PNG", new List<string>() { ".png" }); fileSavePicker.FileTypeChoices.Add("JPG", new List<string>() { ".jpg" }); fileSavePicker.FileTypeChoices.Add("JPG-XR", new List<string>() { ".jxr" }); fileSavePicker.FileTypeChoices.Add("TIFF", new List<string>() { ".tiff" }); fileSavePicker.SuggestedFileName = "untitled"; var file = await fileSavePicker.PickSaveFileAsync(); if (file != null) { Guid encoderId = GetBitmapEncoderId(file.FileType); using (var stream = await file.OpenAsync(Windows.Storage.FileAccessMode.ReadWrite)) { var encoder = await BitmapEncoder.CreateAsync(encoderId, stream); encoder.SetPixelData(BitmapPixelFormat.Bgra8, BitmapAlphaMode.Ignore, (uint)renderTargetBitmap.PixelWidth, (uint)renderTargetBitmap.PixelHeight, 96.0, 96.0, pixels.ToArray()); await encoder.FlushAsync(); } } } private Guid GetBitmapEncoderId(string type) { switch (type) { case ".bmp": return BitmapEncoder.BmpEncoderId; case ".jpg": case ".jpeg": return BitmapEncoder.JpegEncoderId; case ".jxr": return BitmapEncoder.JpegXREncoderId; case ".png": return BitmapEncoder.PngEncoderId; case ".tif": case ".tiff": return BitmapEncoder.TiffEncoderId; } return BitmapEncoder.BmpEncoderId; }