Chart data is not just one-way traffic

Picture this: You are making a sales dashboard to be presented to the upper management of the company. During the presentation, your CFO asks you to pick out the raw data from a particular chart. At that moment, you cannot go back to the underlying database and give him the exact figures, can you? Nor can you afford to waste screen estate on dashboards by displaying tables right below the charts. So what now? Bring in FusionCharts v3.1’s option to export the data from your chart in CSV with a single click in the context menu — and your problems are solved. So let’s say this is one of the charts you have in your sales dashboard:

When you export the data from this chart to CSV, this is how the result will come out: “Salesperson”,”Sales Figure” “Alex”,”25000″ “Mark”,”35000″ “David”,”42300″ “Graham”,”35300″ “John”,”31300″ Wouldn’t your CFO be happy when the data he requested comes out neatly formatted like that in a single click? In case of a multi-series chart, the CSV data will have more columns – one for each series with the series name being the column header.

How to export chart data?

The chart data can be exported to CSV in two ways:

• Using the right-click menu of the chart, which copies the generated CSV data to clipboard.
• Using FusionCharts JavaScript API for data export, which returns the CSV data as string in your JavaScript code

Let’s take a look at both of them so that you can decide which one to take back home with you.

Exporting data from right-click menu

If you want to enable exporting of data using the right-click menu for your end user, it is as simple as this:

Copying chart data to clipboard in CSV using right-click menu Now that the data has been copied to the clipboard, you can just open your favorite text editor and paste it. To enable the Copy data to clipboard option in the right-click menu, you just need to set the showExportDataMenuItem attribute of the <chart> element as 1. More details on exporting chart data as CSV using the right-click menu and its customization options here

Exporting chart data using Javascript API

You can access the data of the chart from its JavaScript API as well. To know more about the Javascript APIs exposed by FusionCharts, please visit the section ‘FusionCharts and Javascript’ section in our Online Documentation. Exporting chart data using Javascript API is a 2-step process: 1.Set the registerWithJS flag of chart as 1 in your HTML code. 2.Invoke the getDataAsCSV() API only after the chart has been rendered (i.e., in FC_Rendered method) If we did the above and put the data in an alert box as soon as the chart was loaded, this is what our output would look like:

Displaying exported data (using Javascript API) in an alert box

Yes, it is more like a “Hello World” example but then you get the point, don’t you? To see the exact code going behind the above example and more customization options, please check out the documentation on this here.

Don’t like the CSV output?

If you don’t like comma as the data separator and double-quotes as the data qualifier in your CSV output, you can customize them to your liking. This is done using the exportDataSeparator and exportDataQualifier attributes respectively. If you want your CSV output to look a little cryptic for some purpose, here is something you can do: The CSV output would now look like this:

<span>ySalespersonyxxySales Figurey</span>
<span>yAlexyxxy25000y</span>
<span>yMarkyxxy35000y</span>
<span>yDavidyxxy42300y</span>
<span>yGrahamyxxy35300y</span>
<span>yJohnyxxy31300y</span>

Formatted CSV Output

FusionCharts smartly formats all the numbers in your chart using the number suffix/prefix as defined by you and using K(Thousands) and M(Millions) for large numbers. If you wish to export the chart data with all the number formatting in place rather than the raw numbers themselves, set the exportDataFormattedVal attribute of the <chart> element to ‘1’ – it is turned off by default. Once you have done that, the formatted CSV output would look as under: “Salesperson”,”Sales Figure” “Alex”,”$25K” “Mark”,”$35K” “David”,”$42.3K” “Graham”,”$35.3K” “John”,”$31.3K” That’s all about exporting data as CSV using FusionCharts. As always, we covered the feature here for FusionCharts specifically but it applies equally well to the other products in the FusionCharts Suite – FusionMaps, FusionWidgets and PowerCharts as well. Next up in the “How to get the most out of v3.1?” series is the usage of vertical separator lines for easier comprehension of data in the chart. So stay tuned…