Exporting charts

[yasso]

Hello,

 

can anyone please point me to an example or a help page that demonstrates how to properly export charts to PDF or an image?

 

 

 

What I am doing right now is take a screen capture of the chart and crop it as needed. The quality of the chart (colors) from the screen capture is not good. I read a few posts re this subject but it is not really intuitive.

 

 

 

Any help is appreciated.

 

Thanks

[Guest Basundhara Ghosal]

Hi,

Starting FusionCharts v3.0.7, you could export your charts as images. And FusionCharts v3.1 adds new dimensions to it, by allowing you to export as PDFs as well, and also lets you choose whether to export the charts at client-side or server-side.

 

Using FusionCharts export charts routine, you can do the following:

 

* Export charts as images (JPEG, PNG) or PDFs at client-side or server-side. In either case, the chart first needs to render in browser. You cannot directly export the chart as images/PDFs on server until the chart has rendered in browser.

* When using server-side export, you can save the exported output on server's disk at a configurable location. This allows you to later embed those charts in your emails or reports.

* When using client-side export, you can use our batch export process to export all charts present on a page as a single image or PDF in just one click.

* Configure callback JavaScript functions that get invoked after the export process has completed. This helps you show a custom waiting message to the user during the chart export process and also integrate your export process with dynamic scripts and AJAX components

* Configure cosmetic properties of the client-side export handler User Interface. The client-side export handler is the component used to convert charts as images when opting for client-side export.

 

In order to save the charts as image/PDF using the export functionality, you need to set the values for certain XML attributes. Please refer to the links below for the detailed information on the same:-

 

Ref.- 

http://www.fusioncharts.com/docs?/ECProcess.html

http://www.fusioncharts.com/docs?/ECXML.html

For online demo of export feature, please refer to the link mentioned below :-

 

Ref.- http://www.fusioncharts.com/Demos/ExportChart/Contents/client_export.html

 

Please note, if you do not wish the exported image to be sent back to browser, but instead want it to be saved on the server, you need to make the following changes from the previous example, where the file was downloaded:

1. Open the server-side export handler and configure the path of write-enabled folder in which images will be saved, as well as set the HTTP URL representation of that folder in the code. The handlers also allow a few advanced configuration with respect to file naming.

2. Change exportAction='save' in the XML

3. Remove exportTargetWindow attribute from your XML. As there are no downloads returned, there is no question of which window to return it in

4. Create a JavaScript method in your web page that gets called once the image has been saved on server. Specify the name of this function in exportCallback attribute of XML. If you do not specify any names here, by default, a JavaScript function named FC_Exported is called.

 

Ref.-

 http://www.fusioncharts.com/docs?/ECServerSave.html

  http://www.fusioncharts.com/docs?/ECServerFormats.html

  http://www.fusioncharts.com/docs?/ECExportDialog.html

 

Also, in case you wish to save the image in the client side, you'll need to follow these steps:

1. Copy FusionChartsExportComponent.js from Download Package > JSClass to your server. A good location is where you've placed FusionCharts.js

2. Copy FCExporter.swf from Download Package > Charts to your server. A good location is where you've placed the other chart SWF files.

 

With that done, please try following the steps mentioned below :

1. Include an instance of Exporter Component in your web page

2. Configure the chart (XML) to use this instance of export component by specifying it in HTML

3. Start exporting

 

Ref.- 

http://www.fusioncharts.com/docs?/ECClientSimple.html

http://www.fusioncharts.com/docs?/ECClientMultiple.html

http://www.fusioncharts.com/docs?/ECClientCallback.html

http://www.fusioncharts.com/docs?/ECComponentUI.html

http://www.fusioncharts.com/docs?/ECServerFormats.html

http://www.fusioncharts.com/docs?/ECExportDialog.html

 

I hope this helps.

[yasso]

wow, awesome. Thanks for the comprehensive feedback. I'll review all of this and I am sure I'll get something useful out of it.

 

 

 

cheers

[Guest Basundhara Ghosal]

Hi,

Thanks for your appreciation and kind words.

Hope your issue gets resolved soon.

Please revert to me in case it works.

Also, please feel free to revert to me in case you face any further issues.

[yasso]

Hi,

 

 

 

I followed the instructions provided on http://www.fusioncharts.com/docs/?/ECClientMultiple.html and attempted a start with the simple example.

 

 

 

I created a test.html and a SimpleExample.xml files (see attached - renamed test.html to test.txt so I can upload to post) and placed them in the same folder along with:

 

 

 

- FusionCharts.js,

 

- FusionChartsExportComponent.js, and

 

- FCExporter.swf

 

 

 

However the result is the following:

 

 

 

 

 

 

The export components does not seem to be active. (The save as option on right-click is not available either)

 

 

 

What else am I missing?

 

 

 

Thank you for your help.

test.txt

SimpleExample.xml

[yasso]

Hi Basundhara,

 

 

 

any feedback?

 

 

 

Thanks!

[Guest Basundhara Ghosal]

Hi Yasso,

Please refer to the sample that we are sending you as an attachment.

I hope this helps.

Export_at_client.zip

[brking]

Is there a way to automatically save the chart as an image server side when the chart is rendered? I followed the user documentation:

 

 

 

Exporting Charts as PDF or Images > Server-side export > Saving exported output on server disk

 

 

 

However, the file is only saved when I right click and select save on the chart. I need for the image to be created and saved when it is rendered. Thanks.

 

 

 

Brandon