5 Things You Didn’t Know You Could Do With FusionCharts

FusionCharts is a comprehensive JavaScript charting library. With over 100+ charts and 2000+ maps, extensive documentation, a consistent API, and a range of customization options. FusionCharts is loved by 750,000 developers across the globe. So, in this post, I’ve compiled a list of five facts about which you’re probably unaware. These include interactive graphs such as round-edged column charts, interactive legends, and the Zoom Line charts pin feature. Test them out and let us know how they look.

Give Your Column Charts the Modern Round-Edged Look

You have surely seen our simple 2D column chart. Simple and elegant, it is one of the most used charts in our entire suite. What you probably did not know is that you can convert this simple design into a much more modern design, the round-edged column chart, just by setting <chart useRoundEdges=’1′ …> I like calling it the glass-effect column chart and every time I am using the column chart, I make sure to use this one. With the addition of just a single attribute, you could give your users the feeling that you have put in so much effort to design the chart. Maybe charge some extra money too 🙂

Create Your Number Scales to Make the Chart More Intelligible

If you are plotting race timings, chances are your raw data is in seconds. Imagine having to comprehend figures like 5251s instead of the much more intuitive 1:27:31. The same thing happens with a project timeline chart where the raw data is in hours. Wouldn’t it be much easier if these numbers could be automatically converted to the more intuitive hours, days, and weeks format? That is exactly what the number scaling capability of FusionCharts does for you, and it takes just three attributes. <chart DefaultNumberScale=’hours’ NumberScaleValue=’24,7,30′ NumberScaleUnit=’days, weeks, months’ …> First up, we just define the default unit in which we are providing the data using DefaultNumberScale=’hours’. Then we get to the job of defining the number scale using NumberScaleValue=’24,7,30′ NumberScaleUnit=’days, weeks, months.’ The number scale implies that 24 hours equals a day, 7 days equals a week, and so on. You just need to be careful when mapping the units in NumberScaleUnit to their respective conversion metrics in NumberScaleValue. Of course, this is a cruel number scale where I have made all the 24 hours in a day working hours and all 7 days working days. Yours I am sure would be more humane 🙂

Delegate Excess Details From the Caption to the Sub-Caption

As I discussed in a recent post on making your charts more usable, the chart’s caption should describe what the chart is about. This should also include the duration that the chart represents (for example, Sales figures for 2006-2010) and all units used for the numbers (for example All figures are in millions – USD). However, with so many details, it is pretty common for the caption to outgrow its space. In that case, all you need to do is delegate some of the details to the sub-caption, mostly the duration and units, and you are done. You just need to define <chart subCaption=’in Percentage’ …> and you are good to do. All the information you wanted to display at the top of the chart is there, and the javascript graph stays clutter-free.

Hide Entire Data Sets on a Multi-Series, Stacked, or Combination Chart Using the Legend

You would be using a multi-series, stacked, or combination chart when you have multiple data sets to show on your chart. Say you are displaying the revenue your company made for the year through the sale of hardware, software, and services. For a more complete analysis, you have broken down the revenue generated from the domestic and international markets. What if, for instance, the user wanted to compare the revenue generated from the different segments only for the domestic market? He would have to mentally ignore the columns for the international sales and do his analysis. This is where the interactive legend comes in. You can hide the revenue from the international market for all the segments just by clicking on its icon on the legend. The user is left with figures only for the domestic market. Makes data analysis so much easier, doesn’t it? And all it takes is a click.

Compare Non-Adjacent Data Sets by Overlaying Them on the Zoom Line Chart

The zoom line chart is exactly what the name indicates. You have a line chart where the user can zoom into any segment of data he wants a microscopic view of. But what you probably didn’t know is the first-of-its-kind pinning capability it offers. Say you are displaying daily visits to your website for an entire year and the user wanted to compare the visits during the first week of February to the first week of March. Since they are not adjacent, the best he can do is use the naked eye for the comparison. In comes the pinning capability. Switch to the pin mode of the chart and select the segment for the first week of February. Then drag this selection over to the segment for the first week of March. A ghost of the data for the first week of February will be overlaid on the data for the first week of March. See how easy this makes comparing non-adjacent data, and your user doesn’t have to rely on the naked eye alone to make these comparisons. [Dig deeper: Learn more about the capabilities of the Zoom Line chart and how to configure them] Which of these capabilities were you previously aware of? Are you using the pin capability already? Is there anything else we aren’t giving enough love to? Let us know in the comments.