It is the new year and we at FusionCharts are super-excited! Not just because it is time for new beginnings and new resolutions, but also because FusionCharts Suite XT v3.10 is now out!

It’s been a while since we introduced a new chart. So this time around, we thought why not surprise you and bring in three new charts, highly requested by customers, that aid in visualizing newer and bigger forms of data.  

Read on to know what’s new!

The Treemap Chart

The treemap chart is modeled on the tree data structure and is used to plot hierarchical information. It is created using 2D nested rectangles, which represent the nodes and leaves of the information tree and can be compared to gain insights from the information rendered on the chart.

Take a look at the live sample of a treemap chart below:


This treemap chart compares the sales team’s performance in the present year with their performance in the previous year. The employees are categorized region-wise.
Drilling down and up the nodes is the mode of traversal through the treemap chart. To drill-down to a leaf node, you can directly click that node. For example, when any rectangle (node) in the Northern Region is clicked, the chart drills down to the following view:

drilldown

Another way to drill down the chart is to click on a parent node to view the complete cluster of nodes belonging to the parent node.

There are two methods for you to drill back up.

Method 1: Traverse up one level at a time

  • Click the parent node to traverse one level up at a time.

OR

  • Click the icon below to go one level up.
    chart-guide-treemap-chart-introducing-the-treemap-chart-image-2

Method 2: Traverse up directly to the initial stage

  • Click the icon below to go directly to the initial stage.
    chart-guide-treemap-chart-introducing-the-treemap-chart-image-3

Applications of a Treemap Chart

Common use-cases represented using the treemap chart include showing the folder structure of a system. It is also used to study patterns and occurrences in a large data set. This is because the colour and the size dimensions are correlated.

Click here to read more on the treemap chart.

The Zoom Scatter Chart

The FusionCharts Suite XT zoom-scatter chart is a special type of chart that extends the capabilities of the scatter chart to include the zooming and panning features. It can be seen as an extension of the scatter chart with the ability of displaying millions of data points because of the zoom and pan feature.

Take a look at the sample zoom scatter chart shown below:


The chart compares the admission rate (in percent) with the average annual return on degree (in percent) for five majors and over a period of 20 years.

Drag the mouse-pointer over the chart to select and zoom into a subset of data points. You can also pan through the data points to analyze the chart data in detail.

The  zoom-scatter chart is primarily used to find correlations between datasets, which can be determined by the visual patterns of the data.  The chart supports regression lines that allow the user to find correlation in large datasets. Higher the number of data points, higher are the chances of more accurate correlations. The zoom-scatter chart is capable of handling more than a million data points in modern canvas supported browsers (including IE9+).

Click here to read more on the zoom scatter chart.

The Zoom-line Dual Y-Axis Chart

The zoom-line dual y-axis charts extends the capabilities of the zoom-line chart by introducing support for a secondary y-axis. This chart can, therefore, be used to plot datasets that have different numeric units or different intervals—a clear advantage over using the single y-axis zoom-line chart.

Take a look at the sample zoom-line dual y-axis chart shown below:


This zoom-line chart is used to compare the unique footfall with the sales (in dollars) for each day of the previous year.

The zoom-line dual y-axis is similar to the zoom-line chart in every aspect, except for its support of the secondary y-axis.

Click here to read more about the zoom-line dual y-axis chart.

Interesting, are they not? And if you thought that was it, then no. We’ve got a lot more added and improved in the product to make sure that you have the best data visualization experience ever! Click here to read about all that v3.10.0 brings to you.

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!

3 Awards for FusionCharts!!!

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.

What?

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

Introducing Collaboration Dashboard

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:

geckoboard

freeboard

Read the rest of this entry »