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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to put the chart in the generated PDF document?

Thread ID:





119103 May 11,2015 08:40 AM UTC May 23,2015 07:09 AM UTC ASP.NET MVC 5
Tags: Chart
Asked On May 11, 2015 08:40 AM UTC


The pdf document generated by the controller need to embed a radar chart type. 
The document will be generated on the page that does not have an embedded chart.
How do I accomplish this by using the SyncFusion library ?


Vinothkumar Arumugam [Syncfusion]
Replied On May 12, 2015 01:21 PM UTC

Hi Robert,

We have analyzed this. Currently there is no support to embed[export] chart as PDF file. So we have already logged an feature request for this “Support to export chart as PDF”. A support incident to track the status of this feature has been created under your account. Please log on to our support website to check for further updates


Please let us know if you have any concern.


Vinothkumar Arumugam.

Replied On May 12, 2015 10:20 PM UTC


Can I hope that chart will be one of the elements that will be rendered in a pdf document?


Vinothkumar Arumugam [Syncfusion]
Replied On May 13, 2015 01:36 PM UTC

Hi Robert,

We have analyzed your query. We can’t render chart in pdf as of now but as a work around, we can able to save chart in pdf .you can achieve your requirements by applying following code snippet.

Code Snippet [MVC]:Index.chhtml

· Create a form to send an image to server as below

var canvas = document.getElementById('container_canvas');

var image = canvas.toDataURL("image/png");

var form = CreateElement('form', ["method", "action", "style"], ["post", "/ChartExportService.asmx/SaveChart", "display:hidden;"]);

var file = CreateElement("input", ["type", "name", "value"], ["hidden", "data", image]);

var format = CreateElement("input", ["type", "name", "value"], ["hidden", "format","PDF"]);






· Create the Pdf and save the image .

PdfDocument pdfDoc = new PdfDocument();


pdfDoc.Pages[0].Graphics.DrawImage(PdfImage.FromStream(stream), new PointF(10, 30));




We have prepared a sample based on your requirements .You can download it from below link.

Sample Link:

Please let us know if you have any concern.


Vinothkumar Arumugam.

Replied On May 22, 2015 07:01 AM UTC

hi Vinothkumar ,
Can I put chart as an image on pdf if yes then please give sample example for xamrin.forms android.

Vinothkumar Arumugam [Syncfusion]
Replied On May 23, 2015 07:09 AM UTC

Hi Dnyani,

We have analyzed your query, Chart image render in PDF by using Syncfusion PDF control.

Find the below steps to export chart image to PDF:

Steps to export chart image:

I. Applying following code snippet to export and download the chart image as below.

if (document.getElementById('download').addEventListener)

document.getElementById('download').addEventListener('click', download, false);


document.getElementById('download').attachEvent('click', download, false);

function download() {

var canvas = $("#container").ejChart("exportChart");

var dt = canvas.toDataURL();

this.rel='nofollow' href = dt;


II. Run the sample

III. Click on Export image

4. Save image to your specified folder location with name Chart. This location needed for PDF generator.

Image saved in below location

Location: F:\2015Volume\Support\Incident\Samples\MVC\22.5.2015\WebApplication1\WebApplication1\exportchartImage\Chart.png

Once above steps completed.

5. Steps to Render chart image in PDF

I. Referring DLL’s


II. Applying following code snippet to post view control to HomeController

function ExportChart(sender) {

var string = "post image to controller";


type: "POST",

url: "Home/DATACRUD",

data: JSON.stringify({ "XmlParms": string }),

contentType: "application/json; charset=utf-8",

dataType: "json",

async: false,

success: function (r) {



error: function (r) {





III. Load chart image into the PDF document

//Using following namespaces

using Syncfusion.Pdf;

using Syncfusion.Pdf.Graphics;

//Put your pdf document here

PdfLoadedDocument loaded = new PdfLoadedDocument(@"F:\2015Volume\Support\Incident\Samples\MVC\22.5.2015\WebApplication1\WebApplication1\OutputPdf\pdfDocument.pdf");

//Specied your downloaded chart image location

PdfImage image = PdfImage.FromFile( @"F:\2015Volume\Support\Incident\Samples\MVC\22.5.2015\WebApplication1\WebApplication1\exportchartImage\Chart.png");

//Specify in which page loacation to your chart image render in PDF.

//In RectangleF first two parameters represent starting position of the Image(x,y),and next two parameters represent width and hight of the Image.

loaded.Pages[0].Graphics.DrawImage(image, new RectangleF(0, 0, 500, 900));

//The Resultant document saved below loaction. loaded.Save(@"F:\2015Volume\Support\Incident\Samples\MVC\22.5.2015\WebApplication1\WebApplication1\OutputPdf\pdfDocument.pdf");

Screen Shots:

Click on PDF button .Ajax post the button control to HomeController then image added to the specified page of the pdf document. Final result will be like as follows

We have prepared a sample .you can download it from below sample link

Sample Link:


Please let us know if you any further assistance.


Vinothkumar Arumugam.

Note: Open the sample in following browsers

1. Mozilla Firefox

2. Google chrome


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon