FusionCharts allows you to create awesome dashboards that can be viewed on a PC, Mac, iPad, iPhone, or a variety of mobile devices. To view these dashboards, launch your preferred browser, navigate to the dashboard’s URL (either by typing in or clicking through), the browser loads the content and FusionCharts, and you are finally presented with your interactive dashboards. Everything is in working order! But what if your boss requests that you send the dashboard via email at the end of each day so that they don’t have to remember to check it? While you try to explain to them that they will lose all of the interactivity in the dashboard, such as drill-down, slicing, and tool-tips, that they are accustomed to in the web version. They will, however, expect to see elements such as tables and
Live Charts in their emails. This creates a new issue for you. While tables and other HTML elements can be easily rendered in an email, charts rendered in a browser using JavaScript would not render in an email client for security reasons. As a result, your only option is to convert these charts to images on the server before composing the email. In this post, we’ll look at how to do so with the help of a community plugin called
FCImg; how to set it up, and why this plugin is so important when it comes to generating images for your fusion charts to the server.
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.
The chart images generated by
FCImg could be used in the following scenarios when you need to:
- 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:
The system requirements to run
FCImg are:
- Linux or Windows operating systems. Shared hosts are also supported.
safe_mode
should not be enabled. (Note that safe_mode
is deprecated and disabling it is highly recommended. Most hosts disable safe_mode
by default). - PHP 5.2 or above.
After downloading the appropriate variant, extract the package to a path on your server that is accessible by your PHP Scripts. You will find that there is only one folder –
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 the
fcimg.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.
When you now run this script on your server, you will find the output chart image file [cciel lang=’javascript]report.png under
/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.
FCImg takes a couple of seconds to export a single chart on a basic server. This delay is intended because the default animations of FusionCharts take up to 1.5 seconds to complete on certain charts. The
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 the fcimg
directory - Add all the code from jQuery charts
jquery.min.js
to template.txt
- Add all the code from
FusionCharts.js
to template.txt
- Then add all the code from
FusionCharts.HC.js
to template.txt
- Add all the code from
FusionCharts.HC.Charts.js
to template.txt
Note that the order of files added is important.
Getting On With It
Do give
FCImg a spin. It’s useful. It’s free. And if you encounter some painful situations, give a shout to the developer at
contact@fcimg.org. It will help if you include details like the XML/JSON data.
View Comments
Hello,
It appears that the link to FCimg no longer works.
Do you have an alternative download location.
Hi,
The website has been fixed and works fine now.
Thanks.
Helllo, My name's Gustavo and I've been trying to use your code (project) to generate FusionCharts images, but I've a problem.
When I call "fusioncharts_to_image" function it returns "There was an error with wkhtmltopdf" (line 173).
I tried to read and understand the code and made some tests, if I set "$returnCode = 0;" (only to see the return), it returns a warning and I saw that didn't have a "" after "TEMP" dir name.
"'generatedImageCharts/' >> It's a dir Warning: rename(C:TEMPFCImage764.jpg,generatedImageCharts/): in C:Program FilesEasyPHP-12.0www...fcimg.php on line 177"
I made some tests and parameters and all of them seems ok, ($dir, $chart, $xml...)
What could be this problem?
Thanks a lot
FCImg allows you to generate PNG and JPEG images of your charts on the server and does not export the charts as PDF currently
Try using wkhtmltoimage.exe instead of wkhtmltopdf.
I've had this same problem this morning, for me it looks like FCIMG wasn't correctly detecting the operating system (Windows) directory seperator. I changed line 59 of fcimg.php from:
$imageFileName = sys_get_temp_dir().$separator."FCImage".rand(0, 1000).'.'.$fileType;
to this:
$imageFileName = sys_get_temp_dir().'\\'."FCImage".rand(0, 1000).'.'.$fileType;
Hope this helps anyone who may stumble upon this in the future.
Adam
For linux, if anyone encountered this type of error, then follow the steps in this url https://www.catchstudio.com/labs/php-screenshots/
Hello,
The website is offline again so I can't download the library files :(
Dean
Hi,
Apologies for the inconvenience. There were some technical issues at our end.
However, the issues had been fixed now, hence you would be able to download the files. :)
Thanks.
I tried your example but i'm getting just a png image that sais "Loading chart...", do you think it has to do anything with the delay? I don't know how to solve this.
I had this issue. I had r characters in my XML string. I updated fcimg.php code as below at line 144.
$escapedData = str_replace("n", "", $inputString);
$escapedData = str_replace("r", "", $escapedData);
$escapedData = addslashes($escapedData);
Alternatively, you can ensure that your input does not have r characters.
Hi Sanjay,
Thanks for sharing your suggestion.
We would review your inputs and update the code accordingly.
Hi Margot,
"Loading Chart..." error occurs if the order of JavaScript files loaded into template.txt is not in sequential order? Order of files added is important.
JavaScript files should be added in the following order :
jquery.min.js, FusionCharts.js,FusionCharts.HC.js,FusionCharts.HC.Charts.js
this doesnt still work for me. what is the template.txt and where can i find it?
Hi,
I'm using FCImg to export fusioncharts' image on the server side. I have a Chinese charset issue. The exported image's caption can't show Chinese correctly when the caption has Chinese.
Can the FCImg support Chinese charset?
The test json string as below:
String s = "{"chart": {"caption" : "中文标题 Weekly Sales Summary" ,"xAxisName" : "Week","yAxisName" : "Sales","numberPrefix" : "$"},"data" : [{ "label" : "Week 1", "value" : "14400" },{ "label" : "Week 2", "value" : "19600" }, { "label" : "Week 3", "value" : "24000" },{ "label" : "Week 4", "value" : "15700" }]}";
Hi,
Can you please try adding the below line of code in fcimg.php at line no:68?
$args = $args. " --encoding utf-8";
Hope this helps.
Why this plugin not work on OSX?
Hi Andrea,
No, it is not supported in OSX platform. Currently, FCImg supports Windows (32 Bit & 64 Bit) and Linux (32 Bit & 64 bit).
Ok! :(
Thanks for your reply!
Hi!
I've downloaded fcimg but it didn't work yet.
I'm obtaining an image containing javascript code and at the end "loading chart...".
(I need to create a very large image to see that)
I'm aware there is an order while adding javascripts file into template.txt and I respected it.
Thanks for your help!
Martin
Hi Martin,
Yes, sequential order of JavaScript files is very important else you will receive a “Loading Chart…” error.
Since you have mentioned the order of files are maintained, can you please send us the sample code to "support@fusioncharts.com" ?
Hi! Thanks answering me!
I've found the solution :
The first step asks to delete all the content of template.txt.
In fact you just have to delete the javascript code and leave the html code at the beginning!
It's working fine now :).
Have a good day!