FusionCharts helps you make kick-ass dashboards that can be viewed on a PC, Mac, iPad, iPhone or a majority of mobile devices. To view these dashboards, you open your favorite browser, go to the URL of the dashboard either by typing in or clicking through, the browser loads the content and FusionCharts, and you finally get to see your interactive dashboards. It all works fine! But, what if your management asks you to deliver the dashboard through email at the end of each day, so that they do not have to remember to visit the dashboard?

While you try and explain them that they’ll lose all the interactivity in the dashboard like drill-down, slicing and tool-tips, which they’re used to in the web version, they still want to be able to see elements like tables and charts in their email. This lands you into another problem. While tables and other HTML elements can be easily rendered in an email, the charts in that are rendered through JavaScript in a browser would not render in an email client, owing to security reasons. So, the only option you have is to convert these charts to images, server-side, before the email is composed. In this post, we will explore how to achieve this using a community plugin – FCImg.

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 and then internally uses the open-source wkhtmltoimage shell utility to convert the charts to images. See live generation of chart images at FCimg gallery.

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
  • When you need to build PDFs of reports or dashboards and embed FusionCharts
  • When you need to 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 of /bin needs to 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 which 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 this script executed, the following actions happened behind the scenes:

  • FCImg created a 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.
  • It waited 1500 milliseconds for the animations to complete.
  • It captured the image on this virtual Webkit browser, converted that into 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). 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 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
  • 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 [email protected]. It will help if you include details like the XML/JSON data.

Take your data visualization to a whole new level

From column to donut and radar to gantt, FusionCharts provides with over 100+ interactive charts & 2,000+ data-driven maps to make your dashboards and reports more insightful

Explore FusionCharts

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

