I got the following error when I try to render charts on the server-side based on this tutorial.
phantomjs highcharts-convert.js -infile options1.json -outfile chart1.png -scale 2.5 -width 300 -constr Chart -callback callback.js
SyntaxError: Parse error
SyntaxError: Parse error
Highcharts.options.parsed
Highcharts.callback.parsed
ReferenceError: Can't find variable: Highcharts
phantomjs://webpage.evaluate():58
phantomjs://webpage.evaluate():103
phantomjs://webpage.evaluate():103
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
The following are the files with hightcharts-convert.js file in the same directory.
ls
callback.js highcharts-more.js highstock.js options1.json
highcharts-convert.js highcharts.js jquery-1.8.2.min.js readme.md
The content of options1.json
{
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
};
The content of callback.js
function(chart) {
chart.renderer.arc(200, 150, 100, 50, -Math.PI, 0).attr({
fill : '#FCFFC5',
stroke : 'black',
'stroke-width' : 1
}).add();
}
Make sure your highstock.js is a text file (not a binary file) ! The file http://code.highcharts.com/stock/highstock.js is gzipped ....
So here a detailled recipe :
Add 3 files in highcharts/exporting-server/phantomjs
cp js/highcharts.js exporting-server/phantomjs/
cp js/highcharts-more.js exporting-server/phantomjs/
curl http://code.highcharts.com/stock/highstock.js -o exporting-server/phantomjs/highstock.js.gz
Now decompressing the file :
gzip -d exporting-server/phantomjs/highstock.js.gz
If you go to the folder :
cd exporting-server/phantomjs/
You can check for md5 checksum (current version 2.3.5) :
4a656e1918e259fbca5bb3bec6e3b945 highcharts-convert.js
3e2a05342b0d4d1b759dffffebc5f23f highcharts-more.js
d6f1e284bc49d0502576e06d905274fd highstock.js
cfa9051cc0b05eb519f1e16b2a6645d7 jquery-1.8.2.min.js
1fde128c0c2f8bf16fa1a4166e9b48c7 readme.md
We could make a sample folder with files :
mkdir test
Put or create the two input files :
1st file : callback.js
function(chart) {
chart.renderer.arc(200, 150, 100, 50, -Math.PI, 0).attr({
fill : '#FCFFC5',
stroke : 'black',
'stroke-width' : 1
}).add();
}
2nd file : infile.json
{
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
};
A sample test, here the command line from the test folder :
phantomjs ../highcharts-convert.js -infile infile.json -callback callback.js -outfile a.png -width 2400 -constr Chart -scale 1
The console result :
Highcharts.imagesLoaded:7a7dfcb5df73aaa51e67c9f38c5b07cb
done loading images
That all for this great library.
Xavier