- Getting Started
- Installation
- Key Concepts
- Integrations
- Account & Billing
- Security & Privacy
- PDF Generation
- Reference
- Tutorials
- Troubleshooting
- Excel Generation
- Reference
- Troubleshooting
How to create a PDF with a Highcharts Chart
Highcharts is one of the most popular charting libraries and is used in many DocRaptor PDFs. This tutorial walks through creating a PDF with a Highcharts pie chart. These same steps also apply to line charts, bubble charts, donut charts, or any other chart type—and even other charting libraries.
Enable JavaScript
First, enable JavaScript in the DocRaptor API by setting the javascript
parameter to true
. You can see this parameter defined in any of the complete code examples below the tutorial. DocRaptor disables JavaScript by default to speed up the generation time of documents that don't use JavaScript.
Disable Animation
Many charting library examples include animation by default because it looks impressive, but animation isn't supported by DocRaptor (or PDFs in general). Make sure animation is disabled in your chart; otherwise we may render your document before the chart has completed the animation
Write the HTML and CSS
Let's start by including the Highcharts JavaScript library:
<script src="https://code.highcharts.com/highcharts.js"></script>
Optionally. change the document layout to landscape and remove the default margin to make it a full bleed document (where the content goes to the edges of the document):
@page {
size: landscape;
margin: 0;
}
Most chart libraries, including Highcharts, require the chart's containing element to have an explicit height and width. As we're trying to make a full bleed document, we'll simply define the height and width as the size of DocRaptor's default document size, US-Letter:
<div id="container" style="height: 816px; width: 1056px;"></div>
Create the Chart
To make the actual chart, we'll use the Pie Chart Demo code straight from the Highcharts website:
<script>
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares January, 2015 to May, 2015'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Microsoft Internet Explorer',
y: 56.33
}, {
name: 'Chrome',
y: 24.03,
sliced: true,
selected: true
}, {
name: 'Firefox',
y: 10.38
}, {
name: 'Safari',
y: 4.77
}, {
name: 'Opera',
y: 0.91
}, {
name: 'Proprietary or Undetectable',
y: 0.2
}]
}]
});
</script>
Wait for JavaScript to Finish
Unlike a traditional browser, which is constantly running JavaScript, our PDF renderer must detect when the JavaScript is "finished." Unfortunately, it isn't easy to programmatically detect when charts finish rendering, especially charts with external/AJAX-based data sources.
We recommend using our docraptorJavaScriptFinished()
JavaScript function to explictly tell us when your chart library is finished. When the function returns true
, we'll generate your PDF. For the fastest rendering, you should detect the rendering of the chart element. For simplicity, we'll just wait a couple seconds before making this PDF, which is plenty of time for Highcharts to finish:
<script>
var didWait = false;
docraptorJavaScriptFinished = function() {
if (! didWait) {
setTimeout(function(){
didWait = true;
}, 2000);
return false;
}
return true;
}
</script>
See any of the below complete code samples to generate a Highcharts Pie Chart PDF in your programming language with DocRaptor's HTML-to-PDF API.
Using DocRaptor's API
Below are the basics of using DocRaptor's HTTP API. It can easily be used in any programming language, but if we don't have a native agent for your language, please let us know! That'll help us write the best examples and agents.
The API key shown here, YOUR_API_KEY_HERE
, actually works! Use it for testing without creating an account. The only requirement is test mode must be used (test
parameter set to true
).
To make documents, send a POST request to this URL:
https://YOUR_API_KEY_HERE@staging-api.docraptor.com/docs
Send JSON-encoded API parameters (you'll need to set an HTTP header for Content-Type
as application/json
). These are the only required parameters:
{
"type": "pdf",
"document_content": "Hello World!"
}
Generating the Document with cURL
Here's a completely functional code sample for this tutorial:
cat <<-'DOCUMENT_OPTIONS' > docraptor_parameters.json
{
"test": true,
"document_type": "pdf",
"document_content": "<script src=\"https://code.highcharts.com/highcharts.js\"></script><div id=\"container\" style=\"height: 816px; width: 1056px;\"></div><script>Highcharts.chart('container', {chart: {plotBackgroundColor: null,plotBorderWidth: null,plotShadow: false,type: 'pie'},title: {text: 'Browser market shares January, 2015 to May, 2015'},tooltip: {pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'},plotOptions: {pie: {allowPointSelect: true,cursor: 'pointer',dataLabels: {enabled: false},showInLegend: true}},series: [{name: 'Brands',colorByPoint: true,data: [{name: 'Microsoft Internet Explorer',y: 56.33}, {name: 'Chrome',y: 24.03,sliced: true,selected: true}, {name: 'Firefox',y: 10.38}, {name: 'Safari',y: 4.77}, {name: 'Opera',y: 0.91}, {name: 'Proprietary or Undetectable',y: 0.2}]}],accessibility: {enabled: false}});var didWait = false;docraptorJavaScriptFinished = function() {if (! didWait) {setTimeout(function(){didWait = true;}, 2000);return false;}return true;}</script><style>@page {size: landscape;margin: 0;}</style>",
"javascript": true
}
DOCUMENT_OPTIONS
curl https://YOUR_API_KEY_HERE@api.docraptor.com/docs \
--fail --silent --show-error \
--header "Content-Type:application/json" \
--data @docraptor_parameters.json \
> highcharts-chart.pdf
Downloads
Here are all the files you need to follow this tutorial:
Related Tutorials & Documentation
See the complete PDF tutorial list or review the documentation for additional info, such as generating asynchronous documents.
Frameworks supported
- .NET 4.0 or later
- Windows Phone 7.1 (Mango)
Dependencies
- RestSharp - 105.2.3 or later
- Json.NET - 7.0.0 or later
- JsonSubTypes - 1.2.0 or later
Installing the .NET Agent
With Nuget:
nuget.exe install DocRaptor
With the Package Manager Console:
Install-Package DocRaptor
You can also download the DLL directly from GitHub.
Generating the Document
The API key shown here, YOUR_API_KEY_HERE
, actually works! Use it for testing without creating an account. The only requirement is test mode must be used (test
parameter set to true
).
using DocRaptor.Client;
using DocRaptor.Model;
using DocRaptor.Api;
using System;
using System.IO;
class DocRaptorExample
{
static void Main(string[] args)
{
DocApi docraptor = new DocApi();
// this key works in test mode!
docraptor.Configuration.Username = "YOUR_API_KEY_HERE";
try
{
Doc doc = new Doc(
name: "highcharts-chart",
test: true, // test documents are free but watermarked
documentType: Doc.DocumentTypeEnum.Pdf,
documentContent: System.IO.File.ReadAllText(@"highcharts-chart-content.html"),
// documentUrl: "https://docraptor.com/examples/invoice.html",
javascript: true
// princeOptions: new PrinceOptions(
// media: "print", // @media 'screen' or 'print' CSS
// baseurl: "https://yoursite.com" // the base URL for any relative URLs
// )
);
byte[] document = docraptor.CreateDoc(doc);
File.WriteAllBytes("highcharts-chart.pdf", document);
Console.WriteLine("Successfully created highcharts-chart.pdf!");
} catch (DocRaptor.Client.ApiException error) {
Console.Write(error.ErrorContent);
}
}
}
Downloads
Here are all the files you need to follow this tutorial:
Related Tutorials & Documentation
See the complete PDF tutorial list or review the documentation for additional info, such as generating asynchronous documents.
Install the Java Agent
Add the com.docraptor
package to your project. For example, with Maven you'd add the DocRaptor package to your pom.xml
:
<dependency>
<groupId>com.docraptor</groupId>
<artifactId>docraptor</artifactId>
<version>3.0.0</version>
</dependency>
And then install it:
mvn install com.docraptor
Generating the Document
The API key shown here, YOUR_API_KEY_HERE
, actually works! Use it for testing without creating an account. The only requirement is test mode must be used (test
parameter set to true
).
import com.docraptor.*;
import java.io.*;
import java.net.*;
import java.nio.file.*;
public class DocRaptorExample {
public static void main(String[] args) throws Exception {
DocApi docraptor = new DocApi();
ApiClient client = docraptor.getApiClient();
client.setUsername("YOUR_API_KEY_HERE"); // this key works in test mode!
try {
Doc doc = new Doc();
doc.setTest(true); // test documents are free but watermarked
doc.setDocumentType(Doc.DocumentTypeEnum.PDF);
doc.setDocumentContent(new String(Files.readAllBytes(Paths.get("highcharts-chart-content.html"))));
// doc.setDocumentUrl("https://docraptor.com/examples/invoice.html");
doc.setJavascript(true);
// PrinceOptions princeOptions = new PrinceOptions();
// princeOptions.setMedia("print"); // @media 'screen' or 'print' CSS
// princeOptions.setBaseurl("https://yoursite.com"); // the base URL for any relative URLs
// doc.setPrinceOptions(princeOptions);
byte[] document = docraptor.createDoc(doc);
// createDoc() returns a binary string
FileOutputStream file = new FileOutputStream("highcharts-chart.pdf");
file.write(document);
file.close();
System.out.println("Successfully created highcharts-chart.pdf!");
} catch (ApiException error) {
System.err.println(error);
System.err.println(error.getCode());
System.err.println(error.getMessage());
System.err.println(error.getResponseBody());
}
}
}
Downloads
Here are all the files you need to follow this tutorial:
Related Tutorials & Documentation
See the complete PDF tutorial list or review the documentation for additional info, such as generating asynchronous documents.
The DocRaptor JavaScript Library
The DocRaptor JavaScript library makes it easy to create PDFs with JavaScript. The library does not require jQuery, but you can use jQuery to define your document content. When a PDF is requested, the library constructs a hidden form and submits it to the DocRaptor API. The form is necessary to trigger the browser download window.
This library exposes your API key in your website source code. This code should never be used in a publicly-accessible location, instead try using our referrer-based API or a server-side agent such as PHP or Ruby.
JavaScript Example
<html>
<head>
<script src="https://docraptor.com/docraptor-1.0.0.js"></script>
<script>
var downloadDocumentFrom = function(selector) {
// this key works in test mode!
DocRaptor.createAndDownloadDoc("YOUR_API_KEY_HERE", {
name: "highcharts-chart",
test: true, // test documents are free but watermarked
document_type: "pdf",
document_content: document.querySelector(selector).innerHTML,
// document_url: "https://docraptor.com/examples/invoice.html",
javascript: true
// prince_options: {
// media: "print", // @media 'screen' or 'print' CSS
// baseurl: "https://yoursite.com", // the base URL for any relative URLs
// }
});
};
</script>
<style>
@media print {
#download-button {
display: none;
}
}
</style>
</head>
<body>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 816px; width: 1056px;"></div>
<script>
Highcharts.chart("container", {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: "pie"
},
title: {
text: "Browser market shares January, 2015 to May, 2015"
},
tooltip: {
pointFormat: "{series.name}: <b>{point.percentage:.1f}%</b>"
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: "pointer",
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [
{
name: "Brands",
colorByPoint: true,
data: [
{
name: "Microsoft Internet Explorer",
y: 56.33
},
{
name: "Chrome",
y: 24.03,
sliced: true,
selected: true
},
{
name: "Firefox",
y: 10.38
},
{
name: "Safari",
y: 4.77
},
{
name: "Opera",
y: 0.91
},
{
name: "Proprietary or Undetectable",
y: 0.2
}
]
}
],
accessibility: {
enabled: false
}
});
var didWait = false;
docraptorJavaScriptFinished = function() {
if (!didWait) {
setTimeout(function() {
didWait = true;
}, 2000);
return false;
}
return true;
};
</script>
<style>
@page {
size: landscape;
margin: 0;
}
</style>
<button id="download-button" type="button" onclick="downloadDocumentFrom('html')">Download Document</button>
</body>
</html>
Downloads
Here are all the files you need to follow this tutorial:
Related Tutorials & Documentation
See the complete PDF tutorial list or review the documentation for additional info, such as generating asynchronous documents.
DocRaptor & Node.js
The best way to use DocRaptor with Node.js is directly through our HTTP API. In this example, we'll use the axios module, but you can obviously use any HTTP client you'd like.
Install the Axios Module
npm install axios
Generating the Document
The API key shown here, YOUR_API_KEY_HERE
, actually works! Use it for testing without creating an account. The only requirement is test mode must be used (test
parameter set to true
).
const axios = require("axios");
const fs = require("fs");
const document_content = `
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 816px; width: 1056px;"></div>
<script>
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares January, 2015 to May, 2015'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Microsoft Internet Explorer',
y: 56.33
}, {
name: 'Chrome',
y: 24.03,
sliced: true,
selected: true
}, {
name: 'Firefox',
y: 10.38
}, {
name: 'Safari',
y: 4.77
}, {
name: 'Opera',
y: 0.91
}, {
name: 'Proprietary or Undetectable',
y: 0.2
}]
}],
accessibility: {
enabled: false
}
});
var didWait = false;
docraptorJavaScriptFinished = function() {
if (! didWait) {
setTimeout(function(){
didWait = true;
}, 2000);
return false;
}
return true;
}
</script>
<style>
@page {
size: landscape;
margin: 0;
}
</style>
`;
config = {
url: "https://api.docraptor.com/docs",
method: "post",
responseType: "arraybuffer", //IMPORTANT! Required to fetch the binary PDF
headers: {
"Content-Type": "application/json"
},
data: {
user_credentials: "YOUR_API_KEY_HERE", // this key works in test mode!
doc: {
test: true, // test documents are free but watermarked
document_type: "pdf",
document_content: document_content,
// document_url: "https://docraptor.com/examples/invoice.html",
javascript: true
// prince_options: {
// media: "print", // @media 'screen' or 'print' CSS
// baseurl: "https://yoursite.com", // the base URL for any relative URLs
// }
}
}
};
axios(config)
.then(function(response) {
fs.writeFile("highcharts-chart.pdf", response.data, "binary", function(
writeErr
) {
if (writeErr) throw writeErr;
console.log("Saved highcharts-chart.pdf!");
});
})
.catch(function(error) {
// DocRaptor error messages are contained in the response body
// Since the response is binary encoded, let's decode
var decoder = new TextDecoder("utf-8");
console.log(decoder.decode(error.response.data));
});
Downloads
Here are all the files you need to follow this tutorial:
Related Tutorials & Documentation
See the complete PDF tutorial list or review the documentation for additional info, such as generating asynchronous documents.
Installing the PHP Agent
composer require docraptor/docraptor
Generating the Document
The API key shown here, YOUR_API_KEY_HERE
, actually works! Use it for testing without creating an account. The only requirement is test mode must be used (test
parameter set to true
).
<?php
require_once __DIR__ . "/vendor/autoload.php";
$docraptor = new DocRaptor\DocApi();
# this key works in test mode!
$docraptor->getConfig()->setUsername("YOUR_API_KEY_HERE");
$document_content = <<<DOCUMENT_CONTENT
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 816px; width: 1056px;"></div>
<script>
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares January, 2015 to May, 2015'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Microsoft Internet Explorer',
y: 56.33
}, {
name: 'Chrome',
y: 24.03,
sliced: true,
selected: true
}, {
name: 'Firefox',
y: 10.38
}, {
name: 'Safari',
y: 4.77
}, {
name: 'Opera',
y: 0.91
}, {
name: 'Proprietary or Undetectable',
y: 0.2
}]
}],
accessibility: {
enabled: false
}
});
var didWait = false;
docraptorJavaScriptFinished = function() {
if (! didWait) {
setTimeout(function(){
didWait = true;
}, 2000);
return false;
}
return true;
}
</script>
<style>
@page {
size: landscape;
margin: 0;
}
</style>
DOCUMENT_CONTENT;
try {
$doc = new DocRaptor\Doc();
$doc->setTest(true); # test documents are free but watermarked
$doc->setDocumentType("pdf");
$doc->setDocumentContent($document_content);
# $doc->setDocumentUrl("https://docraptor.com/examples/invoice.html");
$doc->setJavascript(true);
# $prince_options = new DocRaptor\PrinceOptions();
# $doc->setPrinceOptions($prince_options);
# $prince_options->setMedia("print"); # @media 'screen' or 'print' CSS
# $prince_options->setBaseurl("https://yoursite.com"); # the base URL for any relative URLs
$response = $docraptor->createDoc($doc);
# createDoc() returns a binary string
file_put_contents("highcharts-chart.pdf", $response);
echo "Successfully created highcharts-chart.pdf!";
} catch (DocRaptor\ApiException $error) {
echo $error . "\n";
echo $error->getMessage() . "\n";
echo $error->getCode() . "\n";
echo $error->getResponseBody() . "\n";
}
Downloads
Here are all the files you need to follow this tutorial:
Related Tutorials & Documentation
See the complete PDF tutorial list or review the documentation for additional info, such as generating asynchronous documents.
Installing the Python Agent
pip install --upgrade docraptor
Generating the Document
The API key shown here, YOUR_API_KEY_HERE
, actually works! Use it for testing without creating an account. The only requirement is test mode must be used (test
parameter set to true
).
import docraptor
doc_api = docraptor.DocApi()
# this key works in test mode!
doc_api.api_client.configuration.username = 'YOUR_API_KEY_HERE'
document_content = r"""
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 816px; width: 1056px;"></div>
<script>
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares January, 2015 to May, 2015'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Microsoft Internet Explorer',
y: 56.33
}, {
name: 'Chrome',
y: 24.03,
sliced: true,
selected: true
}, {
name: 'Firefox',
y: 10.38
}, {
name: 'Safari',
y: 4.77
}, {
name: 'Opera',
y: 0.91
}, {
name: 'Proprietary or Undetectable',
y: 0.2
}]
}],
accessibility: {
enabled: false
}
});
var didWait = false;
docraptorJavaScriptFinished = function() {
if (! didWait) {
setTimeout(function(){
didWait = true;
}, 2000);
return false;
}
return true;
}
</script>
<style>
@page {
size: landscape;
margin: 0;
}
</style>
"""
try:
response = doc_api.create_doc({
'test': True, # test documents are free but watermarked
'document_type': 'pdf',
'document_content': document_content,
# 'document_url': 'https://docraptor.com/examples/invoice.html',
'javascript': True,
# 'prince_options': # {
# 'media': 'print', # @media 'screen' or 'print' CSS
# 'baseurl': 'https://yoursite.com', # the base URL for any relative URLs
# },
})
# create_doc() returns a binary string
with open('highcharts-chart.pdf', 'w+b') as f:
binary_formatted_response = bytearray(response)
f.write(binary_formatted_response)
f.close()
print('Successfully created highcharts-chart.pdf!')
except docraptor.rest.ApiException as error:
print(error.status)
print(error.reason)
print(error.body)
Downloads
Here are all the files you need to follow this tutorial:
Related Tutorials & Documentation
See the complete PDF tutorial list or review the documentation for additional info, such as generating asynchronous documents.
Installing the Ruby Agent
Add or require the docraptor
gem to your project or script.
Generating the Document
The API key shown here, YOUR_API_KEY_HERE
, actually works! Use it for testing without creating an account. The only requirement is test mode must be used (test
parameter set to true
).
require "docraptor"
DocRaptor.configure do |config|
config.username = "YOUR_API_KEY_HERE" # this key works in test mode!
end
docraptor = DocRaptor::DocApi.new
document_content = <<~'DOCUMENT_CONTENT'
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 816px; width: 1056px;"></div>
<script>
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares January, 2015 to May, 2015'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Microsoft Internet Explorer',
y: 56.33
}, {
name: 'Chrome',
y: 24.03,
sliced: true,
selected: true
}, {
name: 'Firefox',
y: 10.38
}, {
name: 'Safari',
y: 4.77
}, {
name: 'Opera',
y: 0.91
}, {
name: 'Proprietary or Undetectable',
y: 0.2
}]
}],
accessibility: {
enabled: false
}
});
var didWait = false;
docraptorJavaScriptFinished = function() {
if (! didWait) {
setTimeout(function(){
didWait = true;
}, 2000);
return false;
}
return true;
}
</script>
<style>
@page {
size: landscape;
margin: 0;
}
</style>
DOCUMENT_CONTENT
begin
response = docraptor.create_doc(
test: true, # test documents are free but watermarked
document_type: "pdf",
document_content: document_content,
# document_url: "https://docraptor.com/examples/invoice.html",
javascript: true,
# prince_options: {
# media: "print", # @media 'screen' or 'print' CSS
# baseurl: "https://yoursite.com", # the base URL for any relative URLs
# }
)
# create_doc() returns a binary string
File.write("highcharts-chart.pdf", response, mode: "wb")
puts "Successfully created highcharts-chart.pdf!"
rescue DocRaptor::ApiError => error
puts "#{error.class}: #{error.message}"
puts error.code
puts error.response_body
puts error.backtrace[0..3].join("\n")
end
Downloads
Here are all the files you need to follow this tutorial:
Related Tutorials & Documentation
See the complete PDF tutorial list or review the documentation for additional info, such as generating asynchronous documents.