45 responses on “Generate chart images on the server using FusionCharts

  1. Hello,

    It appears that the link to FCimg no longer works.
    Do you have an alternative download location.
     

  2. 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

  3. For linux, if anyone encountered this type of error, then follow the steps in this url http://www.catchstudio.com/labs/php-screenshots/

  4. Hello,
    The website is offline again so I can’t download the library files 🙁

    Dean 

  5. 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.

  6. 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.

  7. 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
     

  8. 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.

  9. Why this plugin not work on OSX?

  10. 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 “[email protected]” ?

      • 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!

  11. Hi
    I have romanian characters in texts (like ăîșț). I tried to put $args = $args.” -ecoding utf-8″ on line 68 in fcimp.php but then I received the error “Message: There was an error with wkhtmltopdf”. Any idea how to solve the problem? Thanks in advance

    • Hi Ana,

      FCImg allows you to generate PNG and JPEG images of your charts on the server and does not export the charts as PDF currently.

  12. I have put together the following minimal example:
    <?php
    require “../../FusionCharts/Charts/fcimg/fcimg.php”;
    $inputString = “<chart Caption=’Members1′><dials><dial value=’63’ /></dials></chart>”;
    fusioncharts_to_image (“report.png”, “AngularGauge.swf”, $inputString, 400, 500);
    $inputString = “<chart Caption=’Members’><set label=’Mem’ value=’3262′ displayValue=’3262′ /></chart>”;
    fusioncharts_to_image (“report.png”, “Pie2D.swf”, $inputString, 400, 500);
    ?>
    Regardless of whatever combination I use, I can produce a Pie2D chart, but AngularGauge produces a “Chart Type Not Supported” image.  The corresponding html produced through a ‘debug’ displays the AngularGraph properly.  Using wkhtmltoimage.exe fails to produce an AngularGraph, as I can produce all chart types via straight php and html.

  13. Hi Bryan,

    To render Angular Gauge, please ensure FusionCharts.HC.Widgets.js has been added to template.txt.

    • Hi,
      I got This error :——–
      Whoops! Something is wrong with your Datawrapper instance!

      The following folders on your server need to be writable:

      /charts/static
      /charts/data
      /charts/images
      /charts/data/tmp
      /vendor/htmlpurifier/standalone/HTMLPurifier/DefinitionCache/Serializer
      Read more about how to change file permissions

      reason and how i can resolve it.

  14. The download links are not working 🙁

    Any mirrors please?

  15. I am trying to download Image on my local, I m getting this error. Can u please tell me what its the issue?

    For this issue you gave a solution earlier
    “Try using wkhtmltoimage.exe instead of wkhtmltopdf.”
    how to do this ?
    FCImageException [ 0 ]: There was an error with wkhtmltopdf
    DOCROOT/vendor/fcimg/fcimg.php [ 173 ]
    168
    169 if($returnCode !== 0)
    170 {
    171 if(file_exists($imageFileName))
    172 unlink($imageFileName);
    173 throw new FCImageException(“There was an error with wkhtmltopdf”);
    174 }
    175
    176 // success!
    177 rename($imageFileName, $outputFilePath);

  16. Hi,
    Suggestion would be “Try using wkhtmltoimage.exe instead of wkhtmltopdf.”
    Please look into the “bin” folder of your application, and confirm whether you have “wkhtmltoimage.exe” file along with some dll files, if you are using windows OS. If not, try downloading same Shell utility from Link: https://code.google.com/p/wkhtmltopdf/downloads/detail?name=wkhtmltoimage-0.11.0_rc1-static-i386.tar.bz2 and replace the required files as per the instructions provided in this blog.

    • Hi,
      Image is created from fusion chart ..but chart labels are displaying as boxes not exact strings in linux system..but windows its working me.please advice me to solve this issue.

  17. Hey Kumaran,

    Can you please try using the latest release of FCImg and let us know if the issue is resolved?

    Download Link: https://github.com/fcimg/fcimg/releases/download/0.2.1/fcimg-0.2.1.zip

  18. Great work guys! 🙂

    Working fine for me thanks.

    need to be few changes in fcimg.php files.

    require “fcimg/fcimg.php”;
    fusioncharts_to_image (
    “/var/www/report.png”, // path to image
    “Column3D.swf”, // SWF Name. SWF File not required
    $inputString, // the input XML String
    400, 500, // height and width
    array( // options
    ‘imageType’ => ‘jpg’, // OPTIONAL: set image type as JPG
    ‘quality’ => 75 // OPTIONAL: increase Quality
    ‘wkhtmltoimage_path’ => “D:\Program Files\wkhtmltox\bin\wkhtmltoimage.exe” // OPTIONAL: alternative wkhtmltoimage_path
    ‘licensed_fusioncharts_js’ => “C:\fusioncharts\fusioncharts.js”, // OPTIONAL: Path to licensed fusioncharts.js
    ‘licensed_fusioncharts_charts_js’ => “C:\fusioncharts\fusioncharts.charts.js”, // OPTIONAL: Path to licensed fusioncharts.charts.js
    )
    );

  19. Hi after our latest deployment legends appear broken. It shows junk characters.

  20. The download links are not working 🙁
    Any help?

  21. I’ve tried to use this, but I keep getting “Fatal error: Uncaught exception ‘FCImageException’ with message ‘There was an error with wkhtmltopdf ‘ in […]/fcimg.php[…]”. I’ve manually corrected the directory separator issue mentioned above, but by debbuging I noticed that the ‘fwrite’ function dealing with the writing of the FusionCharts minified JS files is returning 0, with no errors. I already tried to pass the content of the min.js files to a variable (as shown in code below), but even do the variables are set correctly with the content of the files the result is the same. ‘fwrite’ functions are working fine previously to the code below. Any help, advice or suggestions?

    $contFC = file_get_contents($options[‘licensed_fusioncharts_js’]);
    $contFCC = file_get_contents($options[‘licensed_fusioncharts_charts_js’]);

    if(isset($options[‘licensed_fusioncharts_charts_js’]) && isset($options[‘licensed_fusioncharts_js’])) {
    $temp1 = fwrite($wkstdin, $contFC);
    var_dump($temp1); //int(0)
    $temp2 = fwrite($wkstdin, $contFCC);
    var_dump($temp2); //int(0)
    }
    else {
    throw new FCImageException(“Need to provide fusioncharts licensed version here”);
    }

  22. Hello, I just found this and am having problems getting a chart to generate. I receive a generic ‘There was an error with wkhtmltopdf’ error from fcimg.php on line 185. I can generate pdf’s and images via wkhtmltopdf/wkhtmltoimage manually but cannot get fcimg to generate a simple chart. Below is a copy of the code I’m testing:

    $inputString = ‘

    ‘;

    require “fcimg/fcimg.php”;
    fusioncharts_to_image (
    “testReportImage.png”,
    “Column3D.swf”,
    $inputString,
    400, 500,
    array(
    ‘licensed_fusioncharts_js’ => “../../../source/fusioncharts-suite-n-xt-developer/js/fusioncharts.js”, // REQUIRED: Path to licensed fusioncharts.js
    ‘licensed_fusioncharts_charts_js’ => “../../../source/fusioncharts-suite-n-xt-developer/js/fusioncharts.charts.js”,
    ‘wkhtmltoimage_path’ => “C:\Program Files\wkhtmltopdf\bin\wkhtmltoimage.exe”
    )
    );

    Any suggestions?

  23. Hello, I just found this utility and am curious to know if it’s still supported? I’m having problems getting it to function. I receive the generic ‘There was an error with wkhtmltopdf’ on line 185. I am trying to use a very simple test set of data found on the github and have specified both the fusioncharts.js and fusioncharts.charts.js files as well as pointing it to the wkhtmltoimage_path as well. Below is a copy of the code I’m attempting to use:

    $inputString = ”

    “;

    require “fcimg/fcimg.php”;
    $chartImage = fusioncharts_to_image (
    “testReportImage.png”,
    “Column2D.swf”,
    $inputString,
    400, 500,
    array(
    ‘licensed_fusioncharts_js’ => ‘C:\wamp\www\source\fusioncharts-suite-n-xt-developer\js\fusioncharts.js’, // REQUIRED: Path to licensed fusioncharts.js
    ‘licensed_fusioncharts_charts_js’ => ‘C:\wamp\www\source\fusioncharts-suite-n-xt-developer\js\fusioncharts.charts.js’,
    ‘wkhtmltoimage_path’ => ‘C:\Program Files\wkhtmltopdf\bin\wkhtmltoimage.exe’
    )
    );

  24. Все свое свободное время я использую для посещения данного веб ресурса, так как получаю огромное наслаждение, изучая такой
    полезный материал:)

Your next great dashboard starts here

With our interactive and responsive charts, extensive documentation, consistent API, and cross-browser support - delight your customers with kick-ass dashboards

Explore FUSIONCHARTS