Ronald Treur

SaveImage not working?

Recommended Posts

I recently downloaded the Evaluation version of FusionCharts and I like what I see. Our primary objective is to have these charts in both Flash and embedded in a PDF-document. The latter requires us to save the Flash as an image, so I figured I should experiment with that option first. However, I never got even the simplest of examples to work.

 

 

 

Further below is a very, very basic document which I've created in the Gallery-folder, where it sits along with the rest of the example charts. Now there are two problems with this code:

 

 

 

Problems:

 

1) The FC_Rendered is never called. No variable is set, no alert is shown.

 

2) The chartToPrint.saveAsImage() yields the following error in FF2: chartToPrint.saveAsImage is not a function

 

 

 

Important info:

 

I'm using Mac OS X 10.5.6, and tried FireFox 2, FireFox 3 and Safari 3. Also, I can right-click and save the image just fine.

 

In FF2, I used Firebug to check the 'chartToPrint' object (which was successfully loaded), and indeed, there existed no saveAsImage-method within.

 

 

 

My guess?

 

The RegisterWithJS is not properly toggled on. I've read a few posts where people mentioned the SaveAsImage wasn't working until they toggled this. And also the FC_Rendered is never called, which supports this idea. I hope I'm doing something wrong here, but to me it seems I toggled it like I was supposed to.

 

 

 

The HTML Code:

 


<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>FusionCharts v3 Test</title>

<link rel="stylesheet" href="../Contents/Style.css" type="text/css" />

<script language="JavaScript" src="../JSClass/FusionCharts.js"></script>

<script language="JavaScript">

var rendered;

function FC_Rendered(DOMId) {

	window.alert("DOMId: " + DOMId);

	if (DOMId=="ChartId") {

		rendered = true;

		saveChart();

		return;

	}

}



function saveChart(){

	var chartToPrint = getChartFromId("ChartId");

	chartToPrint.saveAsImage();

	window.alert("Success!");

	return;

}

</script>

</head>

<body>

<table width="98%" border="0" cellspacing="0" cellpadding="3" align="center">

<tr> 

<td valign="top" class="text" align="center">

	<div id="chartdiv" align="center">FusionCharts.</div>

	<script type="text/javascript">

		var chart = new FusionCharts("../Charts/Column3D.swf", "ChartId", "600", "300", "1", "1");

		chart.setDataURL("Data/Column3D.xml");		   

		chart.render("chartdiv");

	</script>

</td>

</tr>

<tr>

<td valign="top" class="text" align="center"></td>

</tr>

<tr> 

<td valign="top" class="text" align="center"><a href="Data/Col3DLine.xml" target="_blank"><img src="../Contents/Images/BtnViewXML.gif" alt="View XML for the above chart" width="75" height="25" border="0" /></a></td>

</tr>

<tr> 

<td valign="top" class="text" align="center"><input type='button' value='Save Chart as Image' onClick='javascript:saveChart();'></td>

</td>

</tr>

</table>

</body>

</html>

 

 

 

And finally the debug-message, gotten by toggling the remaining "0" to "1", in:

 

var chart = new FusionCharts("../Charts/Column3D.swf", "ChartId", "600", "300", "0", "1");

 

 

 

The Debug Info:

 

 

Info: Chart loaded and initialized.

 

Initial Width: 600

 

Initial Height: 300

 

Scale Mode: noScale

 

Debug Mode: Yes

 

Application Message Language: EN

 

Version: 3.0.7

 

Chart Type: Single Series 3D Column Chart

 

Chart Objects:

 

BACKGROUND

 

CANVAS

 

CAPTION

 

SUBCAPTION

 

YAXISNAME

 

XAXISNAME

 

DIVLINES

 

YAXISVALUES

 

DATALABELS

 

DATAVALUES

 

TRENDLINES

 

TRENDVALUES

 

DATAPLOT

 

TOOLTIP

 

VLINES

 

 

 

INFO: Chart registered with external script. DOM Id of chart is ChartId

 

INFO: XML Data provided using dataURL method.

 

dataURL provided: Data/Column3D.xml

 

dataURL invoked: Data/Column3D.xml

 

XML Data:

 

 

 

 

Any help on this is much appreciated!

Edited by Guest

Share this post


Link to post
Share on other sites

So, In the meantime I downloaded Flash Player 10 (I think I only had the latest Shockwave installed), but this didn't change anything.

 

 

 

I also noted that I forgot to show the data file. I of course changed that to allow saving images:

 

 

 


<chart imageSave='1' imageSaveURL='test/test.php' caption='Monthly Unit Sales' xAxisName='Month' yAxisName='Units' showValues='0' decimals='0' formatNumberScale='0'>

<set label='Jan' value='462' />

<set label='Feb' value='857' />

<set label='Mar' value='671' />

<set label='Apr' value='494' />

<set label='May' value='761' />

<set label='Jun' value='960' />

<set label='Jul' value='629' />

<set label='Aug' value='622' />

<set label='Sep' value='376' />

<set label='Oct' value='494' />

<set label='Nov' value='761' />

<set label='Dec' value='960' />

</chart>

 

 

 

I also managed to check this on the latest IE 7, with both the latest Shockwave & Flash player, on my Windows (Parallels) system. It gave the exact same result :D

Share this post


Link to post
Share on other sites

Something I noticed yesterday. This is part of a message that is shown when downloading the FusionCharts:

 

The only difference is that in the trial version charts, "FusionCharts" and "InfoSoft Global" imprints would be present on the charts.

 

 

 

I noticed that even though I downloaded the trial version, I have no visual tags in the charts I generate.

 

So, this was either disabled, forgotten by whoever put the download online, or I somehow downloaded a wrong version.

 

 

 

*shrugs* Not sure how this is with the rest of you. I still have no success saving a chart with javascript. If someone could copy/save the code above and let me know if it works for him/her, that would be wonderful!

 

 

 

I hope someone has a suggestion at some point :D

 

 

 

edit: *coughs* My bad.. The message is present at the top of the charts.. I actually managed to overlook that for the last couple of days..:Whistling:

Edited by Guest

Share this post


Link to post
Share on other sites

I figured it out!

 

 

 

It took me a good while, and reading the version 3.1 docs (which I reckon is the latest version, but 3.0.7 is still used as trial?), to figure out that I have to work on a server. I would however be very interested to learn how to disable this security-measure in Flash.

 

 

 

So, the trick is not to navigate to the page containing the chart locally (file://), but remote (http://<you're webserver's ip or domain>/). Everything now finally works!

 

 

 

Source: 3.1 documentation

 

Important:

 

The JavaScript method will only work when the chart has been fully rendered in the client browser. You can use the FC_Rendered method to track the same.

 

 

 

Due Adobe Flash Player's default security system, the JavaScript method does not work from local filesystem. It only works when hosted on a server (localhost or remote) unless configured otherwise.

Edited by Guest

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