If you have been using FusionCharts, then only way to export your charts into image, PDF or SVG till now was to use a server. Either FusionCharts export server or the one you setup on your own. We realised this was not the best way and we have made something to make your job faster and easier – client-side export.

Why do you need client-side export feature?

You’ve received quotations from vendors for a critical project that you are working on and, courtesy FusionCharts, you’ve created some good-looking, information-rich charts that compare the pros and cons of each vendor as well as their price and deadline figures.

The senior management asks for a presentation and you can’t wait to show them what you have. You decide to use our server-side export feature that comes out of the box to export your charts as JPEGs and add them to your presentation.

But wait. Won’t this data classify as confidential information? Would it be okay then if you used a publicly hosted server to export and download the chart? We don’t think so. This is where client-side export comes into picture.

While we have an established server-side exporting feature, common concerns with this feature include:

  • Availability of a good internet connection to send to and receive data from the server.
  • Confidentiality concerns around using the publicly hosted export server.  We do provide programs to set up the export server at a your end, but this requires you to have a knowledge about configuring and using servers. This, again, is a downside.

The primary need for coming up with the client-side export feature  was to eliminate the need of a server for exporting, thus bringing down the turnaround time it takes for a download, as well as to to address the data confidentiality issues. The client-side export feature removes the round-trip involved in exporting from a  server and eliminating the difficulties involved in setting up one, with the proper dependencies.

How to make use of it?

To enable the client-side export feature for your application, all you need to do is set the exportEnabled and the exportAtClientSide (since v3.8.0) attributes to 1 and you are good to go. You can test it live here.

For more details on how to use this feature you can check out our developer center article on client-side export.

Note: This feature is currently supported in latest versions of Chrome and Firefox only. Our team is working hard to roll it out for other browsers in coming weeks.

Have any questions?

We hope you give client-side export feature a try in your next project! If you are ever stuck or have any questions, feel free to drop a line at support@fusioncharts.com. Our team will be happy to help!

Here’s some great news

Did you know your favourite DataViz company recently won three prestigious awards here in India?

Yes, that is correct!

Two at Pan India level and the other one in Kolkata…the City of Joy!

And the awards are:

  • CNBC Emerging India Awards: Categories – ‘Global Reach SME of the Year’ And ‘Most Promising SMS in IT-ITES’. You can check out the details and complete list of winners on CNBC’s Official Website.
  • Economic Times – Bengal Corporate Awards: Category ‘Innovation in Business Model’. Check out the ET’s official page for complete list of winners.

Interested in learning more?

Click on either or all of the following three links:

ET ‘Innovation in Business Model’:

CNBC – ‘Most Promising SMS in IT-ITES’:

CNBC – ‘Global Reach SME of the Year’:

Thanks for all the love :)

angularjs charts

Introducing Angular-FusionCharts directive.


Yes, you got that right. You can now create beautiful charts in AngularJS using our new directive. You can make use of all the stunning charts that we offer without dealing with core JavaScript. If you haven’t got it already, go ahead and download it for free from angularJS charts page.

Why did we do this?

This one is easy. Everybody in the world, including us of course, loves Angular. Even Google Trends suggests that. See how that blue graph keeps going up?

  So when developers, like you, came to us and asked for a solution, we decided to build Angular charts plugin. That’s how Angular-FusionCharts directive was born. Now that you know why we built it,  let’s learn how to use it.

Downloading the Angular-FusionCharts directive

  You can download the Angular-FusionCharts directive by clicking here, or by visiting this page.  

Installing the Angular-FusionCharts directive

  Once you have downloaded the AngularJS charts directive, installation is a simple four-step process:  

Step 1: Include library files

  In your HTML, include the fusioncharts.js and the angular-fusioncharts.js files. The angular-fusioncharts.js file must be included after all other scripts.  


Step 2: Include directive in your module

In the app, include the ng-fusioncharts directive as a dependency. If you are looking for where to add the dependency, look for the call to angular.module in your code.


Step 3: Add the fusioncharts directive

  In your HTML, define a <div>  element with fusioncharts  directive where you want to add the chart.  

  In the snippet above, it is assumed that the chart has to be added inside a controller called MyController .  

Step 4: Populate the required variables in the controller

  In the above code snippet, the directive is bound to the datasource scope variable. The variable, however, has not been initialized yet.   In your controller, set the datasource using the FusionCharts JSON format. (Check this tutorial for a general introduction to this format.)  

With the scope variable successfully initialized, this is how the result looks:

FusionCharts uses the JSON and XML data formats for writing chart data. As mentioned earlier, the chart data in the controller above is using the JSON data format. Every chart has a set of attributes and a predefined data structure, in both formats. To know about the attributes and data structure of a column 2D chart in JSON, click here. To know about the same representation of a column 2D chart in XML, click here.

In the above example, the fusioncharts directive is used as an attribute of the <div>  element. Alternatively,  the fusioncharts directive can be used as a tag. This is how the HTML code will then change:

The complete guide to this directive can be found here.

That’s all you need to know to start using our Angular-FusionCharts directive. We would love if you can give our directive a try. And if you are stuck anywhere drop us a line at support@fusioncharts.com. Happy to help!

Most business applications have some kind of dashboard that gives a top-level view of various functions, but there is a problem with these dashboards. We think we have built something that can solve it.


Demo and Source Code


Read the rest of this entry »

Grid-style layouts came into the spotlight when Pinterest grew popular. They became a hot favorite in the UX community for displaying photography portfolios, thumbnails of products on ecommerce sites, and article snippets on blogs. While they are primarily used to display text and image content, there’s a fair share of products that have adopted these plugins to build data-driven dashboards. Here are two examples – Geckoboard, and Freeboard – which use the grid-style or modular layout:



Read the rest of this entry »

Are you new to JavaScript?

JavaScript is a prototype-based scripting language with dynamic typing and has first-class functions. This mix of features makes it a multi-paradigm language, supporting object-oriented, imperative, and functional programming styles. It can be used to enhance the dynamics and interactive features of your web page by allowing you to perform calculations, check forms, write interactive games, add special effects, customize graphics selections, create security passwords and more. However, it  is considered to be the world’s most misunderstood programming language.

To help you with learning JS, we asked 15 experts to share their tips on the art of JavaScript programming: Read the rest of this entry »