We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Export SfChart to PDF: The way of exporting chart in different page

I've looking for the response that the best way of exporting PDF. SfChart in different WPF Page. I've tried but lot of method was crushed.
Here is algorithm:

My WPF app elements are MainWindow, Page1, Page2. Page1 includes only Line Chart and Page2 includes only Pie Chart. On MainWindow, I've located Print button. My aim is that if Print button is pressed, then there will be created a pdf doc and must be contained Page1's Line Chart and Page2 Pie Chart.

If it is more difficult or not possible, I can obtain charts via code method like below method. Is there any way add created via code SfChart into PDF doc? 


public SfChart GetForPDF()
{
SfChart chart = new SfChart();
CategoryAxis primaryAxis = new CategoryAxis();
primaryAxis.Header = "Name";      
chart.PrimaryAxis = primaryAxis;
NumericalAxis secondaryAxis = new NumericalAxis();
secondaryAxis.Header = "Height(in cm)";          
chart.SecondaryAxis = secondaryAxis;
ColumnSeries series = new ColumnSeries();
series.ItemsSource = (new ViewModel()).Data;
series.XBindingPath = "Name";            
series.YBindingPath = "Height";         
chart.Series.Add(series);
this.DataContext=chart;
return chart;
}

And is there possible new chart into pdf? I've found below code in this forum but I could not achieve them. Especially, in ChartToPDF section,I've many times error such a BitmapEncoder. I could not benefit these code blocks.

  private void ChartToPDF() 
        { 
            MemoryStream outStream = new MemoryStream();
            var chart = GetForPDF();
            chart.Save(outStream, new BmpBitmapEncoder()); 
            PdfPage page = pdfDoc.Pages.Add(); 
            PdfBitmap img = new PdfBitmap(outStream); 
            page.Graphics.DrawImage(img, 0, 0, 500, 250); 
            outStream.Close(); 
        } 
 
        private void SavePDF(string pdfFile) 
        { 
            pdfDoc.Save(pdfFile); 
            System.Diagnostics.Process.Start(pdfFile); 
        } 
         
        private void Button_Click(object sender, RoutedEventArgs e) 
        { 
            pdfDoc = new PdfDocument(); 
            ChartToPDF(); 
            SavePDF("chartpdf.pdf"); 
        } 

12 Replies

XH Xamarin Hunter June 26, 2019 08:54 AM UTC

I've added sample solution: 

Error Text:

System.ArgumentOutOfRangeException
HResult=0x80131502
Message=The parameter value must be greater than zero.
Source=PresentationCore

My MainWindowXaml:

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:MyAim"
        xmlns:chart="http://schemas.syncfusion.com/wpf" x:Class="MyAim.MainWindow"
        mc:Ignorable="d"
        Title="MainWindow" Height="250" Width="500">
    <DockPanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
        <Button Click="btnCreate_Click" Width="200" Height="50"></Button>
    </DockPanel>
</Window>

My Back-End Code:

using Syncfusion.UI.Xaml.Charts;
using System.Collections.Generic;
using System.Windows;
using Syncfusion.Pdf;
using Syncfusion.Pdf.Graphics;
using System.IO;
using System.Windows.Media.Imaging;

namespace MyAim
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public PdfDocument pdfDoc;
        public class Person
        {
            public string Name { get; set; }
            public double Height { get; set; }
        }
        public class ViewModel
        {
            public List<Person> Data { get; set; }

            public ViewModel()
            {
                Data = new List<Person>()
            {
                new Person { Name = "David", Height = 180 },
                new Person { Name = "Michael", Height = 170 },
                new Person { Name = "Steve", Height = 160 },
                new Person { Name = "Joel", Height = 182 }
            };
            }
        }
        public SfChart GetForPDF()
        {
            SfChart chart = new SfChart();
            CategoryAxis primaryAxis = new CategoryAxis
            {
                Header = "Name"
            };
            chart.PrimaryAxis = primaryAxis;
            NumericalAxis secondaryAxis = new NumericalAxis
            {
                Header = "Height(in cm)"
            };
            chart.SecondaryAxis = secondaryAxis;
            ColumnSeries series = new ColumnSeries
            {
                ItemsSource = (new ViewModel()).Data,
                XBindingPath = "Name",
                YBindingPath = "Height"
            };
            chart.Series.Add(series);
            this.DataContext = chart;
            return chart;
        }
        private void ChartToPDF()
        {
            MemoryStream outStream = new MemoryStream();
            var chart = GetForPDF();
            chart.Save(outStream, new BmpBitmapEncoder());
            PdfPage page = pdfDoc.Pages.Add();
            PdfBitmap img = new PdfBitmap(outStream);
            page.Graphics.DrawImage(img, 0, 0, 500, 250);
            outStream.Close();
        }
        private void SavePDF(string pdfFile)
        {
            pdfDoc.Save(pdfFile);
            System.Diagnostics.Process.Start(pdfFile);
        }
        public MainWindow()
        {
            InitializeComponent();
        }
        private void btnCreate_Click(object sender, RoutedEventArgs e)
        {
            pdfDoc = new PdfDocument();
            ChartToPDF();
            SavePDF("chartpdf.pdf");
        }
    }
}



