Table of Contents
What is FCImg?
FCImg is a free PHP chart library that allows you to generate PNG and JPEG images of your charts on the server, without even rendering the chart in a browser. It renders the JavaScript version of FusionCharts at the server and then internally uses the open-source wkhtmltoimage shell utility to convert the charts to images. Please see the live generation of chart images at the FCimg gallery.- Email dashboards or reports containing FusionCharts
- Build PDFs of reports or dashboards and embed FusionCharts
- Render images of charts on devices that do not support both Flash or JavaScript
Setting Up FCImg
To get FCImg for your server, choose the right variant from the list below:- Windows (32 Bit & 64 Bit) [8.9 MB] [ZIP]
- Linux (32 Bit) [10 MB] [tar.gz]
- Linux (64 Bit) [10 MB] [tar.gz]
- Linux or Windows operating systems. Shared hosts are also supported.
safe_mode
should not be enabled. (Note thatsafe_mode
is deprecated and disabling it is highly recommended. Most hosts disablesafe_mode
by default). - PHP 5.2 or above.
fcimg
. Inside this folder, you will find a /bin
sub-folder, fcimg.php
and template.txt
. Next, you will need to set the right permission for the /bin
folder contained within this folder. On Linux systems, the contents must be executable. If you downloaded and extract the files directly on the server, the file permissions are already set. However, if you transferred the files using FTP, then you need to set the permissions manually using this command from the directory where you extracted fcimg:
[cciel lang=”bash”]chmod +x fcimg/bin/*
Using FCImg
Using FCImg is fairly simple. You include thefcimg.php
file and invoke fusioncharts_to_image
function with a bunch of parameters, as listed and explained below.
require "fcimg/fcimg.php"; fusioncharts_to_image ( "/var/www/report.png", // Full path to output image, including name. "Column3D.swf", // SWF Alias of chart. Note: SWF File is NOT required. // It's just a pointer to which chart type to render. $inputString, // The input XML data string for the chart 400, 500, // Height and width of the chart array( // Additional options for conversion 'imageType' => 'jpg', // Setting image type as JPG 'quality' => 75 // Increase output quality ) );The
fusioncharts_to_image
method takes the following arguments, listed in order:
outputFilePath
: The full path to the output image. If this file already exists, it will be overwritten.swfName
: The FusionCharts SWF filename will be used to determine which type of chart to render.inputString
: The Data String in XML or JSON format. Note that the converter will automatically determine whether the input is XML or JSON.height
: The height of the chart in pixels.width
: The width of the chart in pixels.options
: This is an array to configure optional parameters. This is treated as a key-value set.$options["imageType"
]: Specifies the type of the image (png/jpg). Default: png.$options["quality"
]: The Image quality (0-100). Note that a higher quality might take longer to render. Default: 70.
/var/www
folder of your server.
What Happened Behind the Scenes?
When we executed this script, the following actions happened behind the scenes:- FCImg created an HTML file, which included the FusionCharts XT JavaScript files (the evaluation version is stored in
template.txt
), and the data in XML or JSON. If you opened this file in a regular browser, you would see this chart. - It created a virtual Webkit browser and opened the generated HTML file inside that browser.
- Then it waited 1500 milliseconds for the animations to complete.
- It captured the image on this virtual Webkit browser, converted that into an image using wkhtmltoimage, and saved it at the path provided.
fusioncharts_to_image
function is a blocking call. It means that the PHP script will not continue until the rendering process is complete (unlike event-based callback systems). Therefore, it is best to call this method in PHP scripts that run on the server directly and do not serve output to browsers e.g., in a script that generates emailed reports, or a script that is executed through a cron-job.
Changing the FusionCharts JavaScript Library Used in FCImg
By default, FCImg ships with an evaluation copy of the FusionCharts JavaScript version, which is not the latest as well. To update to the latest, or even point to your licensed copy of FusionCharts JavaScript graphs, you will need to do the following changes:- Remove the contents of
template.txt
found in thefcimg
directory - Add all the code from jQuery charts
jquery.min.js
totemplate.txt
- Add all the code from
FusionCharts.js
totemplate.txt
- Then add all the code from
FusionCharts.HC.js
totemplate.txt
- Add all the code from
FusionCharts.HC.Charts.js
totemplate.txt