Server Side and PhantomJS Chart Export

Static image generation with PhantomJS

PhantomJS & ZingChart setup

  • Download PhantomJS from here & follow the installation steps.

  • As an optional step and to ease calls to phantomjs executable, add the path to phantomjs to the system path.

  • Download the ZingChart PhantomJS build

  • Place the zingchart-phantomjs-min.js and the modules_phantomjs folder in your working folder.

Usage

Generate out.png file based on the JSON from chart.json


          
phantomjs.exe c:/path/to/zingchart-phantomjs-min.js -width=800 -height=600 -dataurl=c:/path/to/chart.json -filename=c:/path/to/out.png
        

Generate out.pdf file based on the JSON from http://www.domain.com/chart.json. Note the required --web-security=no when using URL's for the dataurl parameter.


          
phantomjs.exe --web-security=no c:/path/to/zingchart-phantomjs-min.js -width=800 -height=600 -dataurl=http://www.domain.com/chart.json -filename=c:/path/to/out.pdf
        

Return a string representing the base64 encoding of the generated file based on the JSON from chart.json


          
phantomjs.exe c:/path/to/zingchart-phantomjs-min.js -width=800 -height=600 -dataurl=c:/path/to/chart.json -base64=true
        

Generate out.png file based on the JSON from chart.json, loading the required modules maps and maps-usa.


          
phantomjs.exe c:/path/to/zingchart-phantomjs-min.js -width=800 -height=600 -dataurl=c:/path/to/chart.json -modules=maps,maps-usa -filename=c:/path/to/out.png
        

Return a string representing the SVG DOM of the generated chart based on the JSON from chart.json


          
phantomjs.exe c:/path/to/zingchart-phantomjs-min.js -width=800 -height=600 -dataurl=c:/path/to/chart.json -svg=true
        

Integration with PHP


          
<?php
  exec('phantomjs --web-security=no c:/path/to/zingchart-phantomjs-min.js -width=400 -height=400 -dataurl=http://www.domain.com/chart1.json -base64=yes', $out1);
  echo '<img src="data:image/png;base64,' . join('', $out1) . '"/>';
 
  exec('phantomjs --web-security=no c:/path/to/zingchart-phantomjs-min.js -zoomfactor=2 -width=1000 -height=400 -dataurl=http://www.domain.com/chart2.json -base64=yes', $out2);
  echo '<img src="data:image/png;base64,' . join('', $out2) . '"/>';
  exec('phantomjs c:/path/to/zingchart-phantomjs-min.js -width=800 -height=800 -dataurl=c:/path/to/chart3.json -modules=maps,maps-rou -base64=yes', $out3);
  echo '<img src="data:image/png;base64,' . join('', $out3) . '"/>';
?>
        

Command Line Options

AttributeTypeInfo

base64

String

When set to "true" or "yes" the library with return the generated image as a base64 encoded string instead of saving it to the disk. Useful when images have to be generated directly into the browser.

"true" | "false" | "yes" | "no"

data

String

Stringified JSON containing chart definition. Because this is passed through the command line, one must be careful not to exceed the maximum allowed length of a command line string (2K for old Windows based Operating Systems, 8K for newer Operating Systems)

"{...json chart definition...}" | ...

dataurl

String

URL/path to the data json. In case an URL is being used, the --web-security=no must be added as a phantomjs.exe option.

chart.json | http://www.domain.com/chart.json

filename

String

Name (full path) of the generated file. Based on the extension the library will create the appropriate format.

out.png | out.jpg | out.pdf | ...

header

String

Header to add to the SVG string being returned when -svg="true" is set.

"..." | ...

height

Numeric

Height of the generated image.

600 | ...

id

String

Extra ID appended to the default 'zc' identifier for the chart's container. Useful to avoid conflicts when embedding on same page multiple SVG based charts.

mychart | ...

modules

String

List of additional ZingChart modules which will be loaded at runtime. The zingchart-phantomjs-min.js library cannot load automatically the required modules like the standard zingchart.min.js so each required module needs to be specified.

maps,maps-usa | maps-...| treemap | chord | grid | boxplot | pareto | populationpyramid | rankflow | waterfall | wordcloud

svg

String

When set to "true" or "yes" the library with return the string representing the SVG DOM of the chart instead of saving it to the disk. Useful for getting vector based charts back from the server.

"true" | "false" | "yes" | "no"

width

Numeric

Width of the generated image.

800 | ...

zoomfactor

Numeric

Sets the zoom factor of the generated image, set higher zoom factors for increased detail level.

1 | 2 | ...