Fusioncharts, as of version 3, exposed via Javascript a method called saveAsImage(), which is what one uses when one wishes to convert the native Flash object to a JPG. I recently finished up a project where I had to do that very thing, and ran in to one little (or not so little) hiccup that perplexed me for quite some time. Following are the scenario, symptoms, and the solution I found.
After the user clicks your "print" button on the display page, a new window is spawned in which we recreate and render our charts one at a time (The way I'm converting all of the charts into one printable page is a little convoluted, but you can read the dirty details of THAT in this post). After an individual chart is rendered, we use Javascript to call that chart's "saveAsimage()" method. This method transforms the Flash object into jpg binary data and metadata, and submits the results to a backend for transformation into an actual jpg. What we want to focus on in this post, however, is the Javascript that renders the chart and calls the saveAsImage() method, because it is within this small section of code execution, oh Best Beloved, where the symptoms are created and later manifested after JPG creation.
The symptoms:
Pie charts which are transformed to images are missing some of their labels! 
Though I can see all of the labels just fine when the Flash object is rendered, the final image is missing one or more of those labels! Not cool.
I'm using Coldfusion for my web pages (thus the seemingly foreign tag '<cfoutput>').
Take a gander at this Javascript snippet:
<cfoutput>
//here's our chart xml in json form...
var jschart = #serializejson(chartxml)#;
function makechart(chartid){
var myChart = new FusionCharts("/FusionCharts/" + jschart[chartid]['SWF'], "drilldownchart", "420", "420", "0", "1");
myChart.setDataXML(jschart[chartid]['CHARTXML']);
myChart.render("printchart");
}
function FC_Rendered(DOMId){
$('drilldownchart').saveAsImage();
}
</cfoutput>
</script>
I arrive at my page with the chartxml and other needed parameters nested in the equivalent of a hash object;
I transform it using Coldfusion to a JSON format that Javascript natively can read;
on page load, I then create a new FusionCharts object named 'drilldownchart' and render it within a pre-existing div named 'printchart'.
The function "FC_Rendered" is a FusionCharts method that exists to allow one to execute code AFTER a chart has completely rendered. In my case, once the chart exists I want to immediately start the process of converting it to an image via the saveAsImage() method. Oh, and I'm using the Prototype framework as well, thus the utility function "$('drilldownchart')". It's the equivalent of saying "document.getElementById('drilldownchart')" for those who aren't familiar with Prototype.
So, the code executes flawlessly and I'm happy with it. Until I see the final result.
Where is my label???
I first thought that perhaps it was a font issue, converting from Flash to JPG, so I experimented by changing the label style to different sizes and font faces; no dice. I then asked myself the question, "what if the conversion is happening just before that label actually gets rendered?". Theoretically, this should NOT be possible since I'm using FusionCharts' built in FC_Rendered event method. But just to be safe, let me modify my Javascript as follows in order to add a slight delay....
<script type="text/javascript" language="javascript"> By adding a setTimeout call in between the render completion and the saveAsImage() call, my final result came out exactly like it should have. You'll note that I even set the timeout delay to ZERO MILLISECONDS, so just the meager amount of time it took to even call the setTimeout method was enough time to allow the capture of all the metadata from the Flash chart.
<cfoutput>
//here's our chart xml in json form...
var jschart = #serializejson(chartxml)#;
function makechart(chartid){
var myChart = new FusionCharts("/FusionCharts/" + jschart[chartid]['SWF'], "drilldownchart", "420", "420", "0", "1");
myChart.setDataXML(jschart[chartid]['CHARTXML']);
myChart.render("printchart");
}
function FC_Rendered(DOMId){
setTimeout("saveimage()",0);
}
function saveimage(){
$('drilldownchart').saveAsImage();
}
</cfoutput>
</script>
Now my image looks like it should, with all labels intact. Aaaaah!
There you have it!
Doug out.
You are not logged in, so your subscription status for this entry is unknown. You can login or register here.
No comments found.