I am trying to generate a PDF file that includes Highcharts in them as part of the PDF. i.e. html tables followed by Graphs, more tables etc. I am using PhantomJS (and have Highcharts-Convert.js). When I create the PDF with the PhantomJS rasterize.js file I get the PDF but the Highcharts come out wrong (the column bars for example dont climb to their correct number - if the value is 200, the bar would rise to 50 for example).
I think that Phantomjs with highcharts-convert.js is just per graph (like when you save as PDF from the chart). How do I sort this for the entire page that contains HTML and Highcharts graphs?
In other words, looking to "export entire page" as PDF (preferably through command line).
Been going crazy trying to solve, appreciate the assistance here.
I have inserted the code below. This is an example of the completed HTML page that is generated at Server side that I want to convert to PDF automatically. Sorry new to posting so hope I am doing it right.
<HTML>
<HEAD>
<TITLE>My Title</TITLE>
<SCRIPT src="include/jquery-1.9.1.js"></SCRIPT>
<SCRIPT src="include/jquery-ui.js"></SCRIPT>
<SCRIPT src="include/highcharts.js"></SCRIPT>
<SCRIPT src="include/exporting.js"></SCRIPT>
<SCRIPT src="include/highcharts-more.js"></SCRIPT>
<SCRIPT>
$(function () {
$('#DailyAllDoors').highcharts({
chart: {
type: 'column',
width:width,
borderColor: '#000000',
borderWidth: 2
},
credits: {
enabled: false
},
exporting: { enabled: true },
title: {
text: 'Daily Report '
},
subtitle: {
text: '01 July 2015 to : 31 July 2015 (31 Days)'
},
xAxis: {
categories: [
'Wed 1 July 2015','Thu 2 July 2015','Fri 3 July 2015','Sat 4 July 2015','Sun 5 July 2015','Mon 6 July 2015','Tue 7 July 2015','Wed 8 July 2015','Thu 9 July 2015','Fri 10 July 2015','Sat 11 July 2015','Sun 12 July 2015','Mon 13 July 2015','Tue 14 July 2015','Wed 15 July 2015','Thu 16 July 2015','Fri 17 July 2015','Sat 18 July 2015','Sun 19 July 2015','Mon 20 July 2015','Tue 21 July 2015','Wed 22 July 2015','Thu 23 July 2015','Fri 24 July 2015','Sat 25 July 2015','Sun 26 July 2015','Mon 27 July 2015','Tue 28 July 2015','Wed 29 July 2015','Thu 30 July 2015','Fri 31 July 2015',
],
labels: {
rotation: -45,
align: 'right',
step:1,
}
},
yAxis: [{
min: 0,
labels: {
formatter: function () {
return Highcharts.numberFormat(this.value,0);
},
style: {
color: 'black'
}
},
title: {
text: ' Visitors',
style: {
color: 'black'
}
},
stackLabels: {
enabled: false,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
},
formatter: function () {
return Highcharts.numberFormat(this.total,0);
}
}
}
],
tooltip: {
headerFormat: '<strong><span style="font-size:12px">{point.key}</span></strong><table width="250">',
pointFormat: '<tr><td style="color:{series.color};padding:0"><font size="2px">{series.name}: </font></td>' +
'<td style="padding:0"><font style="color:{series.color}" size="2px"><b>{point.y}</b></font></td></tr>',
footerFormat: '<tr><td padding:0"><font size="1px"><em>(Disclaimer: Averages indicated for the period selected)</em></font></td></tr></table>',
shared: true,
useHTML: true
},
plotOptions: {
line: {
marker: {
enabled: false
}
},
column: {
stacking: 'normal',
dataLabels: {
enabled: false,
style: {
fontWeight: 'bold',
color: 'white',
},
formatter: function () {
return Highcharts.numberFormat(this.y,0);
}
}
}
},
series: [
{
id: 'Total ',
name: 'Total',
data: [
4593,4667,6852,{y:9792, color: 'grey'},{y:7603, color: 'grey'},3455,3312,3380,3526,5333,{y:7891, color: 'grey'},{y:6293, color: 'grey'},2685,3144,3319,3696,5603,{y:7328, color: 'grey'},{y:5352, color: 'grey'},2299,2224,2563,2576,5226,{y:9534, color: 'grey'},{y:7373, color: 'grey'},2763,2899,3123,3468,6481
]
},
{
id: ' Average',
name: ' Average',
yAxis: 0,
type: 'line',
color: '#00806b',
data: [
4785,4785,4785,4785,4785,4785,4785,4785,4785,4785,4785,4785,4785,4785,4785,4785,4785,4785,4785,4785,4785,4785,4785,4785,4785,4785,4785,4785,4785,4785,4785,
],
dataLabels: {
enabled: false,
color: 'red',
formatter: function () {
return Highcharts.numberFormat(this.y,0);
}
}
}
,{
name: 'Event Days',
yAxis: 0,
type: 'line',
color: '#ed0181',
data: [],
}
,{
type: 'scatter',
name: ' ',
tooltip: {
enabled: false
},
dataLabels: {
format: '{key} Average',
enabled: true,
color: '#00806b',
fontWeight: 'bold',
y: 0,
},
data: [
{ x: 1, y: 4785, name: '4 785'}
],
marker: {
enabled: false,
}
}
]
});
});
</SCRIPT>
</HEAD>
<BODY>
<TABLE bgcolor="#00b9f1" border="0" width="100%" align="center">
<TR>
<TD height="30" align="left"><STRONG><FONT color="white">TOTALS</FONT></STRONG>
</TD>
</TR>
</TABLE>
<DIV id="DailyAllDoors" width="300"></DIV>
<BR><BR>
<TABLE border="1" width="70%">
<TR>
<TD bgcolor="#000080"><FONT color="#FFFFFF">Date</FONT>
</TD>
<TD bgcolor="#000080"><FONT color="#FFFFFF">Days</FONT>
</TD>
<TD bgcolor="#000080"><FONT color="#FFFFFF"> Visitors</FONT>
</TD>
<TD bgcolor="#000080"><FONT color="#FFFFFF">Event Day</FONT>
</TD>
<TD bgcolor="#000080"><FONT color="#FFFFFF">Event Day Description</FONT>
</TD>
</TR>
<TR>
<TD> 01 July 2015
</TD>
<TD> Wed
</TD>
<TD> 4593
</TD>
<TD>
</TD>
<TD>
</TD>
</TR>
<TR>
<TD> 01 July 2015
</TD>
<TD> Wed
</TD>
<TD> 4593
</TD>
<TD>
</TD>
<TD>
</TD>
</TR>
<TR>
<TD> 01 July 2015
</TD>
<TD> Wed
</TD>
<TD> 4593
</TD>
<TD>
</TD>
<TD>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Finally I am running PhantomJS as:
phantomjs --web-security=false rasterize.js "http://localhost:151/Reports.asp" reports.pdf
The above works but creates a PDF with Highcharts where the column bar doesnt rise to the correct point (if the value is 1000, it climbs to 50 for example).
