@admin thanks for pointing that out. I had to prefix the data with @root because I was inside an iteration.
I
iii-james
@iii-james
0
Reputation
6
Posts
233
Profile views
0
Followers
0
Following
Posts made by iii-james
-
RE: Add a watermark to second of 3 PDF's
-
RE: Add a watermark to second of 3 PDF's
@admin I actually have another scenario. In the watermark template I need to be able to access the data passed into the parent template. Is that possible?
-
Add a watermark to second of 3 PDF's
I am using this post as a reference. I have a pdf that has 3 pages. I only want to merge a watermark on the second one. Is this possible with pdfUtils?
const jsreport = require('jsreport-proxy') async function afterRender(req, res) { const watermarkRes = await jsreport.render({ template: { name: 'Watermark' } }) const $pdf = await jsreport.pdfUtils.parse(res.content) const pagesToMerge = new Array($pdf.pages.length).fill(watermarkRes.content) const originalBuffer = Buffer.from(res.content) const withWatermarkBuffer = await jsreport.pdfUtils.merge(originalBuffer, pagesToMerge) res.content = await jsreport.pdfUtils.append(res.content, withWatermarkBuffer) }
-
RE: Render multiple Highchart's to 1 PDF with page breaks after each.
I found a solution. See the playground above and the "multiple-highcharts-fix" template.
-
Render multiple Highchart's to 1 PDF with page breaks after each.
The chart renders but only the last chart in the array is displayed. Not sure how to use a page-break in this situation.
Here it is in the playground.
Template:
<style> html, body { height: 100%; width: 100%; } .page-break { display: block; page-break-before: always; } </style> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script src="http://code.highcharts.com/8.0.4/highcharts.js"></script> <script src="http://code.highcharts.com/8.0.4/highcharts-3d.js"></script> <div id="container" > <div id="chart" style="width:1024px;height:768px"></div> </div> <script> $(function () { var data = {{{toJSON this}}} data.charts.forEach(function(data) { var chart = new Highcharts.Chart({ chart: { renderTo: 'chart', type: 'column', }, colors: ['#7cb5ec'], title: { text: data.teamMember +'('+ data.dateRange +')', style: { fontSize: '40px' } }, subtitle: { text: 'Operations Scanned', style: { fontSize: '20px' } }, legend: { enabled: false }, xAxis: { categories: data.categories, crosshair: true, labels: { rotation: -60, style: { color: 'black', fontSize: '16px', // fontSize: 11px } }, }, yAxis: { min: 0, tickInterval: 10, title: { text: '' }, stackLabels: { enabled: true, style: { fontSize: '16px', color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray' } }, }, plotOptions: { series: { animation: false, }, column: { stacking: 'normal', dataLabels: { enabled: false, color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white', formatter:function() { if(this.y != 0) { return this.y; } } }, pointPadding: 0.2, borderWidth: 0 } }, series: data.series }); }) }); </script>
Data:
{ "charts": [ { "series": [ { "data": [ 29, 20, 19, 9, 27, 67 ] } ], "categories": [ "12/06/17", "12/07/17", "12/08/17", "12/11/17", "12/12/17", "12/13/17" ], "teamMember": "Jane D.", "dateRange": "12/06/17-12/13/17" }, { "series": [ { "data": [ 30, 19, 20, 11, 25, 99 ] } ], "categories": [ "12/06/17", "12/07/17", "12/08/17", "12/11/17", "12/12/17", "12/13/17" ], "teamMember": "John D.", "dateRange": "12/06/18-12/13/18" } ] }