Attachment: MyAim_5fa39655.rar


MK Muneesh Kumar G Syncfusion Team June 26, 2019 12:27 PM UTC

Hi Utemar, 
 
Greetings from Syncfusion.  
 
We have analyzed your query and you can resolve this problem by calling measure and arrange for SfChart as per the below code snippet.  
 
Code snippet 
public SfChart GetForPDF() 
        { 
            SfChart chart = new SfChart(); 
            chart.Background = new SolidColorBrush(Colors.White); 
            .. 
            this.DataContext = chart; 
 
            //To Render the Chart UI without showing the window  
            chart.Measure(new Size(double.PositiveInfinity, double.PositiveInfinity)); 
            chart.Arrange(new Rect(new Point(0, 0), chart.DesiredSize)); 
 
            return chart; 
        } 
 
Also we have set Background for SfChart to view elements clearly. Please let us know if you have any other queries.  
 
Thanks,  
Muneesh Kumar G.  



XH Xamarin Hunter replied to Muneesh Kumar G June 27, 2019 03:48 PM UTC

Hi Utemar, 
 
Greetings from Syncfusion.  
 
We have analyzed your query and you can resolve this problem by calling measure and arrange for SfChart as per the below code snippet.  
 
Code snippet 
public SfChart GetForPDF() 
        { 
            SfChart chart = new SfChart(); 
            chart.Background = new SolidColorBrush(Colors.White); 
            .. 
            this.DataContext = chart; 
 
            //To Render the Chart UI without showing the window  
            chart.Measure(new Size(double.PositiveInfinity, double.PositiveInfinity)); 
            chart.Arrange(new Rect(new Point(0, 0), chart.DesiredSize)); 
 
            return chart; 
        } 
 
Also we have set Background for SfChart to view elements clearly. Please let us know if you have any other queries.  
 
Thanks,  
Muneesh Kumar G.  


It works perfectly. First of all, thank you your workshop. But there is more important issue. If I deploy these code, pdfDocument includes chart renders very well as a pdf extension but my wpf application window is disappearing just only rendered chart seems. This is bad situ for me. Is there any solution?

To addition, is it possible define print file dialog as manual despite of determining pdf string name such as "chartpdf.pdf"?


MK Muneesh Kumar G Syncfusion Team June 28, 2019 12:16 PM UTC

Hi Utemar,  
 
We have analyzed your requirement and you can achieve this by calling Print method in SfChart as per the below code snippet. 
 
Code snippet 
  private void ChartToPDF() 
        { 
            MemoryStream outStream = new MemoryStream(); 
            var chart = GetForPDF(); 
            chart.Save(outStream, new BmpBitmapEncoder()); 
            PdfPage page = pdfDoc.Pages.Add(); 
            PdfBitmap img = new PdfBitmap(outStream); 
            page.Graphics.DrawImage(img, 0, 0, 500, 250); 
            outStream.Close(); 
 
            chart.Print(); 
        } 
        private void SavePDF(string pdfFile) 
        { 
                       
            //pdfDoc.Save(pdfFile); 
            //System.Diagnostics.Process.Start(pdfFile); 
        } 
 
Here no need to save chart in PDFPage, remove that code. When print dialog opens in your application choose Advanced option and select PDF 
 
 
 
 
 
 
We have modified your sample based on this, please find the sample from the following location.  
 
 
 
Regards, 
Muneesh Kumar G.   



XH Xamarin Hunter replied to Muneesh Kumar G June 28, 2019 05:19 PM UTC

Hi Utemar,  
 
We have analyzed your requirement and you can achieve this by calling Print method in SfChart as per the below code snippet. 
 
Code snippet 
  private void ChartToPDF() 
        { 
            MemoryStream outStream = new MemoryStream(); 
            var chart = GetForPDF(); 
            chart.Save(outStream, new BmpBitmapEncoder()); 
            PdfPage page = pdfDoc.Pages.Add(); 
            PdfBitmap img = new PdfBitmap(outStream); 
            page.Graphics.DrawImage(img, 0, 0, 500, 250); 
            outStream.Close(); 
 
            chart.Print(); 
        } 
        private void SavePDF(string pdfFile) 
        { 
                       
            //pdfDoc.Save(pdfFile); 
            //System.Diagnostics.Process.Start(pdfFile); 
        } 
 
