Exporting Chart Images on the Server Without Rendering in a Browser

You may have wished to export charts as images from the backend and email them to users, particularly senior management, who appreciate receiving insightful charts and dashboards in their inbox. Perhaps you’ve wanted to automate these reports for your own convenience. While we have server-side Export Handlers for various technologies, we recognize that these still require client-side rendering via a browser, which can be inconvenient at times. We’ve recently received requests for a way to export charts without having to render them on the client side. This got us thinking about how to do it in a simple way that works across all server-side scripting languages. Last year, we wrote about something similar – the free PHP plugin, FCImg, which allows you to generate images of charts on the server without rendering the charts in a browser. Picking up from here, we figured the best way to get this to work on any server-side platform would be to use command line execution. In this post, we’ll walk you through two options, each with step-by-step instructions on how to export chart images into live charts on the server without rendering.

A. Using wkhtmltoimage

wkhtmltoimage is a simple shell utility to convert HTML to images. I. Setup wkhtmltoimage 1. Download and install the wkhtmltoimage library for Mac, Windows, or Linux (1368, amd64). Note: Be careful not to confuse wkhtmltoimage with wkhtmltopdf, which generates PDF files instead. The Windows installation comes with both. 2. It is better to add the path of the executable file to the PATH so that you do not need to type the whole path when calling it. The Windows installer asks whether to set the PATH. Do select that option while installing. II. Export Charts as Images from Server-side 1. Create a dynamic or static web page, and generate a chart in it using our JavaScript chart library. To take a snapshot of only the chart, we recommend loading nothing but the chart on the web page, as shown in this example. 2. Set the page’s default margin and padding to 0 using CSS. 3. Now, use command-line or server-side shell execution command to :

• Call wkhtmltoimage
• Pass the URL of your webpage to it
• Next, pass the path and name of the image file (with extension) where the image will be saved.
• Pass additional options to set a slight delay to allow the chart inside your page to fully load before rendering. Normally 500 ms should do, but it can be extended up to 15000 ms based on how the wkhtmltoimage engine performs in your system.

III. Sample Script Using PHP Here is an example of how to execute the script in the command line for PHP, although you can do the same for ROR, ASP.NET, Java, ColdFusion, and pretty much any server-side scripting platform.

<?php
$webpageURLWithChart = "ms-weekly-sales-no-animation.html";
$outputImageFileName = "savedImage.png";
$delay = 500;
$shellout = shell_exec("wkhtmltoimage --javascript-delay $delay $webpageURLWithChart $outputImageFileName" );
?>

IV. Cropping & Other Advanced Options If you need to crop a part of the image that is saved through this process, it can be easily done by setting the –crop-w or –crop-h options in this wkhtmltoimage manual.

B. Using PhantomJS

The popular PhantomJS JavaScript library allows for more programming flexibility than wkhtmltoimage, but, you may find the previous one easier to implement. Here’s how to set this up: I. Download PhantomJS Binary source of PhantomJS II. Sample Script in PhantomJS Let’s name it render.js

var page = require('webpage').create(),
webpageURLWithChart  = 'https://docs.fusioncharts.com/charts/Code/MyFirstChart/ms-weekly-sales-no-animation.html',
outputImageFileName = 'savedImage.png',
delay = 12000;

page.open(webpageURLWithChart, function () {
window.setTimeout(function () {

page.render(outputImageFileName);
phantom.exit();

}, delay);

});

III. To Execute In the shell, from the path where the PhantomJS executable is present: phantomjs render.js We hope this will ease your workflow by a bit, and allow you to share more delightful charts with your end-users. Would you like us to address other scenarios where you face difficulty exporting charts?