ComponentOne FlexChart for UWP
FlexChart / Working with FlexChart / Export / Export to Image
In This Topic
    Export to Image
    In This Topic

    FlexChart for UWP allows you to export the chart to multiple image formats. The supported formats are PNG, JPEG, BMP and SVG.

    To export a FlexChart to an image format, use SaveImage method. The method saves the chart as an image to the specified stream in the given ImageFormat. You can optionally specify the height, width, and back color of the image to be saved.

    This topic uses the sample created in QuickStart topic to explain the implementation for exporting a FlexChart to an image on button click event.

    The following image shows a chart with a button to be clicked to export chart to a desired image format.

    MainPage.xaml
    Copy Code
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <Grid.RowDefinitions>
                <RowDefinition Height="93*"/>
                <RowDefinition Height="97*"/>
            </Grid.RowDefinitions>
            <StackPanel Orientation="Horizontal" Margin="10 0">
                <Button Content="Export" Width="100" Margin="10,72,10,72.333" Click="Button_Click_1"/>
            </StackPanel>
            <Chart:C1FlexChart x:Name="flexChart" HorizontalAlignment="Left" Width="443" ItemsSource="{Binding DataContext.Data}"
                     BindingX="Fruit" Margin="93,106,0,70" 
                     Grid.RowSpan="2">
                <Chart:C1FlexChart.Series>
                    <Chart:Series SeriesName="March" Binding="March"></Chart:Series>
                    <Chart:Series SeriesName="April" Binding="April"></Chart:Series>
                    <Chart:Series SeriesName="May" Binding="May"></Chart:Series>
                </Chart:C1FlexChart.Series>
                <Chart:C1FlexChart.AxisX>
                    <Chart:Axis MajorGrid="False" Position="Bottom"></Chart:Axis>
                </Chart:C1FlexChart.AxisX>
                <Chart:C1FlexChart.AxisY>
                    <Chart:Axis AxisLine="False" Position="Left" MajorUnit="5"></Chart:Axis>
                </Chart:C1FlexChart.AxisY>
                <Chart:C1FlexChart.SelectionStyle>
                    <Chart:ChartStyle Stroke="Red"></Chart:ChartStyle>
                </Chart:C1FlexChart.SelectionStyle>
            </Chart:C1FlexChart>
        </Grid>
    
    MainPage.xaml.cs
    Copy Code
     public sealed partial class MainPage : Page
        {
            List _fruits;
            public MainPage()
            {
                this.InitializeComponent();
            }
            public List Data
            {
                get
                {
                    if (_fruits == null)
                    {
                        _fruits = DataCreator.CreateFruit();
                    }
    
                    return _fruits;
                }
            }
            private async void Button_Click_1(object sender, RoutedEventArgs e)
            {
                var picker = new FileSavePicker();
                Enum.GetNames(typeof(ImageFormat)).ToList().ForEach(fmt =>
                {
                    picker.FileTypeChoices.Add(fmt.ToString().ToUpper(), new List<string>() { "." + fmt.ToString().ToLower() });
                });
                StorageFile file = await picker.PickSaveFileAsync();
                if (file != null)
                {
                    Stream stream = new MemoryStream();
                    var extension = file.FileType.Substring(1, file.FileType.Length - 1);
                    ImageFormat fmt = (ImageFormat)Enum.Parse(typeof(ImageFormat), extension, true);
                    flexChart.SaveImage(stream, fmt);
                    using (Stream saveStream = await file.OpenStreamForWriteAsync())
                    {
                        stream.CopyTo(saveStream);
                        stream.Seek(0, SeekOrigin.Begin);
                        saveStream.Seek(0, SeekOrigin.Begin);
                        saveStream.Flush();
                        saveStream.Dispose();
                    }
                }
            }
        }