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

Attribute Type Info
base64 String

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"

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

defaultsurl String

URL/path to the default styles json.

styles.json | defaults.txt

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

theme String

Set a built in ZingChart theme.


light

themeurl String

Sets a custom theme.


custom-theme.js

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