FusionCharts API-Methods: getCSVData

Created using FusionCharts Suite XT - www.fusioncharts.com

by FusionCharts

HTML

<script src="https://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="https://static.fusioncharts.com/code/latest/fusioncharts.charts.js"></script>
<script src="https://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>
<!-- This sample shows the usage of the getCSVData() method -->
<div id="indicatorDiv">Method Name: <strong>getCSVData()</strong>
   <p>Fetch chart data set in the CSV format. The data returned is the closest possible comma-separated value representation that has been provided to the chart. The exported data does not contain any functional or cosmetic attribute that was set on the chart.</p>
   <p>Click <strong>Get CSV Data</strong> to the chart CSV data.</p>

    <div class="text-center">
    	<button id="get_csv_data">Get CSV Data</button>
    	
    	<div id="csv_data"><i>The CSV data is shown here.</i></div>
    	
    	<div id="chart-container">FusionCharts will render here</div>
    </div>

</div>

CSS

body {
    padding: 5px;
    margin: 0 auto;
}
strong{
  font-weight: bold;
}

.text-center {
  text-align: center;
}

p {
  margin: 10px auto;
}

.mb-20 {
  margin-bottom: 20px;
}
#indicatorDiv {
    width: 500px;
    font-family:'Arial', 'Helvetica';
    font-size: 13px;
}
#csv_data {
    overflow:auto;
    font-family:'Arial', 'Helvetica';
    font-size: 13px;
    margin: 10px 0;
}
#get_csv_data {
    font-size: 13px;
    padding: 10px;
}

JavaScript

FusionCharts.ready(function () {
    var revenueChart = new FusionCharts({
        type: 'doughnut3d',
        renderAt: 'chart-container',
        width: '450',
        height: '250',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "Split of Revenue by Product Categories",
                    "subCaption": "Last year",
                    "numberPrefix": "$",
                    "theme": "fint",
                    "captionFontSize": "13",
                    "subcaptionFontSize": "12",
                    "subcaptionFontBold": "0"
            },
                "data": [{
                "label": "Food",
                    "value": "28504"
            }, {
                "label": "Apparels",
                    "value": "14633"
            }, {
                "label": "Electronics",
                    "value": "10507"
            }, {
                "label": "Household",
                    "value": "4910"
            }]
        }
    }).render();

    /**
     * @description
     * The getCSVData() method fetches chart data set in the CSV format.
The data returned is the closest possible comma-separated value representation that has been provided to the chart. The exported data does not contain any functional or cosmetic attribute that was set on the chart. However, the following chart attributes can be set to customise the CSV output:
     * @param {String} exportDataSeparator: Sets the CSV delimiter string. Default: , (comma)
     * @param {String} exportDataQualifier: Sets the CSV qualifier string. Default: {quot}
     * @param {Boolean} exportDataFormattedVal: Sets whether the output will be a formatted string or a pure number.
     * @param {Boolean} exportErrorColumns: Forces error output on the error bar, error line, and error scatter charts
     * usage: chartObj.getCSVData();
     *         
     */
    function getCSV() {
        //var separator = document.getElementById("separator").value;
   ...