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&IsArr=1&ArrColor=0099bb&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 slightly variations of this snippet with 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 ways and functionalities suit your page and purpose.).
Also make sure to save a copy of the external javascript file called AC_RunActiveContent.js in the same folder (relative links are valid too but than you need to change the line number 5 e.g. like this: <SCRIPT src="../scripts/AC_RunActiveContent.js" type="text/javascript"></SCRIPT>) if you chose this setup.
If you like to download this file or copy and paste it. Please click here. Anyway no changes will be required.
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 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 if the user turns off scripting only. Just in case you'd like to learn all about the security update than please click here and here and here for detailed information from AdobeTM (MacromediaTM).
Nothing is as easy as resizing the chart movie. The movie will calculate the chart to match the set width and height with 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 is set four times and the first two times it is set without the suffix '.swf' of the flash chart 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 '&' though. In the above example you'll find the path and name (both can be altered) of the flash chart movie plus four variables. The variable called 'dataURL' is very important. It's default value is 'Data.xml'.
It 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 the xml file. The name doesn't have to point to a xml file directly though. It could point to a script which is pulling 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 in 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 chart flash movie will add a time stamp variable automatically in case the ending differs from .xml to avoid the caching of the browser. 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! Also only in flash 9 these query string variables are case sensitive.
Just in case you are integrating the chart movie into a ssl (secret socked layer) environment than 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. It's default value is 'autohigh' and this is recommended and will do the job in almost all scenarios. If render more than one chart movie inside of one and the same html container page which is done by simple repeating the code inside the <body> tag than it might be interesting to set different values. E.g. 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. 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, do this only if other settings than 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 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.
|
preloader preview and preloader query string variables
 |
Preloader Text |
 |
|
query string attributes of the text rendered while booting used by both the bar and the arrow preloader. |
Name | Type | Description |
PBarTextFont=Verdana | string | Font of the displayed text while preloading the chart. |
PBarTextColor=6666ff | color | Font color of the displayed text while preloading the chart. |
PBarTextBold=1 | boolean | Set this attribute to rendering the preloader text in bold. |
PBarTextSize=18 | number | Sets the font size while preloading. |
PBarLoadingText=Loading... | string | Sets the text while loading the chart movie. |
XMLLoadingText=Loading Data... | string | Sets 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 |
Name | Type | Description |
PBarWidth=150 | number | Set the width of the percentage bar preloader in dots. |
PBarHeight=15 | number | Set the height of the percentage bar preloader in dots. |
PBarBorderColor=999999 | color | Set the color of the rectangular border frame and the outer bevel color of the progress percentage bar. |
PBarBgColor=bbbbbb | color | Set the inner color of the progress percentage bar's background bevel color. |
PBarBorderThickness=1 | number | Set the thickness of the border line in dots. |
 |
Preloader arrow |
 |
|
arrow's attributes of the query string |
Name | Type | Description |
IsArr=1 | boolean | Toggle between rendering the arrow (1) and the bar bar type preloader (0 by default). |
ArrFeather=20 | number | Arrow's feather effect, similar to a bevel effect |
ArrThickness=18 | number | Thickness of the arrow. Feather and thickness added should not be greater than 60 to match the size of the arrow's head. |
ArrWidth=500 | number | Sets the arrow's width (if width and height have the same value than the arrow is rendered in 2D). |
ArrHeight=180 | number | Sets the arrow's height. |
ArrColor=0099bb | color | Determines the color of the arrow. |
ArrSpace=50 | number | Space or distance to the displayed PBarText. Note, negative values are supported to render the PBarText in the center or beneath the arrow. |
ArrLength=270 | number | Sets 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 |
Name | Type | Description |
dataURL=Data.xml | string | Path and name to the data holding external xml file or to a script generating the 3D charts xml structure |
chartFrameRate=40 | number | 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 |
Char | Escape 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 |
|