PhantomJS

Server Side and PhantomJS Chart Export

Static image generation with PhantomJS

PhantomJS and ZingChart setup

  • Download PhantomJS from here and 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 Examples

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 chart.json. Note the required --web-security=no when using URLs 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
base64String

When set to "true" or "yes" the library will 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"

dataString

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...}" | ...

dataurlString

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

chart.json |

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

defaultsurlString

URL/path to the default styles json.

styles.json | defaults.txt

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

filenameString

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


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

headerString

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


"..." | ...

heightNumeric

Height of the generated image.

600 | ...

idString

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 | ...

modulesString

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

svgString

When set to "true" or "yes" the library will 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"

themeString

Set a built in ZingChart theme.


light

themeurlString

Sets a custom theme.


custom-theme.js

widthNumeric

Width of the generated image.


800 | ...

zoomfactorNumeric

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


1 | 2 | ...