Here no need to save chart in PDFPage, remove that code. When print dialog opens in your application choose Advanced option and select PDF 
 
 
 
 
 
 
We have modified your sample based on this, please find the sample from the following location.  
 
 
 
Regards, 
Muneesh Kumar G.   


It must be pdfDocument because many chart and light table added in pdfDocument and I need to pdfDoc via save file dialog insted of only chart


MK Muneesh Kumar G Syncfusion Team June 29, 2019 11:22 AM UTC

Hi Aurea, 
 
We have analyzed your requirement and you can achieve this by getting required file name in SaveFileDialog then saveing PDFDocument as per the below code snippet.  
 
Code snippet 
 
private void SavePDF(string pdfFile) 
        { 
            SaveFileDialog dialog = new SaveFileDialog(); 
            dialog.Filter = "PDF document (*.pdf)|*.pdf"; 
            Boolean? result = dialog.ShowDialog(); 
            string fileName = dialog.FileName; 
 
            if ((bool)result) 
            { 
                pdfDoc.Save(fileName); 
            } 
        } 
 
 
We have modified your sample based on this, please find the sample from the following location.  
 
 
Please let us know if you have any queries.  
 
Regards,   
Muneesh Kumar G.   
 



XH Xamarin Hunter replied to Muneesh Kumar G June 29, 2019 12:33 PM UTC

Hi Aurea, 
 
We have analyzed your requirement and you can achieve this by getting required file name in SaveFileDialog then saveing PDFDocument as per the below code snippet.  
 
Code snippet 
 
private void SavePDF(string pdfFile) 
        { 
            SaveFileDialog dialog = new SaveFileDialog(); 
            dialog.Filter = "PDF document (*.pdf)|*.pdf"; 
            Boolean? result = dialog.ShowDialog(); 
            string fileName = dialog.FileName; 
 
            if ((bool)result) 
            { 
                pdfDoc.Save(fileName); 
            } 
        } 
 
 
We have modified your sample based on this, please find the sample from the following location.  
 
 
Please let us know if you have any queries.  
 
Regards,   
Muneesh Kumar G.   
 


This method works perfectly and this is solution exactly. 

By the way, in my own app, there are lots of grid, dockpanel and connected frame navigate with another page.

When I deploy it, my pdf was created perfectly which can be selected saving location on the another hand my app window dissappear. After print, there is only last  rendered chart (top-left) viewing on app window.

If I exclude all chart and just add pdflight table then I deploy this method, pdfDoc was created very well and my app window is still viewing. If I include chart like this then deploy this method, again pdfDoc was created very well but my app window view fully disappear and only last rendered chart remained.

what do You think the problem might be?

Best regards. 


MK Muneesh Kumar G Syncfusion Team July 1, 2019 10:40 AM UTC

Hi Aurea, 
 
We suspect that the problem occurs SfChart’s desired size occupies whole area, you can resolve this problem by setting manual size for measure and arrange in below section.  
 
Code snippet 
 
chart.Measure(new Size(300, 300));  
 
 chart.Arrange(new Rect(new Point(0, 0), new Size(300,300))); 
 
 
And currently we can’t get exact problem that you are facing. So, if you are still facing the problem, please update us with image or video representation. This would be helpful for us to give better solution in this.  
   
Regards,   
Muneesh Kumar G.  
 



XH Xamarin Hunter replied to Muneesh Kumar G July 1, 2019 03:35 PM UTC

Hi Aurea, 
 
We suspect that the problem occurs SfChart’s desired size occupies whole area, you can resolve this problem by setting manual size for measure and arrange in below section.  
 
Code snippet 
 
chart.Measure(new Size(300, 300));  
 
 chart.Arrange(new Rect(new Point(0, 0), new Size(300,300))); 
 
 
And currently we can’t get exact problem that you are facing. So, if you are still facing the problem, please update us with image or video representation. This would be helpful for us to give better solution in this.  
   
Regards,   
Muneesh Kumar G.  
 


I will explain more my problem. Here is my problem: My app contains only 1 window: MainWindow. MainWindow has two content: Button and SfPdfViewer.

My aim is simple: If Button is pressed, then My app create a PdfDocument and most important point; PdfDocument must be shown in PdfViewer.

According to my goal:in code back-end, I've created a pdfDocument. and pdfDoc has contain 2 pdf page and as a belog to these, also contain 2 SfChart and 1 DataTable.
In my project all SfChart and PdfLight must be created only via code. MainWindow never should be changed. MainWindow must shown solely created PdfDoc in PdfViewer.

Then I deployed my app and here is result:

Opening Page:



After, I pressed print button. My pdfDoc is created very well but MainWindow view disappears. I want to show pdfDoc in PdfViewer.

