newBieFusionCharts

Printing Charts On Client Side

Recommended Posts

Hello,

 

I am using Fusion charts v3.2. When I try to export the charts on client side, the first time it works fine. However, when I try to re-export the charts after some processing of data on the page or just hit the export button again, the progress bar appears on the charts and then after completing 100% it disappears without saving anything.

.

 

Its a critical need. Please see.

 

Thanks.

Share this post


Link to post
Share on other sites
Guest Angie

Hi,

 

Could you please send us the screenshot of the errors you are getting?

 

If possible, please send us the entire code to test it from our end.

 

Awaiting for your reply.

Share this post


Link to post
Share on other sites

Hi Angie,

 

Please find attached the screen shot and code sample facing the issue. The first time I save the charts, it will save the charts properly. However, If you try to click on the save charts again, it will not create the exporter object. After tracing the DOM, it says "chartObject-1" already exists, renaming to "chartObject-1". Please help at the earliest possible convenience.

 

For some reason I am unable to upload the jsp file in the attachment. So, please find the code below:

 

<script type="text/javascript" src=FusionCharts/FusionCharts.js"></script>

<script type="text/javascript" src=FusionCharts/FusionChartsDOM.js"></script>

<script language="JavaScript"

src="FusionCharts/FusionChartsExportComponent.js"></script>

 

 

<html>

<script>

<!--

function beginExport()

{

var exportUrl = "pages/FusionCharts/FCExporter.swf" ;

var myExportComponent = new FusionChartsExportObject("fcExporterBatch",

exportUrl);

document.getElementById("saveCharts").style.display = 'block';

document.getElementById("saveCharts").style.zIndex = 100;

// Get Ids of all the pages rendered on the page from server

var chartIds =["testChart"];

 

//Add the charts to queue. The charts are referred to by their DOM Id.

for(var i = 0;i < chartIds.length;i++)

{

if(chartIds != null || chartIds!="")

myExportComponent.sourceCharts = "testChart";

}

 

// Export Component Attributes

 

//Set the mode as full mode

myExportComponent.componentAttributes.fullMode ='1';

 

/* Set saving mode as both. 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';

 

/* Cosmetics */

//Width and height

myExportComponent.componentAttributes.width = '350';

myExportComponent.componentAttributes.height = '140';

 

//Message - caption of export component

myExportComponent.componentAttributes.showMessage = '1';

myExportComponent.componentAttributes.message = 'Save the charts';

 

//Render the exporter SWF in our DIV saveCharts

myExportComponent.Render("saveCharts");

myExportComponent.BeginExport();

};

/**

* Callback function after single chart is exported.

*

* @param objRtn id of the chart exported

*/

function FC_Exported(objRtn)

{

// If successful

if (objRtn.statusCode == "1"){

document.getElementById("saveCharts").style.display = 'none';

document.getElementById("saveCharts").style.zIndex = -1;

}

else{

alert("There was an error saving the chart. Error message: " +

objRtn.statusMessage + ". Its DOM Id is " + objRtn.DOMId);

}

}

 

/**

* This event is invoked when the user clicked on Save-All button

* and all the charts were saved on user's disk as a single file.

*

* @param objRtn id of the chart exported

*/

function FC_BatchExported(objRtn)

{

// If success

if (objRtn.statusCode == "1"){

document.getElementById("saveCharts").style.display = 'none';

document.getElementById("saveCharts").style.zIndex = -1;

}

else{

alert("There was an error saving the chart. Error message: " +

objRtn.statusMessage);

}

};

//-->

</script>

 

<body>

<div id = 'control'>

<input type='button' value = "Save Charts" onClick='beginExport();'></input>

</div>

<div id='test'></div>

<div id='saveCharts'></div>

<script LANGUAGE="JavaScript">

var xml = "<chart showBorder='0' caption='Summary' chartLeftMargin='-20' chartRightMargin='2' chartTopMargin='2' pieRadius='60' exportHandler='fcExporterBatch' bgColor='#eef0f2' chartBottomMargin='4' manageLabelOverflow='1' skipOverlapLabels='0' showPercentValues='0' showPercentInToolTip='0' radius3D='45' startingAngle ='0' exportEnabled='1' enableSmartLabels='1' slicingDistance ='10' exportAtClient='1' exportHandler='fcExporterBatch' showCanvasBorder='0'><set value='14247' label='Male'/><set value='1874' label='Female'/></chart>";

 

var chart1 = new FusionCharts("FusionCharts/Pie2D.swf", 'testChart', "320", "200", "0", "1");

