NO MORE CAREER
POLITICIANS!
Get Out Of Our House: Replacing congress with TRUE citizens!
Contact Doug!
Learn About Doug!
View Doug Boude's online resume
updated 11/18/2009

View Doug Boude's profile on LinkedIn
Link to me!

Follow Doug Boude on Twitter
Follow me!

Be Doug's friend on Facebook
Befriend me!
(I promise not to follow you home)
OO Lexicon
Chat with Doug!
Recent Entries
You may also be interested in...
Web Hosting

best web hosting - top web hosting sites, thetop10bestwebhosting.com

Czech your Page Rank!
Check Page Rank of any web site pages instantly:
This free page rank checking tool is powered by Page Rank Checker service
Surf's Up!
Visit Egosurf.org and massage YOUR web ego!
My Score: 9,001
Doug's Books

Read (and recommend)

  • Men are from Mars, Women are from Venus
  • The Wisdom of Crowds: Why the Many Are Smarter Than the Few and How Collective Wisdom Shapes Business, Economies, Societies and Nations
  • Blink: The Power of Thinking Without Thinking
  • Head First Design Patterns
  • Transact-SQL Programming
  • What's So Amazing About Grace?
  • Just So Stories (Rudyard Kipling collection)

Reading

  • Prayer: Does it Make Any Difference?
  • Data Mining (Practical Machine Learning Tools and Techniques)
<< September, 2008 >>
SMTWTFS
123456
78910111213
14151617181920
21222324252627
282930
Search Blog

Recent Comments
Re: Railo 3.1 on Windows Server 2008 and IIS7 - Part 3 of 3 (by Jon at 8/27 2:04 PM)
Re: Hosts File Changes Not Acknowledged on Vista 64 (by Spacy at 8/24 3:46 PM)
Re: THE DAY CFUNITED DIED (by ComboFusion at 8/23 10:50 AM)
Re: My Grandpa (by Tasha at 8/10 4:29 PM)
Re: Just What IS a 'Service Layer', Anyway? (by dougboude at 8/02 10:10 AM)
Re: Just What IS a 'Service Layer', Anyway? (by Isaac at 8/02 2:25 AM)
Re: PayPal IPN Coldfusion CFC (by Soyestudiambre at 7/25 6:12 PM)
Re: PHP vs COLDFUSION (by Tony Garcia at 7/17 11:24 AM)
Re: PHP vs COLDFUSION (by dougboude at 7/14 8:45 AM)
Re: PHP vs COLDFUSION (by Lola LB at 7/14 5:51 AM)
Categories
Archives
Photo Albums
Funnies (5)
Family (3)
RSS

Powered by
BlogCFM v1.11

08 September 2008
Converting FusionChart to Image - Disappearing Chart Labels

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.


Take a gander at this Javascript snippet:

<script type="text/javascript" language="javascript">
 <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'm using Coldfusion for my web pages (thus the seemingly foreign tag '<cfoutput>').

 

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">
 <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>

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.

 

Now my image looks like it should, with all labels intact. Aaaaah!

There you have it!

Doug out.




Posted by dougboude at 12:48 AM | PRINT THIS POST! |Link | 1 comment
Subscription Options

You are not logged in, so your subscription status for this entry is unknown. You can login or register here.

Re: Converting FusionChart to Image - Disappearing Chart Labels
I didn't get the image to target page how can.
Posted by Manjit Singh Chauhan on April 12, 2010 at 1:56 AM

Name:   Required
Email:   Required your email address will not be publicly displayed.

Want to receive notifications when new comments are added? Login/Register for an account.

Time to take the Turing Test!!!

17 plus 7 equals
Type in the answer to the question you see above:

Your comment:

Sorry, no HTML allowed!