I'm trying to create images of graphs generated using Higharts server side to be used in PDF creation.
I have installed PhantomJS on my Centos 6.5 server in order to run the generate the Highcharts images.
I am using PHP and am struggling to understand the steps I need to take to actually 'run' the javascript that will results in images saved server side for use with my PDFs (I am using mPDF to generate the PDFs).
The process I need:
- User clicks 'download PDF'
- Several charts and graphs are geneated server side, saved to a file on the server
- mPDF can refernence these files in building the PDF and offering it for download
Here's what I have tried so far
Running PhantomJS from PHP Following this stack overflow question "how to Execute PhantomJS from PHP" I infer that I can run the PhantomJS application in this kind of a way.
exec('/usr/bin/phantomjs test.js');
Where test.js is a javascript file containing the javascript required to build the highchart and generate the exported image file of the graph in question, in PNG format.
Testing the exec() method for PhatomJS I have tested the successful running of phatomjs using php by testing
exec('/usr/bin/phantomjs --version', $o, $e);
print_r($o); echo $e;
Which correctly gives me my phantomJS version number (1.9.8) and a 0 error code (indicating no errors) so I think PhantomJS is up and running ok and and I am using the right path to get to it, and seem to be executing it ok.
Creating a Javascript file that will make a server side image of a graph
Following this response to a similar question to mine, I infer that the form of the test.js file should be something like this:
var system = require('system');
var page = require('webpage').create();
var fs = require('fs');
// load JS libraries
page.injectJs("https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js");
page.injectJs("/js/highcharts/highcharts.js");
page.injectJs("/js/highcharts/modules/exporting.js");
// chart demo
var args = {
width: 600,
height: 500
};
var svg = page.evaluate(function(opt){
$('body').prepend('<div id="container"></div>');
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
width: opt.width,
height: opt.height
},
exporting: {
enabled: false
},
title: {
text: 'Combination chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums']
},
yAxis: {
title: {
text: 'Y-values'
}
},
labels: {
items: [{
html: 'Total fruit consumption',
style: {
left: '40px',
top: '8px',
color: 'black'
}
}]
},
plotOptions: {
line: {
dataLabels: {
enabled: true
},
enableMouseTracking: false
},
series: {
enableMouseTracking: false,
shadow: false,
animation: false
}
},
series: [{
type: 'column',
name: 'Andrii',
data: [3, 2, 1, 3, 4]
}, {
type: 'column',
name: 'Fabian',
data: [2, 3, 5, 7, 6]
}, {
type: 'column',
name: 'Joan',
data: [4, 3, 3, 9, 0]
}, {
type: 'spline',
name: 'Average',
data: [3, 2.67, 3, 6.33, 3.33],
marker: {
lineWidth: 2,
lineColor: 'white'
}
}, {
type: 'pie',
name: 'Total consumption',
data: [{
name: 'Andrii',
y: 13,
color: '#4572A7'
}, {
name: 'Fabian',
y: 23,
color: '#AA4643'
}, {
name: 'Joan',
y: 19,
color: '#89A54E'
}],
center: [100, 80],
size: 100,
showInLegend: false,
dataLabels: {
enabled: false
}
}]
});
return chart.getSVG();
}, args);
// Saving SVG to a file
fs.write("demo.svg", svg);
// Saving diagram as PDF
page.render('demo.pdf');
phantom.exit();
But this seems to write a pdf and png file to... somewhere (where? The same directory test.js is in?)
- How can I get it to render a PNG instead of a PDF?
Using the exec error reporting the above is giving me exit code 11, which I see here is a segmentation fault?
Testing
Note I have tested the js script with a simple example of screencapture the phantomJS site provides:
var page = require('webpage').create();
page.open('http://github.com/', function() {
page.render('github.png');
phantom.exit();
});
To replace my highcharts generation javacsript, but it also returns exit code 11.
I thought it might be a write access issue so tested it writing to a file where I changed the chmod to 777. No difference
Running the above test script from the command line results in phantomJS crashing and a segmentation fault.
I have also now tried running a js file that attempts no writing to the server at all, only writing 'Hello, world!' to the console log, exit code 11 remains when the below is the sole occupancy of test.js
console.log('Hello, world!');
phantom.exit();
