3D charts html setup - page integration
html container
<HTML>
 <HEAD>
    <meta http-equiv=Content-Type content="text/html; charset=ISO-8859-1">
    <TITLE>My 3D chart page</TITLE>
    <SCRIPT src="AC_RunActiveContent.js" type="text/javascript"></SCRIPT>
 </HEAD>
 <BODY bgcolor="#FFFFFF">
  <script type="text/javascript">
   AC_FL_RunContent( 'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0', 'width', '600', 'height', '400', 'src', '../swf/combi_chart?dataURL=Data_combi.xml&IsArr=1&ArrColor=0099bb&PBarTextSize=18', 'pluginspage', 'http://www.macromedia.com/go/getflashplayer', 'bgcolor', '#000000', 'movie', '../swf/combi_chart?dataURL=Data_combi.xml&IsArr=1&ArrColor=0099bb&PBarTextSize=18' ); //end AC code
  </script>
  <noscript>
   <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="600" height="400">
    <param name="movie" value="../swf/combi_chart.swf?dataURL=Data_combi.xml&amp;IsArr=1&amp;ArrColor=0099bb&amp;PBarTextSize=18">
    <param name="BGCOLOR" value="#000000">
    <embed src="../swf/combi_chart.swf?dataURL=Data_combi.xml&IsArr=1&ArrColor=0099bb&PBarTextSize=18" width="600" height="400" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" bgcolor="#000000">
    </embed>
   </object>
  </noscript>
 </BODY>
</HTML>
Copy and paste the code above from the first html tag to the closing html tag (<HTML> ... </HTML>) into your favorite text or html editor and save it e.g. as myChart.html file. (Note: Inside the 3D charts' zip archive demo examples you will find variations of this snippet with a flash plug-in detection and without <noscript> part, also an all in one page without external AC_RunActiveContent.js can be found there. Please study with care before deciding which functionalities suit your page and purpose.)

Also make sure to save a copy of the external javascript file called AC_RunActiveContent.js into the same folder (relative links are valid too but you will need to change the line number 5 like this: <SCRIPT src="../scripts/AC_RunActiveContent.js" type="text/javascript"></SCRIPT>).
If you like to take a look at this file or copy and paste it: Please click here. No changes will be required there.

Note, to embed a flash movie into its html container page has become somewhat of an ordeal lately due to the Internet ExplorerTM 6, 7, 8 security update recently introduced by MicrosoftTM. No external AC_RunActiveContent.js file was needed before this security update. The code inside the <noscript> tag is used only if the user turns off scripting in the browser software. Just in case you'd like to learn all about the security update then please click here and here (obsolete) for detailed information from AdobeTM (MacromediaTM).

Nothing is as easy as resizing a 3D charts movie. The movie itself will calculate (AutoFit functionality) the 3D charts' width and height to match the width and height set by the attributes marked purple blue in the above code.

Set the background color while the movie is loading with the green marked attributes.


Query string:

Path to the flash movie plus initializing variables are marked in yellow. Note, while all other attributes are set three times this attribute if chosing this html setup is set four times and the first two times it is set without the suffix '.swf' of the flash 3D charts movie file name. Directly after the file name of the flash movie you can add variables for initialization. The first variable is separated from the file name by a '?' character, all further variables are appended in the ampersand '&' name=value format. In the <param ... > part this '&' is noted as extended special character like '&amp;' though.

In the above example you'll find the path and name (both can be altered) of the flash 3D charts movie plus four variables. The variable called 'dataURL' (default value is 'Data.xml') stores the name of the xml file containing the data for drawing the graph. Also here one can set a path in addition to a name pointing to that xml file. The name doesn't have to point to a xml file directly though. It could point to a script which pulls the data out of a database and generates this xml structure. Like: 'dataURL=dataScript.php' or with path and asp ending instead of php 'dataURL=../scripts/chart_data.asp'. The choice of the scripting language is yours. ASP.NET, ASP, Cold Fusion, JSP, PHP or Pearl ... whatsoever. Furthermore one could append variables to be passed to this XML generating script to e.g. identify a certain dataset like showYear=2008 and showMonth=6 by means of special html escape codes. You can find a table containing these special Escape characters at the bottom of this page. Anyway these passed variables are having the same ampersand '&' name=value format as used by flash and the '?' question mark character separates the first variable also. To avoid confusion use the html escape code instead of the '?' question mark character which is %3F and %26 stands for the '&' ampersand char. So the path + name + vars may look like this:

'../swf/combi_chart.swf?dataURL=Data_combi.php%3FshowYear=2008%26showMonth=6&IsArr=1&ArrColor=0099bb&PBarTextSize=18'

Note: The 3D charts flash movie will add a time stamp variable automatically in case the ending differs from .xml to avoid the caching of the browser.

Alternative:
This variable called 'dataURL' does not necessarily have to point to an external script or xml file. Instead of a path and name an alternative approach to provide the 3D charts movie with its xml data is supported. Simply inject the whole xml structure by passing it directly to this 'dataURL' variable like:

"dataURL=<chart by='www.advance-media.com' caption='Media Company' ... ... ... </chart>"

Because of the length of the xml structure if chosing this alternative way it is recommendet to to pass it via a special FlashVars object.
Inside the 'JavaScript embed' part this could look like this: 'FlashVars', "dataURL=<chart ... </chart>"
Inside the 'embed' called part: <'embed' FlashVars="&dataURL=<chart ... </chart>"
Inside the 'parameter' part: <PARAM NAME="FlashVars" value="&dataURL=<chart ... </chart>"

Do not get confused with mixing up double and single quotation marks standing for either the beginning and end of the 'dataURL' variable or standing for the beginning and end of the xml attribute's value. Do not supply a blank space before the whole xml structure starting with "<chart ..." and do not use line feeds or carriage returns inside the entire xml structure at least not in the JavaScript embed part of the html setup.
This method is useful e.g. for building dynamic applications, you could easily inject data to the 3D charts after calculations done with or received by JavaScript without server sided interaction. This method is quite fast because no URL is firstly send to the flash movie yet it is not as memory efficient because the whole xml structure is stored in the html page and not just read by flash. This method will limit the 3D charts' own refresh/reload option. Macromedia/Adobe does not recommended this way for very large files. (Note: Inside the 3D charts' zip archive you will find a demo example of this alternative approach.)

