• Getting Started

  • Data

  • Chart Types

  • Chart Elements

  • Integrations

  • API

  • Tools

  • FAQ

  • Change Log

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