5 things you didn’t know you could do with FusionCharts

FusionCharts is a comprehensive JavaScript charting solution. With over 90 chart types, numerous reporting capabilities and thousands of attributes, it is sometimes difficult to know everything you can do with FusionCharts. So in this post, I decided to put together an assortment of 5 things including round-edged column charts, interactive legends and the pin feature in the Zoom Line chart that I thought you probably weren’t aware of. Sample them, and let us know how you like the serving.

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 from our entire suite.Simple 2D Column Chart

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′ …>

Column chart with round edges and glass-effect

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

Website development chart with data converted to hours, days and weeks

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.

Chart with website development timeline in hours

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 subcaption, mostly the duration and units, and you are done.

Column chart with sub-caption

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

Column chart with revenue from domestic and international markets

What if for an instant, 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.

Column chart with a dataset hidden using 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 first week of February.

Zoom Line chart with a segment of data pinned

Then drag this selection over to the segment for first week of March. A ghost of the data for the first week of February will be overlaid on the data for first week of March.

Zoom Line chart with pinned data overlaid on another segment

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.

  • Chris June 27, 2011, 2:51 pm

    Some of these features are great, but why is the FusionCharts for Flex version so far behind the others? I would love to be able to do this stuff with my Flex FusionCharts but these features just don’t exist. You ask what else you “aren’t giving enough love to” – the answer is the Flex version of your product!

  • Sanket Nadhani June 28, 2011, 1:23 pm

    Chris- We are in fact working on a new version of FusionCharts for Flex that will support many of the new features from FusionCharts. We will put out dates as soon as we have them confirmed.

  • Amy August 7, 2011, 12:56 am

    Actually, we would love to have this in silverlight and javscript (which you already have, but might be easier with the razor engine)

    • Sanket Nadhani August 8, 2011, 11:20 pm

      We are coming out with a new version of our charts in JavaScript which will have most of the features you are looking for. It’s coming soon, so do watch out for it 🙂

      Silverlight – as of now, we do not support it.

  • Uday Kumar August 8, 2011, 10:52 am

    Two areas i want to bring to your notice.
    1) Extending the amount of data(xml string) as dataset are large frequently. 8KB of xml is the limit for good performance(as per documentation).
    2) There is no pie chart for multiseries. like for each line in linechart / stackedbar2d  generation one pie chart.. (disadvantage – at the end we will have more then one pie chart to show one linechart data.
     

    • Sanket Nadhani August 8, 2011, 11:22 pm

      1) If you are using the dataURI/dataURL method, there is no restriction on the size of data you provide.

      2) From what I understand, that doesn’t sound very intuitive. Do you have a link/screenshot that could help?

      • srikanth August 27, 2011, 3:52 pm

        Hi Sanket

        Just to make sure that I understood the 8K limitation part on the data(XML) part is that beyond 8kb of xml the charts will not get loaded at all. Just that the charts would load slowly correct.

        Please confirm

        • Hrishikesh Choudhari August 29, 2011, 11:10 am

          Hi Srikant,

          There is no limit to the file size of the static XML. We’ve just implemented a Zoom Line chart with the XML being 700KB.

          And if the XML is dynamically generated, then file sizes would not be a problem.

          Happy charting!

          • Ravi Sambangi October 5, 2011, 2:03 am

            Hi Hrishikesh,
            Can we apply zoom to Column3d also?

          • Hrishikesh Choudhari October 21, 2011, 12:16 am

            Hi Ravi,

            The zooming interactivity is available only with the specialized Zoom Line chart.

            Would you highlight a use-case where zooming could be needed in a Column3D chart?

  • Ravi Sambangi October 5, 2011, 1:34 am

    1. Most of our customers have been asking to provide an option to take the screenshot of the chart directly. when they right click on the chart, they should get an option Copy to clipboard/Take a screeshot sothat they can simply paste in the power points.

    2. Fustion charts having the limitation on the Stack charts. It can not plot the stacks in ascending or descending order by its value. Eg: If I want to plot X axis as by vehicle model, and then stack by sales in each region. I want to plot each vehicle model by ascending order by total sales volume(it is available in fusion charts through XML) and then want to plot the stacks in ascending order (it is not available in fusion charts).

    • Hrishikesh Choudhari October 21, 2011, 12:30 am

      Hello again,

      1. The issue you mentioned in the first point is solved very beautifully by two things:
      a. By using FusionCharts ExportComponent: Using this export feature, you can save a chart exactly the way you wanted – by right-clicking a chart and save it as a JPEG/PNG/PDF. You can read more about client-side exporting in the FusionCharts XT Documentation.

      b. Since you wanted the same chart to be present in PowerPoint, try our beta product named oomfo. oomfo is used as an add-in for PowerPoint, and provides you with the same functionality that you’ve been enjoying with FusionCharts.

      2. If the data needs to be plotted in ascending / descending order, then the XML needs to have the data in the same order. The developer has the liberty to sort the data in any way, and then form the XML using the sorted data.

      Hope this helps.

  • Monica Singh July 16, 2012, 1:55 pm

    Hi,
     I need Multi Series Bar with stacked bar in one graph. Waiting for your reply.
     

  • Ravikumar July 23, 2012, 6:12 pm

    Need to show the dates in Y-axis instead of putting values in chart, Here actually the requirement is preparing the chart for Planned Vs Actual Dates of work completion.

    Plz reply for this whoever having idea for this………

    • Hrishikesh Choudhari July 25, 2012, 3:49 pm

      Hi Ravi,

      FusionCharts doesn’t accept dates as the plot value, only a numerical value.
      For eg: <set label="marketing" value="05/31/2012" /> would be incorrect in FusionCharts data.

      However, there is a technique that you can use to get what you want.
      You could provide a UNIX timestamp of that particular date as value, and provide the actual date as displayValue.
      For eg: <set label="marketing" value="1338492030" displayValue="05/31/2012" toolText="05/31/2012" />

      You will also need to set numDivLines="0" and showYAxisValues="0"

  • Juan Manuel July 2, 2013, 5:50 am

    Hi,
    anybody knows how to embed Fusion Charts in Prezi slides?
     

    • Sanjukta Mukherjee September 19, 2014, 6:42 pm

      FusionCharts cannot be directly embedded in Prezi slides. You would need to export the chart as images using the native export functionality and integrate the saved images in your slides.

  • Harish Sawant September 18, 2014, 6:56 pm

    Hi Sanket,
    I have two queries and purpose is to allocate maximum area for the chart.
    1. I want to control the number of rows used for the display of legends. Currently I can specify number of columns for the legends but on rows I don’t have any control.
    So if there are 10 legends with one column, I want to display only 2 legends in the legend scroll.

    2. Can I separate legends from the charts? This is in case I want to display legends on overlay of some external element such as button.

    Thanks in advance.

    • Sanjukta Mukherjee September 19, 2014, 6:16 pm

      Hi Harish,

      1. FusionCharts does not have any controlling attribute for the number of rows in a legend. If you are aware of the total number of legends, you can accordingly set the value for “legendNumColumns” that will display the rows accordingly.
      2. You cannot separate the native legend from FusionCharts. But using the annotations you can display an external legend, outside the canvas area.

      • Harish September 19, 2014, 7:46 pm

        Hey Sanjukta,
        Appreciate your reply.
        I will reframe my first question.
        1. How can I fix the scroll height of legend as it is eating my chart area?
        2. Can we display tooltip on legend?
        Thanks in advance.

        • Sanjukta Mukherjee September 25, 2014, 11:49 am

          Hey Harish,

          1. FusionCharts currently does not allow to fix the scroll height of the legend. The legend takes up the scroll height based on the chart dimensions and the space availability. This cannot be controlled explicitly.
          2. Natively tooltip is not displayed on the legend. However, if the series names are too long with respect to the legend box and starts showing ellipses, the tooltip automatically appears on the truncated labels.

  • Manu January 9, 2015, 2:42 pm

    How will I plot a (border)straight line only on x axis to seperate my label and the graph?(using 2d 100% stacked column chart)

  • Ganesh November 16, 2016, 7:14 pm

    Hi,

    Is it possible to have track line for the scatter chart which shows all the points along the same line.

    Regards,
    Ganesh. K

    • swarnam February 24, 2017, 12:04 pm

      Hi Ganesh,

      Do check out about the regression line support in the docs.

Leave a Comment