local phantomjs/highcharts export server on tomcat

Question

I have searched everywhere on this site and the internet without getting a clear understanding.

I have successfully installed phantomjs and highcharts on a CentOS 6.7 per instructions Setting Up Export Server

Here are the required .js files in "/software/phantomjs/highcharts/highcharts-export-server-master/phantomjs":

highcharts-convert.js highcharts-more.js highstock.js highmaps.js d3-funnel.js gauge.min.js exporting.js jquery.1.9.1.min.js

I'm very new to phantomjs and especially highcharts - what I am looking to do is provide a way for batch programs running on one server (Server B) to send POST requests to the export server on Server A and get back .png or .pdf files.

The war is deployed on Tomcat and 10 separate servers are running starting with port 7777 and the PhantomJS server is running as well at 127.0.0.1:3003 per the following command and app-convert.js configuration file:

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

phantomjs properties
the host and port phantomjs listens to

host = 127.0.0.1 port = 7777

location of the phantomjs executable, could be for example > /usr/local/bin/phantomjs

exec = /software/phantomjs/phantomjs

specify here an alternative location (the whole path!) for the script that > starts an Phantomjs server. F.eks /home/bert/scripts/my-highcharts-convert.js Leave empty if you're using the script bundled with the export-server.

script =

connect properties used to connect with phantomjs running as HTTP-server >
all values in milliseconds

specifies the timeout when reading from phantomjs when a connection is > established

readTimeout = 6000

timeout to be used when opening a communications link to the phantomjs > server

connectTimeout = 1000

the whole request to the phantomjs server is scheduled, max timeout can last > to this value. This is because in java you can't rely on the above two > timeouts.

maxTimeout = 6500

Pool properties
number of phantomjs servers you can run in the pool.

poolSize = 10

The pool is implemented as a BlockingQueue. When asking for a phantom server > connection and nothing is available, it waits for the number of milliseconds > defined by maxWait

maxWait = 6000

Keep files in the temp folder for a certain retentionTime, defined in > miliseconds

retentionTime = 300000

I can hit http://my-server/highcharts-export-web/ demo page and it works fine from a browser.

THE QUESTIONS I HAVE:

What URL do I want to use for my remote batch program?
Is //my-server/highcharts-export-web/ supposed to work for my remote calls?
Is the webapp designed to receive direct requests from non-browser clients?
What process calls the 10 servers in the server pool?

Can someone provide an example of how you would setup remote calls to the export server (they will run multiple times per day) and return .png's or .pdf's from batch program?

Thanks Brian

Frank Tudor Frank Tudor · Accepted Answer · 2016-02-12T19:49:13

We have had success! Part of the problem was calling a hosted server in HTTP from HTTPS (javascript doesn't like it.

We are also a coldfusion house so this first example is a straight server-side call with a mostly minified basic chart.

Note: We did have success calling HTTP from HTTPS server-side through the cfhttp tag (which is similar to PHP cURL stuff)...

<!--- first we need to create a small chart --->
{
"xAxis":{
    "categories":["Jan","Feb","Mar"]
    },
    "series":[{
        "data":[29.9,71.5,106.4]
    }]
}

<!--- lets go a little bit larger (I cut in something bigger below...
--->
<cfsavecontent variable="stringItForMe">
<cfprocessingdirective suppressWhiteSpace="true">
{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]}]}
</cfprocessingdirective>
</cfsavecontent>

<!--- next we encode the variable the parameter names will normally have double quotes for cleanliness but highcharts exports works without them. --->

<cfset stepTwo = URLEncodedFormat(stringItForMe)>

<!---
setting my URL target...
--->

<cfset urlMaker = "http://targetServer:10001/highcharts-export-web/">


<cfhttp url="#urlMaker#" result="r" method="post" timeout="1">
<cfhttpparam type="HEADER" name="Content-Type" value="application/x-www-form-urlencoded; charset=UTF-8">
<cfhttpparam name="data" type="body" value="async=true&type=jpeg&width=800&options=#stepTwo#">
</cfhttp>

<cfset targetImage = urlMaker&r.fileContent>

<cfoutput><img src="#targetImage#"/></cfoutput>

Now this second one is javascript/jQuery it was pulled from a jsfiddle example provided by highsoft but I don't remember if I found it on the forum or the exprt server page, but we called the highcharts hosted export server over HTTPS and it worked (how every our in house rendering looked much better, I think we have some additional dependencies but either way success on both...

We had to debug this javascript to get the coldfusion version of this to function.

<br><br>
<button id='b'>Run Code</button>
<div id="container"></div>

<script>
$(function () {
    $("#b").click(testPOST);

    //var exportUrl = 'http://targetServer:10001/highcharts-export-web/';
    var exportUrl = 'https://export.highcharts.com/';

    function testPOST() {

        var optionsStr = JSON.stringify({
            "xAxis": {
                "categories": ["Jan", "Feb", "Mar"]
            },
                "series": [{
                "data": [29.9, 71.5, 106.4]
            }]
        }),
        dataString = encodeURI('async=true&type=jpeg&width=400&options=' + optionsStr);

        if (window.XDomainRequest) {
            var xdr = new XDomainRequest();
            xdr.open("post", exportUrl+ '?' + dataString);
            xdr.onload = function () {
                console.log(xdr.responseText);
                $('#container').html('<img src="' + exporturl + xdr.responseText + '"/>');
            };
            xdr.send();
        } else {
            $.ajax({
                type: 'POST',
                data: dataString,
                url: exportUrl,
                success: function (data) {
                    console.log('get the file from relative url: ', data);
                    $('#container').html('<img src="' + exportUrl + data + '"/>');
                },
                error: function (err) {
                    debugger;
                    console.log('error', err.statusText)
                }
            });
        }

    }
});
</script>

I think with these two working examples someone could port it to PHP, or other languages with little problem. just keep in mind to have your console open if in javascript and debug on in Coldfusion :)

Lastly, one of the most frustrating parts of this discovery was hitting the server, talking to the server but pulling back the default export example page in data OR filecontent (for Coldfusion), it had us scratching our heads because we didn't know how to get passed that part and just get our file.

local phantomjs/highcharts export server on tomcat

1 Answers