How To Export The Percentage Value In Amchart V3 Export Functionality

I'm drawing a pie chart using AmCharts V3 and am using the export plugin to export the data as a file. I'm displaying a percentage contibution of the sale in different countries an

Solution 1:

There are two ways you can go about this - both of which involve using the processData callback offered by the export plugin.

1) Use processData to add a percent property in your data and manually trigger a download with toCSV or toXLSX. Note that you will need to throw an exception to prevent the plugin from triggering the download multiple times:

var chart = AmCharts.makeChart("...", {
  // ...export: {
    // ...processData: function(data, cfg) {
      //only for CSV and XLSX export. Wrap in an ignore call to prevent infinite loopif ((cfg.format === "CSV" || cfg.format === "XLSX") && !cfg.ignoreThatRequest) {
        var sum = data.reduce(function(accumulator, currentDataValue) {
          return accumulator + parseFloat(currentDataValue.TotalSale);
        }, 0);

        data.forEach(function(currentDataValue) {
          currentDataValue.percents =
            (parseFloat(currentDataValue.TotalSale) / sum * 100).toFixed(1) + "%";
        });
        //will map to this.toCSV or this.toXLSXthis["to" + cfg.format]({
            data: JSON.parse(JSON.stringify(data)),
            ignoreThatRequest: true, //set ignore flag as processData will execute again when this is calledexportFields: ["Name", "TotalSale", "percents"]
          },
          function(output) {
            this.download(output, cfg.mimeType, cfg.fileName + "." + cfg.extension);
          }
        );
        throw"Invoked – Use custom handler (stop multiple download)"; //throw an exception to stop the multi-download attempt
      }

      return data;
    }
  }
});

Demo of method #1

2) Alternatively, add a dummy percents property in your dataProvider with its value set to null and use processData to fill it in before exporting the chart. This is simpler and doesn't require an exception workaround to prevent multiple downloads:

var chart = AmCharts.makeChart("...", {
  // ...export: {
  // ...processData: function(data, cfg) {
        var sum = data.reduce(function(accumulator, currentDataValue) {
          return accumulator + parseFloat(currentDataValue.TotalSale);
        }, 0);

        data.forEach(function(currentDataValue) {
          currentDataValue.percents =
            (parseFloat(currentDataValue.TotalSale) / sum * 100).toFixed(1) + "%";
        }); 
      return data;
    }
  }
});

Demo of method #2