I have a web page created in Fantom that displays many charts created in HighCharts and I am turning this page into a PDF successfully using a script I created in Phantomjs.
The problem is that I have 4 HighCharts in total but the third HighChart only shows up in the PDF about half the time. The other 3 HighCharts show up in the pdf 100% of the time. Here is the HighChart code below for the HighChart that shows up only 50% of the time.
setTimeout(function () { var cchChart = Highcharts.chart('containerCHH',
{ chart: { type: 'column' },
title: {text: 'Cooling and Heating Hours'},
xAxis: {categories: ['TRTU39', 'TRTU40', 'TRTU41', 'TRTU42', 'TRTU43', 'TRTU44', 'TRTU45', 'TRTU46', 'TRTU47', 'TRTU48', 'TRTU49'],
crosshair: true },
yAxis: { min: 0, gridLineWidth: 1, minorGridLineWidth: 0, gridLineDashStyle: 'dash', GridColor: '#ECECED',
title: { text: 'Hours' }},
credits: { enabled: false },
tooltip: { enabled: false },
plotOptions: { column: { pointPadding: 0.2, borderWidth: 0 }},
series: [
{
name: 'Cooling Single Stage (Hr)',
data: [260,350,420,370,130,null,null,null,null], color:'#CCFFFE',
animation: false },
{
..etc
},
{
... etc
},
{
... etc
}]})}, 1);
I set my phantomjs script with these setTimeouts
resourceWait = 300,
maxRenderWait = 5000,
page.open(url, function (status) {
if (status !== "success") {
console.log('Unable to load url');
phantom.exit();
} else {
forcedRenderTimeout = setTimeout(function () {
console.log("Before Login - moving onto login. count: " + count);
login();
console.log("Past Login - moving onto render. count: " + count);
doRender();
}, maxRenderWait);
}
});
This is my render timeout below in Phantomjs
renderTimeout = setTimeout(doRender, resourceWait)
But it doesn't seem to matter how much I increase the timeouts, it doesn't improve the 3rd HighCharts appearance rate in the PDF.
I am really confused about this situation and was hoping a HighChart wizard could lend me a hand! I really do not think its a Phantomjs issue at this point.