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:
Any help on this is much appreciated!
