Widget Export

Although the ChartJS widgets can be displayed in any browser on any platform, there are times when having your chart as an image or a document is necessary. The dxExporter widget supplies you with this opportunity. This topic will guide you through deploying a server that is to be used for exporting and through binding dxExporter to your widget.

Deploy a Server

The dxExporter widget can export any widget from the ChartJS library into a PNG, PDF, SVG, JPEG or GIF file. For performing, dxExporter requires the PhantomJS WebKit. This WebKit allows you to use the client-server model where PhantomJS performs as a server. In this article, dxExporter basics are explained on a simple example where a single computer is used both as a client and a server.

Start by deploying the server that will process requests by following the steps below.

  • Download the zip-archive with the latest version of PhantomJS and unpack it. Let it be a folder named PhantomJS.

  • Add the Exporter folder from the ChartJS archive to the PhantomJS folder.

  • Open the system command line and specify the directory with the phantomjs.exe file as the current directory.

  • Type the following line.

    phantomjs Exporter/exporter-server.js 127.0.0.1 3003

    Here, Exporter/exporter-server.js refers to the script that implements the server logic. This script is supplied by ChartJS. It is followed by the IP address that is assigned to your server and a number of the port that will be used for listening. Since the requests will be sent and received on the same machine in our example, we use the IP address corresponding to localhost. If the command line has responded with the "OK, PhantomJS is ready." message, the server is deployed successfully.

NOTE: It is necessary for the phantomjs.exe process to operate on the server during export. Therefore, do not close the PhantomJS console window until you have finished exporting your widget.

Now we can move on to the next step - embedding dxExporter into your page.

Embed dxExporter

To add dxExporter to your page, do the following.

  • Provide links to the exporter client script and one of the external style sheets, as shown below.

    HTML
    <link rel="stylesheet" type="text/css" href="dx.exporter.desktop.default.css">
    <script src="Exporter/dx.exporter.js"></script>
  • Add a div container for the dxExporter widget.

    HTML
    <div id='exportMenu'></div>
  • Create the dxExporter widget within this container using the jQuery, Knockout or AngularJS approach. In the code below, the widget is created using the jQuery approach.

    JavaScript
    $(function () {
        $("#exportMenu").dxExporter();
    });

If you run your page, you will see the Exporter Icon ChartJS and Exporter Icon ChartJS icons on it. But exporting and printing do not work yet, because the dxExporter widget is not tuned properly. Refer to the next step to tune it.

Tune dxExporter

To ensure proper operation by the dxExporter, several options should be specified.

  • Assign a jQuery selector to the sourceContainer option. This selector should specify the div element that contains the widget you want to export.

  • Specify the URL of your server using the serverUrl option. In our example, it is 'http://127.0.0.1:3003'.

  • Additionally, you can alter the default file name using the fileName option, change the set of available formats using the exportFormat option, and enable/disable the entire export menu or only the printing button using the showMenu and printingEnabled options.

Now everything is ready for you to try the dxExporter widget. Hover over the Exporter Icon ChartJS icon and choose the appropriate format to export your widget. In addition, you can change the print parameters within the Print window. To call this window, click the Exporter Icon ChartJS icon.

As you can see, the dxExporter widget is very easy to use and can present your charts even with scripts disabled.