Spicing up your PDFs with Highcharts charting API is really easy. All you need to do is disable animations in the Javascript that creates your Highcharts graph and set our JavaScript parameter to true when making your POST request.
Animations look really cool in a browser, but DocRaptor’s HTML-to-PDF service expects a static resource to convert into a PDF, and animations aren’t exactly static. You’ll just get a blank graph when attempting to use Highcharts unless you disable animation. Luckily enough, disabling animations is also easy to do:
Most likely, you'll also want to delay PDF rendering while the JavaScript executes. The simple example below merely delays for three seconds, but you can also detect when the JavaScript has finished loading the chart.
Here's how to make a PDF with DocRaptor that contains a Highchart:
<html>
<!-- One of many ways to make sure the chart fits on the page -->
<style type="text/css">
@page {
prince-shrink-to-fit: auto; /* sizes entire document to contents of first page*/
}
</style>
<body>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<!-- Highcharts demo code taken from http://www.highcharts.com/demo/line-labels -->
<script>
$(function () {
$('#container').highcharts({
chart: {
type: 'line'
},
title: {
text: 'Monthly Average Temperature'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature (°C)'
}
},
plotOptions: {
line: {
dataLabels: {
enabled: true
},
enableMouseTracking: false
}
},
series: [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}, {
name: 'London',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}]
});
});
</script>
<!-- Highcharts often waits long enough that DocRaptor thinks the javascript is finished -->
<!-- when it is not. -->
<!-- This function tells the DocRaptor javascript engine to wait 3 seconds before finishing. -->
<!-- https://docraptor.com/documentation/api#api_javascript -->
<script>
var didWait = false;
// DocRaptor polls docraptorJavaScriptFinished until it is true
docraptorJavaScriptFinished = function() {
if (! didWait) {
setTimeout(function(){
didWait = true;
}, 3000);
return false;
}
return true;
}
</script>
<!-- Container for chart -->
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>