The remaining variables of the above example do set values to customize the preloader which is displayed while the flash movie and the xml data are loading. You got the option to set the loading text and you may choose between a progress boot bar or a rotating arrow. Please find a preview of the bar and the arrow and a comprehensive list describing all preloader related variables below. Flash 9-10 AS3 charts only: The AS3 Flash 9 and Flash 10 charts got an additional option here: chartFrameRate=40. One can set the framerate per second of the flash movie. This attribute will affect the performance as well as the CPU resources greatly. For not animated charts you ought to consider a low framerate! In flash 9 10 these query string variables are case sensitive.

If you are integrating the chart movie into a ssl (secret socked layer) environment then you should replace all three dark-gray colored 'http' protocol links in the beginning with 'https'.


Also I'd like to draw your attention to two further attributes or tags which are not listed in the above code.

Firstly the 'quality' attribute. It might be useful to set the amount of cpu resource allocated to the flash movie. Its default value is 'autohigh' and this is recommended and will do the job in almost all scenarios. If rendering more than one chart movie on one and the same html page which is done by simple repeating the code inside the <body> tag then it might be interesting to set different values here. Especially if rendering one animated chart movie and all other chart movies as still standing. Test setting 'high' for the animated one and 'autohigh' for all still standing movies. Further valid values are 'best', 'autolow' and 'low'. To set this attribute add 'quality','autohigh', ... in the line calling the AC_FL_RunContent function and add the tag <param name="quality" value="autohigh"> inside the object tag next to the other param attributes and in the embed tag add quality="autohigh". Remember to do this only if other settings besides the default value are desired.

