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;
}