chart1.setDataXML(xml);

chart1.render('test');

 

</script>

 

</body>

</html>

 

 

Thank you.

 

 

Hi,

 

Could you please send us the screenshot of the errors you are getting?

 

If possible, please send us the entire code to test it from our end.

 

Awaiting for your reply.

Share this post


Link to post
Share on other sites

Hi Angie,

 

Please find attached the screen shot and code sample facing the issue. The first time I save the charts, it will save the charts properly. However, If you try to click on the save charts again, it will not create the exporter object. After tracing the DOM, it says "chartObject-1" already exists, renaming to "chartObject-1". Please help at the earliest possible convenience.

 

For some reason I am unable to upload the jsp file in the attachment. So, please find the code below:

 

<script type="text/javascript" src=FusionCharts/FusionCharts.js"></script>

<script type="text/javascript" src=FusionCharts/FusionChartsDOM.js"></script>

<script language="JavaScript"

src="FusionCharts/FusionChartsExportComponent.js"></script>

 

 

<html>

<script>

<!--

function beginExport()

{

var exportUrl = "pages/FusionCharts/FCExporter.swf" ;

var myExportComponent = new FusionChartsExportObject("fcExporterBatch",

exportUrl);

document.getElementById("saveCharts").style.display = 'block';

document.getElementById("saveCharts").style.zIndex = 100;

// Get Ids of all the pages rendered on the page from server

var chartIds =["testChart"];

 

//Add the charts to queue. The charts are referred to by their DOM Id.

for(var i = 0;i < chartIds.length;i++)

{

if(chartIds != null || chartIds!="")

myExportComponent.sourceCharts = "testChart";

}

 

// Export Component Attributes

 

//Set the mode as full mode

myExportComponent.componentAttributes.fullMode ='1';

 

/* Set saving mode as both. 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';

 

/* Cosmetics */

//Width and height

myExportComponent.componentAttributes.width = '350';

myExportComponent.componentAttributes.height = '140';

 

//Message - caption of export component

myExportComponent.componentAttributes.showMessage = '1';

myExportComponent.componentAttributes.message = 'Save the charts';

 

//Render the exporter SWF in our DIV saveCharts

myExportComponent.Render("saveCharts");

myExportComponent.BeginExport();

};

/**

* Callback function after single chart is exported.

*

* @param objRtn id of the chart exported

*/

function FC_Exported(objRtn)

{

// If successful

if (objRtn.statusCode == "1"){

document.getElementById("saveCharts").style.display = 'none';

document.getElementById("saveCharts").style.zIndex = -1;

}

else{

alert("There was an error saving the chart. Error message: " +

objRtn.statusMessage + ". Its DOM Id is " + objRtn.DOMId);

}

}

 

/**

* This event is invoked when the user clicked on Save-All button

* and all the charts were saved on user's disk as a single file.

*

* @param objRtn id of the chart exported

*/

function FC_BatchExported(objRtn)

{

// If success

if (objRtn.statusCode == "1"){

document.getElementById("saveCharts").style.display = 'none';

document.getElementById("saveCharts").style.zIndex = -1;

}

else{

alert("There was an error saving the chart. Error message: " +

objRtn.statusMessage);

}

};

//-->

</script>

 

<body>

<div id = 'control'>

<input type='button' value = "Save Charts" onClick='beginExport();'></input>

</div>

<div id='test'></div>

<div id='saveCharts'></div>

<script LANGUAGE="JavaScript">

var xml = "<chart showBorder='0' caption='Summary' chartLeftMargin='-20' chartRightMargin='2' chartTopMargin='2' pieRadius='60' exportHandler='fcExporterBatch' bgColor='#eef0f2' chartBottomMargin='4' manageLabelOverflow='1' skipOverlapLabels='0' showPercentValues='0' showPercentInToolTip='0' radius3D='45' startingAngle ='0' exportEnabled='1' enableSmartLabels='1' slicingDistance ='10' exportAtClient='1' exportHandler='fcExporterBatch' showCanvasBorder='0'><set value='14247' label='Male'/><set value='1874' label='Female'/></chart>";

 

var chart1 = new FusionCharts("FusionCharts/Pie2D.swf", 'testChart', "320", "200", "0", "1");

chart1.setDataXML(xml);

chart1.render('test');

 

</script>

 

</body>

</html>

 

 

Thank you.

 

 

Hi,

 

Could you please send us the screenshot of the errors you are getting?

 

If possible, please send us the entire code to test it from our end.

 

