How to put the chart in the generated PDF document?

[RobertS]

Hi,

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 ?

Regards,

RobertS

[Vinothkumar Arumugam]

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

https://www.syncfusion.com/account/login?ReturnUrl=%2fsupport%2fdirecttrac%2fincidents

Please let us know if you have any concern.

Thanks,

Vinothkumar Arumugam.

[RobertS]

Hi,

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

Regards,

RobertS

[Vinothkumar Arumugam]

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"]);

form.appendChild(file);

form.appendChild(format);

document.body.appendChild(form);

form.submit();

document.body.removeChild(form);

· Create the Pdf and save the image .

PdfDocument pdfDoc = new PdfDocument();

pdfDoc.Pages.Add();

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

pdfDoc.Save(Response.OutputStream);

pdfDoc.Close();

Screenshot:

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

Sample Link:
WebApplication1.zip

Please let us know if you have any concern.

Thanks,

Vinothkumar Arumugam.

[Dnyani]

hi Vinothkumar ,

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

[Vinothkumar Arumugam]

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);

else

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

Syncfusion.Pdf.Base.dll

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

function ExportChart(sender) {

var string = "post image to controller";

$.ajax({

type: "POST",

url: "Home/DATACRUD",

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

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

dataType: "json",

async: false,

success: function (r) {

alert("success")

},

error: function (r) {

alert("failure")

}

});

}

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:

http://www.syncfusion.com/downloads/support/forum/119103/WebApplication1-253868983.zip

Please let us know if you any further assistance.

Thanks,

Vinothkumar Arumugam.

Note: Open the sample in following browsers

1. Mozilla Firefox

2. Google chrome