FusionCharts GoogleGadget Documentation

A Work-around

Many blogs hosts do not allow <script> blocks to be posted as blog content - but allow <IFRAMES>. This section applies to you if you're hosted on such a blog provider.

If your blog doesn't support either (IFRAME or SCRIPT), you can still use FusionCharts Google Gadget, as explained in the section "Showing External Link".

This work-around is achieved by tweaking a part of Google Gadget code. Though it is undocumented by Google, it's currently working well and fine.

To use the work-around, you'll need to modify the chart's code (that is auto generated by FusionCharts Google Gadget). Shown below is an example.

This is the code that is auto-generated by the Syndication Page. We've arranged it in blocks for better interpretation.

<script src="http://gmodules.com/ig/ifr?url=http://fusioncharts.googlecode.com/svn/trunk/fusioncharts.xml

               &amp;up_ct=Column3D&amp;up_c=Weekly%20Sales&amp;up_sc=Current%20Month&amp;up_xt=Week&amp;

up_yt=Sales&amp;up_sn=%20&amp;up_l=Week%201%3BWeek%202%3BWeek%203%3BWeek%204&amp;

         up_v=40800%3B31400%3B26700%3B55400&amp;up_t=&amp;up_bA=1&amp;up_bSLb=1&amp;up_bSV=0&amp;

         up_bSLm=1&amp;up_bSLg=1&amp;up_bRL=0&amp;up_bFN=1&amp;up_bFS=1&amp;up_bTT=1&amp;up_np=%24&amp;

         up_ns=&amp;up_d=0&amp;up_cbg=FFFFFF&amp;up_ccbg=DCDCDC&amp;up_ccbr=808080&amp;

         up_f=Arial&amp;up_fs=9&amp;up_fc=2F4F4F&amp;up_fOC=Verdana&amp;up_fOCs=9&amp;

         up_fOCc=191970&amp;up_dl=3&amp;up_dlc=808080&amp;up_bSA=1&amp;up_as=10&amp;

         up_ar=3&amp;up_lt=1&amp;up_bP=1&amp;up_bPL=0&amp;up_yMax=&amp;up_yMin=&amp;

         up_debug=0&amp;synd=open&amp;w=320&amp;h=280&amp;

         title=&amp;nocache=NaN&amp;

         border=%23ffffff%7C3px%2C1px+solid+%23999999&amp;output=js">

      </script>

The portions in bold are what you'll need to change, as under:

Replace <script with <iframe.
Change the last part of the code containing output=js to output=html
Replace the final </script> with </iframe>.
Recollect the width and height of the gadget (specified in the Syndication Page, e.g. 320 and 280 in our example) and add width="320" height="280" after the output=html" and before the ></iframe>.

The final code should look as under:

<iframe src="http://gmodules.com/ig/ifr?url=http://fusioncharts.googlecode.com/svn/trunk/fusioncharts.xml

         &amp;up_ct=Column3D&amp;up_c=Weekly%20Sales&amp;up_sc=Current%20Month&amp;up_xt=Week&amp;

up_yt=Sales&amp;up_sn=%20&amp;up_l=Week%201%3BWeek%202%3BWeek%203%3BWeek%204&amp;

         up_v=40800%3B31400%3B26700%3B55400&amp;up_t=&amp;up_bA=1&amp;up_bSLb=1&amp;up_bSV=0&amp;

         up_bSLm=1&amp;up_bSLg=1&amp;up_bRL=0&amp;up_bFN=1&amp;up_bFS=1&amp;up_bTT=1&amp;up_np=%24&amp;

         up_ns=&amp;up_d=0&amp;up_cbg=FFFFFF&amp;up_ccbg=DCDCDC&amp;up_ccbr=808080&amp;

         up_f=Arial&amp;up_fs=9&amp;up_fc=2F4F4F&amp;up_fOC=Verdana&amp;up_fOCs=9&amp;

         up_fOCc=191970&amp;up_dl=3&amp;up_dlc=808080&amp;up_bSA=1&amp;up_as=10&amp;

         up_ar=3&amp;up_lt=1&amp;up_bP=1&amp;up_bPL=0&amp;up_yMax=&amp;up_yMin=&amp;

         up_debug=0&amp;synd=open&amp;w=320&amp;h=280&amp;

         title=&amp;nocache=NaN&amp;

         border=%23ffffff%7C3px%2C1px+solid+%23999999&amp;output=html" width="320" height="280">

 </iframe>

(Please do not copy the above code from this documentation. It contains various formatting and the chart will not show if you use this.)

Copy and paste the edited code to your blog post. The chart will now show up as under:

If you need, you can set additional attributes for IFRAME (similar to width and height). Some of the attributes have been discussed below:

Name	Description	Example
width	Sets IFRAME width.	width="400"
height	Set IFRAME height.	height ="200"
frameborder	Set this to 0 to hide primary border of the IFRAME . Set 1 to show.	frameborder= "1" frameborder= "0"
scrolling	Set scrolling to "no" to hide scroll bar of the IFRAME. To show set to "yes"	scrolling= "yes" scrolling= "no"
style	Use this to set various cosmetics like secondary border, position etc. of the IFRAME. Here we will discuss different border effects. style= "border: width style color;" ' border' option sets the border of the iframe. Lets see its options. width : You can use thin, thick, medium as width You can also use pixel values like 1px, 5px. style : You can use solid, double, dotted, inset, groove as border style. color : You can use any color name from the ones shown in GUI.	style="border:thin solid black;" style="border:1px solid Red;" style="border:double Green;" style="border:1px dotted gray ;" style="border:1px dashed #dddddd;"