I am using the JS code below to generate a pdf file for my multiple charts. But it puts all the charts on a single page. My question is how can I modify it to set each chart in a single page. And how can I type a title in the pdf for each chart. So its a title then chart image and so on.
JS code:
<script type="text/javascript">
$('#downloadPdf').click(function(event) {
// get size of report page
var reportPageHeight = $('#reportPage').innerHeight();
var reportPageWidth = $('#reportPage').innerWidth();
// create a new canvas object that we will populate with all other canvas objects
var pdfCanvas = $('<canvas />').attr({
id: "canvaspdf",
width: reportPageWidth,
height: reportPageHeight
});
// keep track canvas position
var pdfctx = $(pdfCanvas)[0].getContext('2d');
var pdfctxX = 0;
var pdfctxY = 0;
var buffer = 100;
// for each chart.js chart
$("canvas").each(function(index) {
// get the chart height/width
var canvasHeight = $(this).innerHeight();
var canvasWidth = $(this).innerWidth();
// draw the chart into the new canvas
pdfctx.drawImage($(this)[0], pdfctxX, pdfctxY, canvasWidth, canvasHeight);
pdfctxX += canvasWidth + buffer;
// our report page is in a grid pattern so replicate that in the new canvas
if (index % 2 === 1) {
pdfctxX = 0;
pdfctxY += canvasHeight + buffer;
}
});
// create new pdf and add our new canvas as an image
var pdf = new jsPDF('l', 'pt', [reportPageWidth, reportPageHeight]);
pdf.addImage($(pdfCanvas)[0], 'PNG', 0, 0);
// download the pdf
pdf.save('filename.pdf');
});
</script>
<script type="text/javascript">
$('#downloadPdf').click(function(event) {
var x = 480; var xplus = 600;
var y = 20; var yplus = 400;
// get size of report page
var reportPageHeight = $('#reportPage').innerHeight()/18 ; // 18 is the number of rows of the charts
var reportPageWidth = $('#reportPage').innerWidth()/2; // because i have 2 charts in one column so i divided the width by 2
var pdf = new jsPDF('l', 'pt', [reportPageWidth, reportPageHeight]);
// as php here I loop for my charts IDs
<?php for($i2=0; $i2< sizeof($IDS); $i2++)
{ ?>
// create a new canvas object that we will populate with all other canvas objects
var pdfCanvas = $('<canvas />').attr({
id: "<?php echo $i2; ?>",
width: reportPageWidth,
height: reportPageHeight
});
// keep track canvas position
var pdfctx = $(pdfCanvas)[0].getContext('2d');
var pdfctxX = 0;
var pdfctxY = 0;
var buffer = 100;
// for each chart.js chart
$("#<?php echo $IDS[$i2];?>").each(function(index) {
// get the chart height/width
var canvasHeight = $(this).innerHeight();
var canvasWidth = $(this).innerWidth();
// draw the chart into the new canvas
pdfctx.set
pdfctx.drawImage($(this)[0], pdfctxX, pdfctxY, canvasWidth, canvasHeight);
pdfctxX += canvasWidth + buffer;
});
var title = document.getElementById("description<?php echo $IDS[$i2]; ?>").innerText;
pdf.text(350, 30, title);
pdf.addImage($(pdfCanvas)[0], 'PNG', 200, 50);
<?php if($i2< sizeof($IDS)-1 ){ ?>
pdf.addPage();
<?php } ?>
<?php }
?> pdf.save('BarChart.pdf');
})
</script>