Articles in this section
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;
        }

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied