I can't make Highcharts phantomJs export server work

Question

Big thanks in advance.

I want to set up a phantomjs Highcharts export server. It should accept json options as input and output jpeg image files.

Here is what I do:

1. I download server side js code from this repo: https://github.com/highslide-software/highcharts.com/tree/master/exporting-server/phantomjs
2. I download phantomjs 1.6.0

3. run

   phantomjs highcharts-convert.js -host 127.0.0.1 -port 3001
   

Then I tried to use client code in this site: http://export.highcharts.com/demo to send request. I changed the form action url from this:

    <form id="exportForm" action="./" method="POST">

to this:

    <form id="exportForm" action="http://0.0.0.0:3001" method="POST">

and clicked 'Highcharts config object (JSON)'. All I get is this message:

Failed rendering: SyntaxError: Unable to parse JSON string

Since the same request can be processed correctly in Highcharts server, the error must be in the Highcharts server side js code I'm using. I also tried following command:

phantomjs highcharts-convert.js -infile options.js \
                                -outfile chart.png -scale 2.5 -width 300

With this code in options.js:

{
  infile: {
            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]
                }]
          },
          callback: function(chart){
          chart.renderer
               .arc(200,150,100,50,-Math.PI,0)
               .attr({fill:'#FCFFC5',stroke:'black','stroke-width':1})
               .add();
          },
 constr: "Chart",
 outfile: "//tmp//chart.png"
}

And it generates the png successfully.

I guess Highchart didn't put much work in the exporting functions and I found some typo in the highcharts-convert.js file. Can anyone help me on this? Thanks a lot.

Answer 1

I finally solved the problem. I guess there is mis-understanding in the so called "JSON" string. The Javascript export server does not accept any real "JSON" string. A real "JSON" string would have all strings quoted, some thing like

 {
       "value": [1,2,3],
       "name": "jack"
 }

What the export server accepts are actually a piece of Javascript code to create a Javascript object, like:

 {
       value: [1,2,3],
       name: "jack"
 }

This is because the server will use this string as part of the Javascript code in the generated webpage. I wrote a small function to convert JSON string into this format and pass it to the server, it finally works.

var getUnQuotedJsonString = function (str) {
  return str.replace(/"\w+":/g, function(s, key) {
    return s.replace(/"/g, "");
  });
}