How to export multi chart by one click

[maks]

Hi:

I like the forum as people here answer quickly with good idea. Thanks for the support guys......

I have a problem exporting chart.

For exporting a single chart my code works fine. Now I have a GridView with List of Zones. Users check the check box and charts genereate for the selecting zones.( I'm using ASP.net and C#.net). In foreach loop I did this.  My multichart generating code is working great and I'm getting all the charts for the Zone that are selected. No I want to export all the charts in one button click. How can I do that. I tried using my existing code with some changes. But it exports only on chart at a time which I don't want.

What I'm doing: I'm adding all the chart IDs in a hidden field txtNumberOfCharts's value in my Foreach loop 

txtNumberOfCharts.Value += myChartId.ToString() + ",";

Then I have created a javascript like:

function

ExportChartId()

{

var chartIds = document.getElementById('txtNumberOfCharts').value;

var temp = new Array();

temp = chartIds.split(",");

var numberofCharts = temp.length;

for (var i=0; i<numberofCharts; i++)

{

exportHandler(temp[i]);

}

}

[code]

Now instead of calling exportHandler(ChartID) I'm calling this javascript function on button click event.

Please I need your help regarding this issue.

Thanking You,

Maksuda...

[shamasis]

...

Greetings,

Are you trying to do a server-side export or client-side export?

The code to do client-side batch export is:

http://www.fusioncharts.com/Demos/ExportChart/Contents/batch_export.html

An implementation of server-side batch export is already provided at:

http://www.fusioncharts.com/forum/Topic19119-32-1.aspx

Let me know if these help.

[maks]

Hi Shamasis:

Thanks for the links. I tried for the client side batch-export.

What I'm doing first, in a hidden field I collect all selected Ids from GridView :

txtNumberOfCharts

.Value += row.Cells[0].Text+ ",";

Then from txtNumberOfCharts I get all values in my JavaScript Function as I'm passing these Ids as Chart ID in my code.

 Here is my code

<div id="fcexpDiv" align="center">FusionCharts Export Handler Component</div>
<script type="text/javascript">
//Initialize Batch Exporter with DOM Id as fcBatchExporter
var myExportComponent = new FusionChartsExportObject("fcBatchExporter", "FusionCharts/FCExporter.swf");
var chartIds = document.getElementById("ctl00_ContentPlaceHolder1_txtNumberOfCharts").value;
var arrChartId=new Array();
arrChartId=chartIds.split(",");
var numberOfCharts=arrChartId.length;
var newCharIds =" ";
for( var i=0;i<numberOfCharts-1;i++) 
{
if(i==0)
newCharIds+="'"+arrChartId[i]+"'";
else
newCharIds+=","+"'"+arrChartId[i]+"'";
}
myExportComponent.sourceCharts =[newCharIds];
alert(newCharIds);
myExportComponent.componentAttributes.fullMode='1';
//Set saving mode as both. This allows users to download individual charts/ as well as download all charts as a single file.
myExportComponent.componentAttributes.saveMode='both';
//Show allowed export format drop-down
myExportComponent.componentAttributes.showAllowedTypes = '1';
//Customize the component properties 
//Width and height
myExportComponent.componentAttributes.width = '400';
myExportComponent.componentAttributes.height = '120';
//Background color
myExportComponent.componentAttributes.bgColor = 'ffffdd';
//Border properties
myExportComponent.componentAttributes.borderThickness = '2';
myExportComponent.componentAttributes.borderColor = '0372AB';
//Font properties
myExportComponent.componentAttributes.fontFace = 'Arial';
myExportComponent.componentAttributes.fontColor = '0372AB';
myExportComponent.componentAttributes.fontSize = '12';
//Message - caption of export component
myExportComponent.componentAttributes.showMessage = '1';
myExportComponent.componentAttributes.message = 'Export the chart first, and then click on this button to save';
//Button visual configuration
myExportComponent.componentAttributes.btnWidth = '200';
myExportComponent.componentAttributes.btnHeight= '25';
myExportComponent.componentAttributes.btnColor = 'E1f5ff';
myExportComponent.componentAttributes.btnBorderColor = '0372AB';
//Button font properties
myExportComponent.componentAttributes.btnFontFace = 'Verdana';
myExportComponent.componentAttributes.btnFontColor = '0372AB';
myExportComponent.componentAttributes.btnFontSize = '15';
//Title of button
myExportComponent.componentAttributes.btnSaveTitle = 'Save this chart'
myExportComponent.componentAttributes.btnSaveAllTitle = 'Save all charts together'
myExportComponent.componentAttributes.btnDisabledTitle = 'Waiting for export';
myExportComponent.Render("fcexpDiv"); 
//Define a function, which will be invoked when user clicks the batch-export-initiate button
function initiateExport(){
myExportComponent.BeginExport();
}
</script> 

I called JavaScript Function in my button

<input id="btnExportChart" runat="server" onclick="javascript:initiateExport();" style="width: 90px; font-family: 'Frutiger LT 45 Light'; height: 28px" type="button" value="Export Chart"  />

It's not working for me. Do you have any idea what is the problem here. Need your help pls.

 

Thanking You,

Maksuda...

[shamasis]

...

Greetings,

myExportComponent.sourceCharts will accept an array of chart ids and you are sending it csv. So, instead just do myExportComponent.sourceCharts = arrChartId; and it will work.

Refer http://www.fusioncharts.com/docs/: Exporting charts as PDF/Images >JavaScript Reference > JavaScript API

Edited October 23, 2009 by Guest

[maks]

Thank you very much Shamasis for the reply.

I'm realy glad that it's working now.

We can customize the saveAllTitle, is it possible to customize the title of single save?

When I'm trying for both options (Individual and Batch), Caption of each chart is showing as single save title and I need to change the title.

Thanks for all supports.

Regards,

Maksuda...

[Guest Madhumita]

Hello,

 

Would you please consider using myExportComponent.exportAttributes.exportFileName="filename";?

 

Using exportFileName attribute you can specify the name (excluding the extension) of the file to be exported.

Alternatively, you can set exportFileName='filename' in your XML.

 

Hope this helps.

Edited October 27, 2009 by Guest

[maks]

Thanks Madhumita for your reply.

I actually I'm using

exportFileName='filename'

 to save the exported individual file which is working, but the label of the individual file (not the name of saved file) is Caption of the chart which I want to customize. How please let me know.

 

Thanking You,

Maksuda...

[shamasis]

...

Greetings,

The label of each chart inside the export component is always the "caption" of the chart. This is not customizable as of now, but if this is an extreme requirement, there are workarounds.

On beginning of the export process, you can, using JavaScript, retrieve the XML, modify the caption, update the chart using setDataXML and then begin export. After the export completes, repeat the previous steps and restore your caption.

The above process may not appear that elegant, but it will serve your purpose.

[maks]

Thanks Shamasis for the reply. I didn't understand

 

On beginning of the export process, you can, using JavaScript, retrieve the XML, modify the caption, update the chart using setDataXML and then begin export. After the export completes, repeat the previous steps and restore your caption.

Is it possible to modify the chart caption after chart creation ?

Would you please post a sample code how can I do it?

 

Thanking you,

Maksuda...

[shamasis]

...

Is it possible to modify the chart caption after chart creation ?

Yes. The process is simple:

When user clicks export:

1. Using JavaScript, get the chart's XML
2. Set animation property of the chart to '0'
3. Get the "caption" property and store it in a JS variable
4. Change the caption property to your new value
5. Update the chart by setting this updated dataxml using setDataXML method
6. Begin export
7. When export is completed, on the callback event run a JS function
8. The above JS function will again get the charts XML,
9. Read the caption stored from step (3) and update the XML
10. Again do setDataXML to restore the old caption.

[rohit.kumar]

Hi,

 

 

 

 

 

Could you please try using setExportOverrides to change the caption and exported file name. Following is an example how to use it and you also need to replace the FusionChartsExportComponent.js file which is attached with the sample example.

 

 

 

myExportComponent.setExportOverrides({'chartId1':{meta:{caption:'new caption 1'},parameters:

 

{exportFileName:'New_File_Name'}},

 

'chartId2': {meta:{}},

 

'chartId3': {meta:{caption:' '}},

 

'chartId4': {meta:{caption:'new caption 4'}}

 

});

 

 

 

Hope this helps.

 

 

 

 

 

Regards,

 

Rohit Kumar

SampleExportComponent.zip

[maks]

Hi Rohit:

Sorry for the late answer, I was busy with other staffs.

myExportComponent.setExportOverrides({'chartId1':{meta:{caption:'new caption 1'},parameters:

{exportFileName:'New_File_Name'}},

'chartId2': {meta:{}},

'chartId3': {meta:{caption:' '}},

'chartId4': {meta:{caption:'new caption 4'}}

});

 

I was trying to follow your code that you posted here. Thing is my chart IDs are in an array.

What I did, created two arrays, one for chart ID and another for chart Caption:

var chartIds = document.getElementById("ctl00_ContentPlaceHolder1_txtNumberOfCharts").value; 
//Zone IDs as chart IDs
var chartCaptions=document.getElementById("ctl00_ContentPlaceHolder1_txtZoneName").value; 
//Zone Names as Chart Captions 
var arrChartId=new Array();
var arrChartCaps=new Array();
arrChartId=chartIds.split(",");
arrChartCaps=chartCaptions.split(",");
myExportComponent.sourceCharts = arrChartId;


var numberOfCharts=arrChartId.length;
for(var i=0;i<numberOfCharts-1;i++)
{
myExportComponent.setExportOverrides({arrChartId[i]: {meta:{caption:arrChartCaps[i]}}
})
}

to Override the caption. It's not working

By the way what did you mean by-

you also need to replace the FusionChartsExportComponent.js file which is attached with the sample example.

Should I have to replace my existing FusionChartsExportComponent.js  file with the FusionChartsExportComponent.js file which was in sample example ?

I replaced FusionChartsExportComponent.js when I was trying, just to make sure that you asked the same thing what I did.

I have another issue, when I export multi charts, it's exporting properly and during individual save its working fine.<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" />

But when I want to save all charts together as single a file it works only when I generate chart for few Zones.

What I mean, I can generate multi chart for selected Zones. I have 36 Zones. So users may want to generate all Zones chart or for selected Zones chart from a List of Check Box. When selected Zones are 7/8 I can save all charts as s single file. When selected charts are more than 10 I can't save all charts together as a single file. 

Please let me know if any help is available for both case.

I always appreciate Fusion Chart team

Edited November 10, 2009 by Guest

[FusionCharts Support]

Hi,

We could not replicate this issue in our Labs.

Could you pleaser let us know which browser version and Flash Player version(detailed), OS version you are using?

[maks]

Thanks Sudipto for the reply.

 

We could not replicate this issue in our Labs.

What I have to do to solve it ? Should I raise the Issue again?

Could you pleaser let us know which browser version and Flash Player version(detailed), OS version you are using?

I'm using IE 7.0.5730.13

Flash Player version - 8

OS is Windows XP (SP3)

 

Thanking You,

Maksuda...

[maks]

Dear Fusion Chart Team:

I posted an issue several days before and waiting to get some solution. Do you have any solution of the following issue please -

I have another issue, when I export multi charts, it's exporting properly and during individual save its working fine.<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" />

But when I want to save all charts together as single a file it works only when I generate chart for few Zones.

What I mean, I can generate multi chart for selected Zones. I have 36 Zones. So users may want to generate all Zones chart or for selected Zones chart from a List of Check Box. When selected Zones are 7/8 I can save all charts as s single file. When selected charts are more than 10 I can't save all charts together as a single file. 

 

 

 

 

Thanking You,

Maksuda...

[FusionCharts Support]

Hi,

 

 

 

Could you please let us know whether all the selected charts (more than 10) initiates export progress bar when the batch export is invoked?

 

 

 

If not, please check whether registerWithJS is on for each of the charts.

[maks]

Sudipto:

Thank you for the reply. When I select more than 10 charts, all the selected charts initiate export progress bar and 100% export is completed successfully(know from progress bar). Even after completion of export I can save individual file one by one if I want. But I can't save all charts together as a single file.  When I click the "Save all charts together" after few sec thumb disappears.......

Thanking You,

Maksuda