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.
Table of Contents
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.
Exporting data from right-click menuIf 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
showExportDataMenuItemattribute of the <chart> element as 1.
More details on exporting chart data as CSV using the right-click menu and its customization options here
registerWithJSflag of chart as 1 in your HTML code. 2.Invoke the
getDataAsCSV()API only after the chart has been rendered (i.e., in
FC_Renderedmethod) 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:
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
exportDataQualifierattributes 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 OutputFusionCharts 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
exportDataFormattedValattribute 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…