How to draw multiple charts in a PDF in Xamarin

Syncfusion Essential PDF is a Xamarin PDF library used to create, read, and edit PDF documents. Using this library, you can draw multiple charts in PDF document.

Steps to draw multiple charts in PDF document programmatically:

1. Create a new C# Xamarin.Forms application project.
2. Select a project template and required platforms to deploy the application. In this application, to share the portable assemblies across multiple platforms, the .NET Standard code sharing strategy has been selected. For more details about code sharing, refer here.
   Note:

   If .NET Standard is not available in the code sharing strategy, the Portable Class Library (PCL) can be selected.

3. Install the Syncfusion.Xamarin.SfChart and Syncfusion.Xamarin.PDF NuGet packages as a reference to your Portable/NetStandard project from NuGet.org.
4. Add new Forms XAML page in portable project if there is no XAML page is defined in the App class. Otherwise, proceed to the next step.

1. To add the new XAML page, right-click the project and select Add ->New Item and add a Forms XAML page from the list and name it as MainPage.
2. In App class of portable project (App.cs), replace the existing constructor of App class with the following code snippet, which invokes the MainPage.

   public App()
   {
       //The root page of your application
       MainPage = new MainPage();
   }
   

5. In the MainPage.xaml, add new button and charts as follows.

   <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
                xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                x:Class="MultipleChartsInPDF. MainPage">
   <StackLayout>
           <Button Text="Export as PDF" Clicked="OnButtonClicked" />
           <chart:SfChart x:Name="chart1" BackgroundColor="LightGray" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" >
               <chart:SfChart.BindingContext>
                   <local:ChartViewModel/>
               </chart:SfChart.BindingContext>
               <chart:SfChart.PrimaryAxis>
                   <chart:CategoryAxis LabelPlacement="BetweenTicks"/>
               </chart:SfChart.PrimaryAxis>
               <chart:SfChart.SecondaryAxis>
                   <chart:NumericalAxis Interval="5"/>
               </chart:SfChart.SecondaryAxis>
               <chart:SfChart.Series>
                   <chart:ColumnSeries ItemsSource="{Binding ColumnData}" XBindingPath="XValue" YBindingPath="YValue" DataMarkerPosition="Center" >
                       <chart:ColumnSeries.DataMarker>
                           <chart:ChartDataMarker >
                               <chart:ChartDataMarker.LabelStyle>
                                   <chart:DataMarkerLabelStyle FontSize="16" FontAttributes="Bold" />
                               </chart:ChartDataMarker.LabelStyle>
                           </chart:ChartDataMarker>
                       </chart:ColumnSeries.DataMarker>
                   </chart:ColumnSeries>
               </chart:SfChart.Series>
           </chart:SfChart>
           <chart:SfChart x:Name="chart2" BackgroundColor="LightSlateGray" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" >
               <chart:SfChart.BindingContext>
                   <local:ChartViewModel/>
               </chart:SfChart.BindingContext>
               <chart:SfChart.PrimaryAxis>
                   <chart:CategoryAxis LabelPlacement="BetweenTicks"/>
               </chart:SfChart.PrimaryAxis>
               <chart:SfChart.SecondaryAxis>
                   <chart:NumericalAxis Interval="5"/>
               </chart:SfChart.SecondaryAxis>
               <chart:SfChart.Series>
                   <chart:ColumnSeries ItemsSource="{Binding ColumnData2}" XBindingPath="XValue" YBindingPath="YValue" DataMarkerPosition="Center" >
                       <chart:ColumnSeries.DataMarker>
                           <chart:ChartDataMarker >
                               <chart:ChartDataMarker.LabelStyle>
                                   <chart:DataMarkerLabelStyle FontSize="16" FontAttributes="Bold" />
                               </chart:ChartDataMarker.LabelStyle>
                           </chart:ChartDataMarker>
                       </chart:ColumnSeries.DataMarker>
                   </chart:ColumnSeries>
               </chart:SfChart.Series>
           </chart:SfChart>
       </StackLayout>
   </ContentPage>
   

6. Include the following namespace in the MainPage.xaml.cs file.

   using Syncfusion.Pdf;
   using Syncfusion.Pdf.Graphics;
   using Syncfusion.Drawing;
   using Syncfusion.SfChart.XForms;
   

