How to put the chart in the generated PDF document?
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.
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