Awaiting for your reply.

post-10147-002307700 1301497466_thumb.png

post-10147-098711600 1301497868_thumb.png

Share this post


Link to post
Share on other sites
Guest Angie

Hi,

 

Please find the modified code below:

 

<script type="text/javascript" src=FusionCharts/FusionCharts.js"></script>

<script type="text/javascript" src=FusionCharts/FusionChartsDOM.js"></script>

<script language="JavaScript"

src="FusionCharts/FusionChartsExportComponent.js"></script>

 

 

<html>

<script>

<!--

function beginExport()

{

var exportUrl = "pages/FusionCharts/FCExporter.swf" ;

var myExportComponent = new FusionChartsExportObject("fcExporterBatch",

exportUrl);

document.getElementById("saveCharts").style.display = 'block';

document.getElementById("saveCharts").style.zIndex = 100;

// Get Ids of all the pages rendered on the page from server

var chartIds =["testChart"];

 

//Add the charts to queue. The charts are referred to by their DOM Id.

for(var i = 0;i < chartIds.length;i++)

{

if(chartIds != null || chartIds!="")

myExportComponent.sourceCharts = "testChart";

}

 

// Export Component Attributes

 

//Set the mode as full mode

myExportComponent.componentAttributes.fullMode ='1';

 

/* Set saving mode as both. 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';

 

/* Cosmetics */

//Width and height

myExportComponent.componentAttributes.width = '350';

myExportComponent.componentAttributes.height = '140';

 

//Message - caption of export component

myExportComponent.componentAttributes.showMessage = '1';

myExportComponent.componentAttributes.message = 'Save the charts';

 

//Render the exporter SWF in our DIV saveCharts

if(FusionCharts && FusionCharts("fcExporterBatch") && FusionCharts("fcExporterBatch").dispose)

FusionCharts("fcExporterBatch").dispose();myExportComponent.Render("saveCharts");

myExportComponent.BeginExport();

};

/**

* Callback function after single chart is exported.

*

* @param objRtn id of the chart exported

*/

function FC_Exported(objRtn)

{

// If successful

if (objRtn.statusCode == "1"){

document.getElementById("saveCharts").style.display = 'none';

document.getElementById("saveCharts").style.zIndex = -1;

}

else{

alert("There was an error saving the chart. Error message: " +

objRtn.statusMessage + ". Its DOM Id is " + objRtn.DOMId);

}

}

 

/**

* This event is invoked when the user clicked on Save-All button

* and all the charts were saved on user's disk as a single file.

*

* @param objRtn id of the chart exported

*/

function FC_BatchExported(objRtn)

{

// If success

if (objRtn.statusCode == "1"){

document.getElementById("saveCharts").style.display = 'none';

document.getElementById("saveCharts").style.zIndex = -1;

}

else{

alert("There was an error saving the chart. Error message: " +

objRtn.statusMessage);

}

};

//-->

</script>

 

<body>

<div id = 'control'>

<input type='button' value = "Save Charts" onClick='beginExport();'></input>

</div>

<div id='test'></div>

<div id='saveCharts'></div>

<script LANGUAGE="JavaScript">

var xml = "<chart showBorder='0' caption='Summary' chartLeftMargin='-20' chartRightMargin='2' chartTopMargin='2' pieRadius='60' exportHandler='fcExporterBatch' bgColor='#eef0f2' chartBottomMargin='4' manageLabelOverflow='1' skipOverlapLabels='0' showPercentValues='0' showPercentInToolTip='0' radius3D='45' startingAngle ='0' exportEnabled='1' enableSmartLabels='1' slicingDistance ='10' exportAtClient='1' exportHandler='fcExporterBatch' showCanvasBorder='0'><set value='14247' label='Male'/><set value='1874' label='Female'/></chart>";

 

var chart1 = new FusionCharts("FusionCharts/Pie2D.swf", 'testChart', "320", "200", "0", "1");

chart1.setDataXML(xml);

chart1.render('test');

 

</script>

 

</body>

</html>

Hope This helps.smile.gif

Share this post


Link to post
Share on other sites

I got into another issue.

 

When I save fusion charts and then if I switch the window tab and then come back then the charts aren't there, all I get is blank page. The only way I could get charts back is to refresh the page or re-render the charts. Is there a way around.

 

 

Please help.

Share this post


Link to post
Share on other sites
Guest Angie

Hi,

 

Could you please send us a screenshot or any live link to look into the issue from our end?

 

Awaiting for your reply.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now