Table of Contents
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.
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 🙂
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 🙂
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.
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.
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.