Save Chart As Image/pdf Automatically Without Clicking On Save Button

[Rama Rao]

Hi Gurus,

I am very happy to use Fusion charts...

I am trying to export my chart as image/pdf. I did everything for that and its working fine.

So now I want to done this through by user control...Meaning,

We will provide a button 'Export' for every chart..When the user clicks the button, chart has to be exported automatically without having no more user interactions.

What I meant that, In general way of chart exporting is:

1. right click on the chart ->select Save as PNG image.

2.It takes some time to capture the image from chart.

3. Now FusionChartsExportObject button label will be changed to "Save" from "Waiting".

4.Click on the SAVE button.One save dialog will be opened and allow us to save that image.

Thats it.

But now my requirement is:

1. User will click on the button which is provided by us [but not fusioncharts]...(Export chart has to be called for this javascript event).

I did by calling

if( chart.hasRendered() )

chart.exportChart();

2. Now Save dialog box has to be opened without clicking "Save" button again directly. Means I want to call a function ( if exists ) which is generally called on clicking "Save" button, after exportChart() function.

Is there any function which triggers save button event in Fusioncharts by javascript( Like how can trigger exportChart() function)? Is there any way to do that?

3. I dont want to let my user be in pain by force him to click two buttons for a single export....

 

I hope you got my point..

 

Thanks,

Rama Rao.

Edited June 6, 2012 by Rama Rao

[Guest Sumedh]

Hi Gurus,

I am very happy to use Fusion charts...

I am trying to export my chart as image/pdf. I did everything for that and its working fine.

So now I want to done this through by user control...Meaning,

We will provide a button 'Export' for every chart..When the user clicks the button, chart has to be exported automatically without having no more user interactions.

What I meant that, In general way of chart exporting is:

1. right click on the chart ->select Save as PNG image.

2.It takes some time to capture the image from chart.

3. Now FusionChartsExportObject button label will be changed to "Save" from "Waiting".

4.Click on the SAVE button.One save dialog will be opened and allow us to save that image.

Thats it.

But now my requirement is:

1. User will click on the button which is provided by us [but not fusioncharts]...(Export chart has to be called for this javascript event).

I did by calling

if( chart.hasRendered() )

chart.exportChart();

2. Now Save dialog box has to be opened without clicking "Save" button again directly. Means I want to call a function ( if exists ) which is generally called on clicking "Save" button, after exportChart() function.

Is there any function which triggers save button event in Fusioncharts by javascript( Like how can trigger exportChart() function)? Is there any way to do that?

3. I dont want to let my user be in pain by force him to click two buttons for a single export....

 

I hope you got my point..

 

Thanks,

Rama Rao.

 

Hi,

 

What export functionality are you using? client-side export or server-side export?

[Rama Rao]

Thanks for quick reply Sumedh,

I am doing " Client-side export..."

 

 

Thanks,

Rama Rao.

Hi,

 

What export functionality are you using? client-side export or server-side export?

[Guest Sumedh]

Thanks for quick reply Sumedh,

I am doing " Client-side export..."

 

 

Thanks,

Rama Rao.

 

Hi,

 

Please refer this link: http://docs.fusioncharts.com/charts/Code/ExportChartSamples/ClientSide/Auto.html

 

Here the capturing process will start automatically as the chart is rendered, thus you can save the chart.

 

Saving chart with custom button is not possible. However, you can customize this button as you want.

 

Please refer the following URL's for more information:

http://docs.fusioncharts.com/charts/contents/?exporting-image/ECTerminology.html

 

http://docs.fusioncharts.com/charts/contents/?exporting-image/client-side/ECComponentUI.html

 

Hope this helps.

[cruzbruno]

Hi Sumedh,

 

I've got almost the same issue here.

 

I need to have my own button to export the file into a image file, as far as I understand it's not possible.

 

So I'll have to customize a button that the fusionchart provides, am I right?

 

Imagining that my user may not have the flash player installed, will fusionchart export feature work just fine?

 

At the documentation I could see how to configure the image to be download or to be save on the disk...

 

But it comes I need both functionalities:

1. Click at a button and download the image to the user;
   
2. Click at a button, save the image on disk, get the callback function and do something else with the image downloaded.
   

 

Is there a way I can achieve this? How could I have this two interactions?

[Guest Sashibhusan]

Hi,

 

Please find the response to your queries inline, below:

 

1. I need to have my own button to export the file into a image file, as far as I understand it's not possible. So I'll have to customize a button that the fusionchart provides, am I right?

>>Yes, you can customize the "waiting" button provided by FusionCharts, after the Export Component has been initialized by using the following syntax.

 

Syntax:

Component_Instance.componentAttributes.Parameter_name = 'Value';

For more information on "Component UI Customization", please follow the link below:

http://docs.fusionch...omponentUI.html

 

2. Imagining that my user may not have the flash player installed, will fusionchart export feature work just fine?

>>Yes, FusionCharts XT gives you the option of using automatic fallback, wherein the charts figure out the best mode of rendering (either Flash or JavaScript, based on availability of Flash Player).

So, in case if user will not have Flash Player installed, the chart will render in JavaScript mode automatically and the exported chart image/PDF will download to the client's machine (after initiating the export process).

 

But please note that, FusionCharts does not have the feature of saving the exported image/PDF on the server, for JavaScript Charts as of now.

 

3. But it comes I need both functionalities:

 

Click at a button and download the image to the user;

Click at a button, save the image on disk, get the callback function and do something else with the image downloaded. Is there a way I can achieve this? How could I have this two interactions?

 

>>Yes, you can have these two interactions by calling the "exportChart();" function twice by providing Export Parameters (Overriding Export Attributes) for both client-side and server-side exporting.

 

Ref. Code:

 

<script type="text/javascript">
function ExportMyChart() {
  var chartObject = FusionCharts('myChart');
  if( chartObject.hasRendered() ) {
 	chartObject.exportChart({ exportAtClient: '1',  exportFormat: 'PNG', exportHandler: 'fcExporter1' });
 	chartObject.exportChart({ exportAtClient: '0',  exportFormat: 'PNG', exportHandler: '/////////////////HTML mapping Relative path of "FCExporter.php" file //////////', exportAction: 'save' });
  }
}
</script>
.......
<input type="button" value="Export My Chart" onclick="ExportMyChart();" />

 

Hope this helps !

Edited July 13, 2012 by Sashibhusan

[Bessemer]

I am using a pdf saving pro, which is desinged to run within .net framework. Each time I need to save the loaded file into pdf document, I just need to run and debug the pdf getting started application, the file will be automatically stored and exported in pdf document.