7. Include the following code snippet in the click event of the button in MainPage.xaml.cs to draw multiple charts in single PDF file and save it in a stream.

   Stream[] chartStreams;
   SfChart[] charts = new SfChart[] { chart1, chart2 };
   //Get stream from chart object
   if (Device.RuntimePlatform == Device.UWP)
   {
       chartStreams = await Xamarin.Forms.DependencyService.Get<IChartStream>().GetChartStream(charts);
   }
   else
   {
       chartStreams = new Stream[charts.Length];
       for (int i = 0; i < charts.Length; i++)
       {
           chartStreams[i] = charts[i].GetStream();
       }
   }
               
   //Create a new PDF document
   PdfDocument document = new PdfDocument();
   document.PageSettings.Size = new SizeF(500, 180);
   document.PageSettings.Orientation = PdfPageOrientation.Landscape;
   foreach (MemoryStream chartStream in chartStreams)
   {
       //Add a new PDF page
       PdfPage page = document.Pages.Add();
       //Draw chart into page
       page.Graphics.DrawImage(new PdfBitmap(chartStream), new RectangleF(0, 0, page.Graphics.ClientSize.Width, page.Graphics.ClientSize.Height));
   }
   MemoryStream stream = new MemoryStream();
   //Save the document
   document.Save(stream);
   //Close the document
   document.Close(true);
    
   stream.Position = 0;
   //Save the stream as a file in the device and invoke it for viewing
   Xamarin.Forms.DependencyService.Get<ISave>().SaveAsPDF("MultipleCharts.pdf", "application/pdf", stream);
   

8. Add new CS page in portable project and add below code snippet to show multiple charts in single UI.

   public class ChartModel : INotifyPropertyChanged
   {
       private string xValue;
       public string XValue
       {
           get
           {
               return xValue;
           }
           set
           {
               if (value != xValue)
               {
                   xValue = value;
                   OnPropertyChanged("XValue");
               }
           }
       }
       private double yValue;
       public double YValue
       {
           get
           {
               return yValue;
           }
           set
           {
               if (value != yValue)
               {
                   yValue = value;
                   OnPropertyChanged("YValue");
               }
           }
       }
       public ChartModel(string xVal, double yVal)
       {
           XValue = xVal;
           YValue = yVal;
       }
       public event PropertyChangedEventHandler PropertyChanged;
       private void OnPropertyChanged(string propertyName)
       {
           PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
       }
   }
   public class ChartViewModel
   {
       public ObservableCollection<ChartModel> ColumnData { get; set; }
       public ObservableCollection<ChartModel> ColumnData2 { get; set; }
       public ChartViewModel()
       {
           ColumnData = new ObservableCollection<ChartModel>
           {
               new ChartModel("A", 45),
               new ChartModel("B", 54),
               new ChartModel("C", 65),
               new ChartModel("D", 23),
               new ChartModel("E", 55),
           };
           ColumnData2 = new ObservableCollection<ChartModel>
           {
               new ChartModel("F", 25),
               new ChartModel("G", 60),
               new ChartModel("H", 72),
               new ChartModel("I", 40),
           };
       }
   }
   

9. Download the helper files from this link and add them into the mentioned project. These helper files allow you to save the stream as a physical file and open the file for viewing.

• Create a new XML file with the name of provider_path.xml under the Android project Resources folder and add the following code in it. Eg: Resources/xml/provider_path.xml

  <?xml version="1.0" encoding="UTF-8" ?>
  <paths xmlns:android="http://schemas.android.com/apk/res/android">
    <external-path name="external_files" path="."/>
  </paths>
  

• Add the following code to the AndroidManifest.xml file. Located under Properties/AndroidManifest.xml.

  <?xml version="1.0" encoding="utf-8"?>
  <manifest xmlns:android="http://schemas.android.com/apk/res/android" android:versionCode="1" android:versionName="1.0" package="com.companyname.InsertImage">
   <uses-sdk android:minSdkVersion="19" android:targetSdkVersion="27" />
   <application android:label="InsertImage.Android">
      <provider android:name="android.support.v4.content.FileProvider"
            android:authorities="${applicationId}.provider"
            android:exported="false"
            android:grantUriPermissions="true">
        <meta-data android:name="android.support.FILE_PROVIDER_PATHS"
                   android:resource="@xml/provider_paths" />
      </provider>
    </application>
  </manifest>
  

By executing the program, you will get the PDF document as follows.

Download the complete work sample from MultipleChartsInPDF.zip.

Refer here to explore the rich set of Syncfusion Essential PDF features.