Render Skuid pages as PDF

Ideas
13

Hey Rich, We JUST finished our first report containing charts. There was a lot of tweaking that went on to get it to fit, but we did!

Here’s what I did:

  • for all my pdf Skuid pages, I apply a custom theme that I exclusively use for documents. The primary purpose of this was to shrink everything down: adjusted font size (Global level) to 11 px, reduced padding and margins in field editors and tables, removed some borders - stuff like that.
  • My Wrapper that gets sent to DocRaptor (contains all my content) I put a max Width of 735 px. This number just came from playing around with it.

For my document that has charts (I did 2 columns of charts… see below for the screen shots):

  • I used panels to put the charts (not responsive grids, because I wanted them fixed) and set the max height of my charts to 275px, pie charts to 300px (again… I have 2 columns of charts, so your might allow for a larger height. But I found restricting the height made the chart not expand off the page.
  • I used the chart Sub-Title for my title, not the Title (the title font was too big, sub-title was better for me.)
  • We wrote a before render snippet and put it on each chart to reduce the axis fonts and the Legends (for pie charts especially, the legends were HUGE and made the pie super small.) This makes these changes be in-line, and thus get passed over to DocRaptor.

var params = arguments[0], $ = skuid.$;

params.legend.itemStyle = { “color”: “#333333”, “cursor”: “pointer”, “fontSize”: “8px”, “fontWeight”: “bold” };

if (params.chart.type == “line”){
params.xAxis[0].labels = { style: { “color”: “#666666”, “cursor”: “default”, “fontSize”: “8px” } };
params.xAxis[0].title.style = { “color”: “#666666”, “fontSize”: “10px” };
params.yAxis[0].labels = { style: { “color”: “#666666”, “cursor”: “default”, “fontSize”: “8px” } };
params.yAxis[0].title.style = { “color”: “#666666”, “fontSize”: “10px” };
}

else if (params.chart.type == “pie”){
params.legend.labelFormatter = function() {
var words = this.name.split(/[s]+/);
var numWordsPerLine = 3;
var lbl = ;

for (var word in words) {
if (word > 0 && word % numWordsPerLine === 0 && words[word] != ‘(SUM)’)
lbl.push(’
');

lbl.push(words[word]);
}
lbl.pop();
return lbl.join(’ ');
};
}
else {
console.dir(params);
}

This is still an active development project for us. We are getting close, but still have some styling work to do before we start sending these reports to our customers.

Hope some of this is helpful!
Chandra