Export to Image

In This Topic

FlexChart for WPF 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.

XAML
Code

MainWindow.xaml	Copy Code
<Grid> <c1:C1FlexChart x:Name="flexChart" BindingX="Country" Height="200" Width="500" ItemsSource="{Binding DataContext.Data}"> <c1:C1FlexChart.Series> <c1:Series SeriesName="Sales" Binding="Sales"/> <c1:Series SeriesName="Expenses" Binding="Expenses"/> </c1:C1FlexChart.Series> </c1:C1FlexChart> <Button Content="Export FlexChart" Height="30" Width="40" Click="OnSaveButtonClick" Margin="0,0,412,269" /> </Grid>

MainWindow.xaml

Copy Code

<Grid>
        <c1:C1FlexChart x:Name="flexChart" 
               BindingX="Country" 
               Height="200"
               Width="500"
            ItemsSource="{Binding DataContext.Data}">
            <c1:C1FlexChart.Series>
                <c1:Series SeriesName="Sales" 
                       Binding="Sales"/>
                <c1:Series SeriesName="Expenses" 
                       Binding="Expenses"/>
            </c1:C1FlexChart.Series>
        </c1:C1FlexChart>
        <Button Content="Export FlexChart" Height="30" Width="40" Click="OnSaveButtonClick" Margin="0,0,412,269" />
</Grid>

MainWindow.xaml.cs	Copy Code
public partial class MainWindow : Window { private List _data; public MainWindow() { InitializeComponent(); } public List Data { get { if (_data == null) { _data = DateCreator.CreateData(); } return _data; } } private void OnSaveButtonClick(object sender, RoutedEventArgs e) { var dialog = new SaveFileDialog() { Filter = "PNG\|.png\|JPEG \|.jpeg\|BMP\|.bmp\|SVG\|.svg" }; if (dialog.ShowDialog() == true) { using (Stream stream = dialog.OpenFile()) { var extension = dialog.SafeFileName.Split('.')[1]; ImageFormat fmt = (ImageFormat)Enum.Parse(typeof(ImageFormat), extension, true); flexChart.SaveImage(stream, fmt); } } } }

MainWindow.xaml.cs

Copy Code

public partial class MainWindow : Window
    {
        private List _data;
        public MainWindow()
        {
            InitializeComponent();
        }
        public List Data
        {
            get
            {
                if (_data == null)
                {
                    _data = DateCreator.CreateData();
                }

                return _data;
            }
        }

        private void OnSaveButtonClick(object sender, RoutedEventArgs e)
        {
            var dialog = new SaveFileDialog()
            {
                Filter = "PNG|*.png|JPEG |*.jpeg|BMP|*.bmp|SVG|*.svg"
            };
            if (dialog.ShowDialog() == true)
            {
                using (Stream stream = dialog.OpenFile())
                {
                    var extension = dialog.SafeFileName.Split('.')[1];
                    ImageFormat fmt = (ImageFormat)Enum.Parse(typeof(ImageFormat), extension, true);
                    flexChart.SaveImage(stream, fmt);
                }
            }
        }
    }