If I press "print":



My pdfDoc creating without problem but not showing in MainWindow. I opened manually:



My Questions:

1) 
Where is MainWindow's viewing?
2) How can I achieve to show my pdfDoc in PdfViewer?
3) 
Why is the image quality of the charts very poor, although the image quality of the light tables is very well?

I've attached MainWindow.xaml and MainWindow.xaml.cs

Please Check. Thank you from now. Best regards.

Attachment: MainWindow_3cd5690e.rar


MK Muneesh Kumar G Syncfusion Team July 2, 2019 12:58 PM UTC

Hi Aurea, 
 
Thanks for your update,  
 
Query 1: Where is MainWindow's viewing? 
Query 2) How can I achieve to show my pdfDoc in PdfViewer? 
 
We have analyzed your code and we found that you are setting whole MainWindow’s Content as last created SfChart.  
 
 
public SfChart DocChartColumn() 
        { 
            .. 
           // Content = z; 
            z.Measure(new Size(double.PositiveInfinity, double.PositiveInfinity)); 
            z.Arrange(new Rect(new Point(0, 0), z.DesiredSize)); 
            return z; 
        } 
        public SfChart DocChartSpline() 
        { 
            .. 
           // Content = z; 
            z.Measure(new Size(double.PositiveInfinity, double.PositiveInfinity)); 
            z.Arrange(new Rect(new Point(0, 0), z.DesiredSize)); 
            return z; 
        } 
 
 
So that the PdfViewer removed from the view. By removing this code, you can able to view the generated PdfDoc in viewer.  
 
Also by setting page content position correctly in DrawImage method, you can view generated contents correctly.  
 
 
pdfLight1.Draw(page1, new System.Drawing.RectangleF(x1, 50, 300, 300)); 
            MemoryStream outStream1 = new MemoryStream(); 
.. 
            page1.Graphics.DrawImage(img1, new System.Drawing.RectangleF(x1, 200, 300, 300)); 
.. 
            page2.Graphics.DrawImage(img2, new System.Drawing.RectangleF(x2, 400, 300, 300)); 
 


 
Query 3) Why is the image quality of the charts very poor, although the image quality of the light tables is very well? 
 
Now we have changed the encoder to PngBitmapEncoder().  
 
We have modified your sample, please find the sample from the following location.  
 
 
Regards,
Muneesh Kumar G.
 



XH Xamarin Hunter replied to Muneesh Kumar G July 2, 2019 01:53 PM UTC

Hi Aurea, 
 
Thanks for your update,  
 
Query 1: Where is MainWindow's viewing? 
Query 2) How can I achieve to show my pdfDoc in PdfViewer? 
 
We have analyzed your code and we found that you are setting whole MainWindow’s Content as last created SfChart.  
 
 
public SfChart DocChartColumn() 
        { 
            .. 
           // Content = z; 
            z.Measure(new Size(double.PositiveInfinity, double.PositiveInfinity)); 
            z.Arrange(new Rect(new Point(0, 0), z.DesiredSize)); 
            return z; 
        } 
        public SfChart DocChartSpline() 
        { 
            .. 
           // Content = z; 
            z.Measure(new Size(double.PositiveInfinity, double.PositiveInfinity)); 
            z.Arrange(new Rect(new Point(0, 0), z.DesiredSize)); 
            return z; 
        } 
 
 
So that the PdfViewer removed from the view. By removing this code, you can able to view the generated PdfDoc in viewer.  
 
Also by setting page content position correctly in DrawImage method, you can view generated contents correctly.  
 
 
pdfLight1.Draw(page1, new System.Drawing.RectangleF(x1, 50, 300, 300)); 
            MemoryStream outStream1 = new MemoryStream(); 
.. 
            page1.Graphics.DrawImage(img1, new System.Drawing.RectangleF(x1, 200, 300, 300)); 
.. 
            page2.Graphics.DrawImage(img2, new System.Drawing.RectangleF(x2, 400, 300, 300)); 
 


 
Query 3) Why is the image quality of the charts very poor, although the image quality of the light tables is very well? 
 
Now we have changed the encoder to PngBitmapEncoder().  
 
We have modified your sample, please find the sample from the following location.  
 
 
Regards,
Muneesh Kumar G.
 


I really thank you very much. I think I was going crazy. It turns out the problem was standing right in front of my eyes. Very simple but very helpful.
Best regards.


MK Muneesh Kumar G Syncfusion Team July 3, 2019 05:35 AM UTC

Hi Aurea,  
 
Thanks for the update. 
  
We are glad to know that the given solution works. Please let us know if you need any further assistance. 
 
Regards, 
Muneesh Kumar G.   


Loader.
Up arrow icon