Export Multiple Charts With Js

[woodykiddy]

Hi,

 

I have a javascript function which accepts chartID parameter, and calls exportChart(). The code is as follows:

 

 

   function ExportChartToImg(chartid) {
           var chartObject = getChartFromId(chartid);

           if (chartObject != null && chartObject.hasRendered()) {
               chartObject.exportChart();
           }

   }

 

 

It works perfectly for page that only contains 1 chart object. But, what if I have multiple chart objects on a web page? Can I still re-use the above logic and export chart like this? (Assume multiple chartid is represented in this format: chart1|chart2|chart3|...)

 

 

   function ExportChartToImg(chartid) {
       var arr = new Array();
       arr = chartDomID.split("|");

       for(var i=0; i< arr.length; i++){
           chartid = arr[i];
           var chartObject = getChartFromId(chartid);
           alert(chartObject + " - " + i);
           if (chartObject != null && chartObject.hasRendered()) {
               chartObject.exportChart();
           }
       }
   }

 

 

I was expecting to get chart exported multiple times (because of the for loop), but as a matter of fact, I was only able to have first one exported, hence the chart object (chart2) couldn't exported successfully.

 

So what should I do to be able to export multiple charts with JS? Can anyone help me, please? Thanks.

Edited March 15, 2012 by woodykiddy

[Guest Sumedh]

Hi,

 

You can export multiple chart which are rendered in the same page.

 

You can achieve this, by using batch export functionality.

 

The Batch mode is useful when you have multiple charts on a page and you want to export all of them together by calling a JavaScript API.

 

The exported files for each chart can either be saved individually, or all the exported charts can be saved as a single file.

 

For enabling export of chart in Batch mode, you would need to assemble the following elements:

 

>> The chart itself embedded using FusionCharts JavaScript class (FusionCharts.js).

 

>> FusionCharts Export Component - This is named FCExporter.swf and is present in Download Package > Charts. You need to copy-paste this SWF to your server. A good location will be to place this SWF along with your chart SWFs.

 

>> FusionCharts Export Component JavaScript class - This JavaScript class is named FusionChartsExportComponent.js and is present in Download Package > Charts folder. Place it where you have placed FusionCharts.js on your website (though not necessary, but this helps you centralize all FusionCharts related JS files)

 

You would also need to set following attributes in the XML file under the chart element:

 

exportEnabled='1'

exportAtClient='1'

exportHandler='fcBatchExporter' (name of the export handler)

 

For more information please refer the following link:

http://docs.fusionch...BatchSetup.html

 

Also, please find attached illustration for your reference.

BatchExport.zip

[woodykiddy]

Hi,

 

You can export multiple chart which are rendered in the same page.

 

You can achieve this, by using batch export functionality.

 

The Batch mode is useful when you have multiple charts on a page and you want to export all of them together by calling a JavaScript API.

 

The exported files for each chart can either be saved individually, or all the exported charts can be saved as a single file.

 

For enabling export of chart in Batch mode, you would need to assemble the following elements:

 

>> The chart itself embedded using FusionCharts JavaScript class (FusionCharts.js).

 

>> FusionCharts Export Component - This is named FCExporter.swf and is present in Download Package > Charts. You need to copy-paste this SWF to your server. A good location will be to place this SWF along with your chart SWFs.

 

>> FusionCharts Export Component JavaScript class - This JavaScript class is named FusionChartsExportComponent.js and is present in Download Package > Charts folder. Place it where you have placed FusionCharts.js on your website (though not necessary, but this helps you centralize all FusionCharts related JS files)

 

You would also need to set following attributes in the XML file under the chart element:

 

exportEnabled='1'

exportAtClient='1'

exportHandler='fcBatchExporter' (name of the export handler)

 

For more information please refer the following link:

http://docs.fusionch...BatchSetup.html

 

Also, please find attached illustration for your reference.

 

Thanks very much for the reply and attached sample code.

 

From the sample code, I noticed that we had to click the Save button so that we could save individual chart image.

 

I am just wondering if there is any way that we can automate this "saving image" process. I mean, it'd be really nice if individual chart image can be saved directly onto the server disk.

 

So can we possibly achieve this? Thanks

[Guest Sumedh]

Hi,

 

Automatic saving of a chart can be done, you would need to use "addEventListener" method as the chart gets rendered.

 

For live example, refer this link: http://docs.fusioncharts.com/charts/Code/ExportChartSamples/ServerSide/Auto.html

[woodykiddy]

Hi,

 

Automatic saving of a chart can be done, you would need to use "addEventListener" method as the chart gets rendered.

 

For live example, refer this link: http://docs.fusionch...rSide/Auto.html

 

What if I have multiple charts that need to be exported automatically to the server? Can I call addEventListener multiple times in Javascript?

 

I will give it try first. Thanks for the suggestion.

 

 

 

[Guest Sumedh]

Hi,

 

"addEventListener" method, when called as static method using FusionCharts.addEventListener(), registers the global events of all the charts present in a page.

 

This event listener works for all the rendered charts. Thus, you can export multiple charts automatically.

 

For more information, read here: http://docs.fusioncharts.com/charts/contents/?JavaScript/API/Methods.html

[DarK]

Currently the flow to download for batch export is

 

1. Click on the "Begin Batch Export"
2. Select the download type.
3. Click "Save".

If you want to give users a PDF download as default option and remove the extra clicks.

 

So my question is --

 

Is it possible to do the whole process of downloading PDF only in a single click (not on a flash button). Basically just click "Begin Batch Export" and it downloads the PDF.

 

Thanks

DarK

Edited March 29, 2012 by DarK

[Guest Sumedh]

Hi,

 

I am afraid, saving charts directly into PDF with a single button click is not supported in Batch Export Functionality, as of now.

 

You can try with automatic batch export.

 

Please refer this link for the illustration: http://docs.fusioncharts.com/charts/Code/ExportChartSamples/BatchExport/Auto.html

 

Hope this helps.