Secondly the 'wmode' attribute. This is the window mode of the flash movie. This attribute might be very interesting for page integration if rendering the chart movie on a html page with background image tile. Usually the background of a flash movie is solid colored having the color set by the bgcolor attribute in the code above. Yet the window mode can be set to 'wmode','transparent', ... to render no background of the flash movie. The html background tile will be visible behind the chart instead. You should set the attribute bgAlpha='0' of the external xml file to be loaded by the chart movie itself to switch off all bg (background) rendering to obtain this fancy effect. Also the chart movie is capable of rendering a gradient multi colored background and you can set individual alpha transparency values for each color of the drawn background. The html tile will be visible according to the alpha transparency value of each color. Also add the <param name="wmode" value="transparent"> tag inside the object tag next to the other param attributes and in the embed tag add wmode="transparent", go.

Flash 9-10 AS3 charts only: Since the introduction of the Flash Player 10 all AS3 movies can be rendered by the CPU or by the graphic card instead of the browser software. Set wmode to 'direct' or 'gpu' respectively to achieve this. Adobe recommends this setting for one movie per page only. The results do vary and might show negative effects for the performance! But this might be useful if you do know the specifications of your target machine. E.g. you got a presentation on a computer equiped with a hightech graphic card.



3D charts preloader and preloader query string variables


bar




arrow


Tip: One can hide the entire preloader or certain parts of it by using background matching colors.



Preloader Text
query string attributes of the text rendered while booting used by both the bar and the arrow preloader.
NameTypeDescription
PBarTextFont=VerdanastringFont of the displayed text while preloading the chart.
PBarTextColor=6666ffcolorFont color of the displayed text while preloading the chart.
PBarTextBold=1booleanSet this attribute to rendering the preloader text in bold.
PBarTextSize=18numberSets the font size while preloading.
PBarLoadingText=Loading...stringSets the text while loading the chart movie.
XMLLoadingText=Loading Data...stringSets the text while loading the xml Data just in case the movie is completely loaded but the xml data was not retrieved yet.




Preloader Bar
bar preloader's attributes of the query string
NameTypeDescription
PBarWidth=150numberSet the width of the percentage bar preloader in dots.
PBarHeight=15numberSet the height of the percentage bar preloader in dots.
PBarBorderColor=999999colorSet the color of the rectangular border frame and the outer bevel color of the progress percentage bar.
PBarBgColor=bbbbbbcolorSet the inner color of the progress percentage bar's background bevel color.
PBarBorderThickness=1numberSet the thickness of the border line in dots.




Preloader arrow
arrow's attributes of the query string
NameTypeDescription
IsArr=1booleanToggle between rendering the arrow (1) and the bar bar type preloader (0 by default).
ArrFeather=20numberArrow's feather effect, similar to a bevel effect
ArrThickness=18numberThickness of the arrow. Feather and thickness added should not be greater than 60 to match the size of the arrow's head.
ArrWidth=500numberSets the arrow's width (the arrow is rendered in 2D if width and height are set to the same value).
ArrHeight=180numberSets the arrow's height.
ArrColor=0099bbcolorDetermines the color of the arrow.
ArrSpace=50numberSpace or distance to the displayed PBarText. Note, negative values are supported to render the PBarText in the center or beneath the arrow.
ArrLength=270numberSets the arrow's length in degree. 360 will render a full circle.



further 3D charts query string variables


setup variables
XML path and movie's framerate
NameTypeDescription
dataURL=Data.xmlstringPath and name to the data holding external xml file or to a script generating the 3D charts xml structure.

Alternative: Simply inject the whole xml structure here by passing the entire xml data structure directly to this variable. (Using the 'FlashVars' object instead of or in addition to the query string is recommended though.)
chartFrameRate=40number Flash 9-10 AS3 charts only: frame rate per second of the flash movie



Escape special characters
for appending additional variables to the 'dataURL=' path + name
CharEscape Code
SPACE%20
<%3C
>%3E
#%23
%%25
{%7B
}%7D
|%7C
\%5C
^%5E
~%7E
[%5B
]%5D
{%7B
`%60
;%3B
/%2F
?%3F
:%3A
@%40
=%3D
&%26
$%24