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.
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 :
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.
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?
Modern web applications depend on data visualization to transform complex information into clear, actionable insights.…
Data is a big part of modern software. Companies use charts to track sales, monitor…
Every day, businesses get more data than ever before. Looking at endless rows and columns…
Building interactive React charts from scratch can quickly become complicated. It becomes even more challenging…
Data is everywhere in modern business, but raw numbers alone rarely tell the full story.…
Data is everywhere today; inside dashboards, reports, apps, and analytics tools. But raw data on…
View Comments
I to the url that generates the graph I need to pass a lot of parameters, it's possible pass them on post and not to get? how?
Thanks
Hi Andra,
In wkhtmltoimage:
You can use:
wkhtmltoimage.exe --post name value https://www.xyz.com xyz.jpg
--post <name> <value> Add an additional post field (repeatable)
In PhantomJS:
A sample can be found at https://github.com/ariya/phantomjs/blob/master/examples/post.js
Hi, Rahul, thanks for your reply, but this method works also if the value is a array?
I would pass one array to labels and value for generate a dynamical chart!
Hey, how did you created dynamical charts from Phantomjs?
Let me know, thanks
Hi Andrea,
Yes,
wkhtmltoimage:
wkhtmltoimage.exe --post values 1 --post values 2 --post values 3 https://xyz.com/Default.aspx test.jpg
PhantomJS:
var page = require('webpage').create(),
server = 'https://xyz.com/Default.aspx',
data = 'values=1&values=2&values=3';
page.open(server, 'post', data, function (status) {
if (status !== 'success') {
console.log('Unable to post!');
} else {
console.log(page.content);
}
phantom.exit();
});
Hi, can u help me? No matter what I try - chart renders as a blank PNG image. It shows OK on ASPX page.
Hi Yuriy,
Try adding javascript delay to the command line. This will help the web page to wait some milliseconds for javascript to finish loading.