|
Server : Apache/2.2.17 (Unix) mod_ssl/2.2.17 OpenSSL/0.9.8e-fips-rhel5 DAV/2 PHP/5.2.17 System : Linux localhost 2.6.18-419.el5 #1 SMP Fri Feb 24 22:47:42 UTC 2017 x86_64 User : nobody ( 99) PHP Version : 5.2.17 Disable Function : NONE Directory : /home/queenjbs/www/FusionChart/Contents/FirstChart/ |
Upload File : |
<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Embedding Charts Using <OBJECT-/<EMBED- Tags</title>
<link rel="stylesheet" href="../assets/ui/css/style.css" type="text/css" />
<script type="text/javascript" src="../assets/prettify/prettify.js"></script>
<link rel="stylesheet" type="text/css" href="../assets/prettify/prettify.css" />
<script type="text/javascript" src="../assets/ui/js/jquery.min.js" ></script>
<style type="text/css">
<!--
div.WebHelpPopupMenu { position:absolute;
left:0px;
top:0px;
z-index:4;
visibility:hidden; }
a.whtbtnhide, a.whtbtnshow, a.whtbtnhidenav , a.whtbtnshownav { border-bottom:none !important; }
-->
</style>
<script type="text/javascript" language="javascript1.2" src="../assets/ui/js/whmsg.js"></script>
<script type="text/javascript" language="javascript" src="../assets/ui/js/whver.js"></script>
<script type="text/javascript" language="javascript1.2" src="../assets/ui/js/whproxy.js"></script>
<script type="text/javascript" language="javascript1.2" src="../assets/ui/js/whutils.js"></script>
<script type="text/javascript" language="javascript1.2" src="../assets/ui/js/whlang.js"></script>
<script type="text/javascript" language="javascript1.2" src="../assets/ui/js/whtopic.js"></script>
<script type="text/javascript" src="../assets/ui/js/lib.js"></script>
</head>
<body>
<!-- breadcrumb starts here -->
<div id="breadcrumb"></div>
<script type="text/javascript">
document.write( addFCBreadcrumb( [ "Home|../Introduction/Overview.html", "Creating your first chart|FirstChart.html", "Using HTML embedding method" ] ) );
</script>
<!-- breadcrumb ends here -->
<table width="98%" border="0" cellspacing="0" cellpadding="3" align="center">
<tr>
<td class="pageHeader">Embedding Charts Using <OBJECT>/<EMBED> Tags</td>
</tr>
<tr>
<td valign="top" class="text">
<p>FusionCharts XT can also be embedded in web pages using plain HTML and without using FusionCharts JavaScript class. </p>
<p>For this, you need to use the <span class="codeInline"><OBJECT></span>/<span class="codeInline"><EMBED></span> HTML tags. This method can be implemented in applications that do not support JavaScript and in cases where you fetch the entire chart embedding code using an AJAX request (example, <span class="codeInline">ASP.NET UpdatePanel</span>) and the AJAX response should contain <span class="codeInline"><OBJECT></span>/<span class="codeInline"><EMBED></span> tags.</p>
<p class="highlightBlock">We always recommended that you use the FusionCharts JavaScript class method for embedding the charts in an HTML page. That is the only way to get JavaScript (HTML5) fallback for the charts. When embedding using <span class="codeInline"><OBJECT></span>/<span class="codeInline"><EMBED></span> method, only Flash charts will show up. Additionally, features such as JSON data support, managed printing in Mozilla based browsers and enhanced browser-specific error handling will not function as well, as they are dependent on the FusionCharts JavaScript class. </p>
</td>
</tr>
<tr>
<td class="header"><a name="dataurl" id="dataurl"></a>HTML embedding with XML data provided as URL </td>
</tr>
<tr>
<td class="text">
<p>We modify our first sample <span class="codeInline">weekly-sales.html </span>and rename it as <span class="codeInline" style="codeInline">weekly-sales-html-embed-xml-url.html</span>, and copy the following code into it: </p> </td>
</tr>
<tr>
<td valign="top" class="text">
<pre class="code_container prettyprint lang-html"><html>
<head>
<title>My First chart using FusionCharts XT -
Using HTML embedding method - XML from URL</title>
</head>
<body>
<strong><object width="400" height="300" id="Column3D"
classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com
/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" >
<param name="movie" value="FusionCharts/Column3D.swf" />
<param name="FlashVars" value="&dataURL=Data.xml
&chartWidth=400&chartHeight=300
&DOMId=myChartId&registerWithJS=1&debugMode=0">
<param name="quality" value="high" />
<embed src="FusionCharts/Column3D.swf" flashVars="&dataURL=Data.xml
&chartWidth=400&chartHeight=300
&DOMId=myChartId&registerWithJS=1&debugMode=0"
width="400" height="300" name="Column3D"
quality="high"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object></strong>
</body>
</html></pre>
<br />
See it <a href="../../Code/MyFirstChart/weekly-sales-html-embed-xml-url.html" target="_blank">live</a>! </td>
</tr>
<tr>
<td valign = "top" class="text"><p>The code in bold is responsible for embedding FusionCharts XT into the HTML page.</p>
<p>In the above code, we have done the following: </p>
<ul>
<li>Used <span class="codeInline"><OBJECT></span> and <span class="codeInline"><EMBED></span> tags to embed the 3D Column Chart (<span class="codeInline">Column3D.swf</span>) within the HTML page. We set the tags' ID and name, set the width (400 pixels) and height (300 pixels).</li>
<li>Loaded the chart SWF file using the <span class="codeInline">movie</span> attribute of <span class="codeInline"><OBJECT></span> tag and the <span class="codeInline">src</span> attribute of <span class="codeInline"><EMBED></span> tag.</li>
<li>Passed chart external data to <span class="codeInline">FlashVars</span> parameter/attribute using <span class="codeInline"><strong>&dataUrl=Data.xml</strong></span>. Here, we indicate the path of the data source (XML file) relative to the HTML page – <span class="codeInline">Data.xml</span> in this case.</li>
<li>Passed chart width and chart height to chart by means of <span class="codeInline">chartWidth</span> and <span class="codeInline">chartHeight</span> variables through <span class="codeInline">FlashVars</span>.</li>
<li>Provided other required FlashVars like <span class="codeInline">DOMId</span> which is the DOM id of the chart and FlashVars like <span class="codeInline">debugMode</span>, <span class="codeInline">registerWithJS</span>. </li>
</ul>
<p class="highlightBlock">To render a Flash movie in a browser, the HTML page must contain certain tags for initiating the Flash movie. The <span class="codeInline"><OBJECT></span> and <span class="codeInline"><EMBED></span> tags are used for this purpose. The <span class="codeInline"><OBJECT></span> tag is recognized by Internet Explorer under Microsoft Windows and the <span class="codeInline"><EMBED></span> tag is recognized by other browsers. <br />
<br />
Even though both the <span class="codeInline"><OBJECT></span> and <span class="codeInline"><EMBED></span> tags have similar functionality, it is essential to use both the tags for the sake of cross-browser compatibility. For optimum compatibility, the <span class="codeInline"><EMBED></span> tag must be nested within the <span class="codeInline"><OBJECT></span> tag (as shown in the code above). This way, Active X-enabled browsers like Internet Explorer can ignore the <span class="codeInline"><EMBED></span> tag (as it is inside the <span class="codeInline"><OBJECT></span> tag), and other browsers that do not recognize the <span class="codeInline"><OBJECT></span> tag can carry on with the <span class="codeInline"><EMBED></span> tag. </p>
</td>
</tr>
<tr>
<td class="header"><a name="datastring" id="datastring"></a>HTML embedding using XML data embedded in HTML page </td>
</tr>
<tr>
<td class="text"><p>You can also embed the XML in the <span class="codeInline"><OBJECT></span>/<span class="codeInline"><EMBED></span> tag itself without depending on the external source.</p> </td>
</tr>
<tr>
<td class="text">
We modify our first sample <span class="codeInline" style="codeInline">weekly-sales-html-embed-xml-url.html</span> and rename it as <span class="codeInline" style="codeInline">weekly-sales-html-embed-xml-embed.html</span>.<br /><br />
<pre class="code_container prettyprint lang-html"><html>
<head>
<title>My First chart using FusionCharts XT -
Using HTML embedding method - XML from URL</title>
</head>
<body>
<object width="400" height="300" id="Column3D"
classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/pub/
shockwave/cabs/flash/swflash.cab#version=8,0,0,0" >
<param name="movie" value="FusionCharts/Column3D.swf" />
<param name="FlashVars" value="&chartWidth=400&chartHeight=300
&DOMId=myChartId&registerWithJS=1&debugMode=0
<strong>&dataXML=<chart caption='Weekly Sales Summary'
xAxisName='Week' yAxisName='Sales' numberPrefix='$'>
<set label='Week 1' value='14400' />
<set label='Week 2' value='19600' />
<set label='Week 3' value='24000' />
<set label='Week 4' value='15700' />
</chart></strong>"
<param name="quality" value="high" />
<embed src="FusionCharts/Column3D.swf"
flashVars="&chartWidth=400&chartHeight=300
&DOMId=myChartId&registerWithJS=1&debugMode=0
<strong>&dataXML=<chart caption='Weekly Sales Summary'
xAxisName='Week' yAxisName='Sales' numberPrefix='$'>
<set label='Week 1' value='14400' />
<set label='Week 2' value='19600' />
<set label='Week 3' value='24000' />
<set label='Week 4' value='15700' />
</chart></strong>"
width="400" height="300" name="Column3D"
quality="high"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</body>
</html></pre>
<br />
See it <a href="../../Code/MyFirstChart/weekly-sales-html-embed-xml-embed.html" target="_blank">live</a>!</td>
</tr>
<tr>
<td valign="top" class="text"><p>As you can note from the bold text in the code above, we have only replaced <span class="codeInline">&dataURL </span>FlashVars variable with <span class="codeInline">&dataXML</span> and to this variable we have passed the chart XML data. The resultant chart will be the same.</p>
<p class="highlightBlock">Depending on your coding practice, you will be enclosing the entire XML string either using single or double quotation marks (",""). So, if you are enclosing the entire XML in double quotes, then the XML attributes must be encapsulated in single quotes. Using, single quotes for encapsulation of the entire XML string and also for individual attributes, will lead to a conflict. Conflict arising due to improper use of quotes does not raise an error, but shows an empty space in place of chart (or sometimes a JavaScript error).</p>
</td>
</tr>
<tr>
<td valign="top" class="header"><a name="flashvars" id="flashvars"></a>FusionCharts XT FlashVars details </td>
</tr>
<tr>
<td valign="top" class="text">
<p>When using HTML embedding, all variables to the chart are passed using <span class="codeInline">FlashVars</span>. The table below lists all such variables supported: </p>
<table width="95%" border="0" align="left" cellpadding="00" cellspacing="0" class="table">
<tr>
<td width="19%" valign="top" class="header">Variable</td>
<td width="81%" valign="top" class="header">Description</td>
</tr>
<tr>
<td valign="top" class="codeInline">dataURL</td>
<td valign="top" class="text">
<p>This variable takes the path of the XML data file/stream as value. This method is called the <strong><a href="../guide-for-web-developers/how-fusioncharts-works/DataURL.html">Data URL method</a></strong>. It is mutually exclusive to <span class="codeInline">dataXML </span>variable.</p>
<p>* In case both <span class="codeInline">&dataURL</span> and <span class="codeInline">&dataXML </span>are set to blank or not provided, the chart will search for default <span class="codeInline">Data.xml</span> file in the same path as the HTML file.</p>
</td>
</tr>
<tr class="trVeryLightGrayBg">
<td valign="top" class="codeInline">dataXML</td>
<td valign="top" class="text">
<p>This variable passes the XML embedded in <span class="codeInline"><OBEJCT></span> or <span class="codeInline"><EMBED></span> tag. This method is called the <strong><a href="../guide-for-web-developers/how-fusioncharts-works/DataXMLExp.html">Data String method</a></strong>. It is mutually exclusive to <span class="codeInline">dataURL </span>variable.</p>
<p>* In case both <span class="codeInline">&dataURL</span> and <span class="codeInline">&dataXML </span>are set to blank or not provided, the chart will search for default <span class="codeInline">Data.xml</span> file in the same path as the HTML file.</p>
</td>
</tr>
<tr>
<td valign="top" class="codeInline">DOMId</td>
<td valign="top" class="text"> ID for the chart using which it will be recognized in the HTML page. <strong>Each chart on the page needs to have a unique ID.</strong></td>
</tr>
<tr class="trVeryLightGrayBg">
<td valign="top" class="codeInline">chartWidth</td>
<td valign="top" class="text">Intended width for the chart (value in pixels without any px suffix or value in percent with %25 as suffix. %25 is the UrlEncoded form of % sign)</td>
</tr>
<tr>
<td valign="top" class="codeInline">chartHeight</td>
<td valign="top" class="text">Intended height for the chart (values in pixels without any px suffix or value in percent with %25 as suffix. %25 is the UrlEncoded form of % sign)</td>
</tr>
<tr class="trVeryLightGrayBg">
<td valign="top" class="codeInline">debugMode</td>
<td valign="top" class="text">Whether to start the chart in debug mode which shows a Debug Window over the chart. Set it to 1 to show the Debug Window. Please see the <a href="../Debug/Window.html"> Debugging your Charts</a> section for more details on Debug Mode. </td>
</tr>
<tr>
<td valign="top" class="codeInline">registerWithJS</td>
<td valign="top" class="text">Whether to register the chart with JavaScript. This value should always be set to 1 to get maximum possible access to FusionCharts JavaScript API. But when using <span class="codeInline"><OBJECT></span>/<span class="codeInline"><EMBED></span> method, only minimal JavaScript functions are available to chart (for example, <span class="codeInline">setDataURL</span>, <span class="codeInline">setDataXML</span>, <span class="codeInline">print</span>, <span class="codeInline">exportChart</span> etc.) </td>
</tr>
<tr class="trVeryLightGrayBg">
<td valign="top" class="codeInline">scaleMode</td>
<td valign="top"><span class="text">Scaling option of the chart. It can take any value out of the four: "noscale", "exactfit", "noborder" and "showall". FusionCharts XT works best in "noScale" mode. </span></td>
</tr>
<tr>
<td valign="top" class="codeInline">lang</td>
<td valign="top" class="text">(optional) Preferred language for chart messages. For example, <strong>EN. </strong>The present supported language is EN i.e. English. Other languages can be added by adding to source code of chart and then compiling it. </td>
</tr>
</table>
</td>
</tr>
<tr><td height="23"></td></tr>
<tr>
<td valign="top" class="header"><a name="limitations" id="limitations"></a>Limitations of using HTML embed method</td>
</tr>
<tr>
<td valign="top" class="text">
<p>There are some limitations of HTML embedding method. Let us get a comprehensive list of the limitations:</p>
<ul>
<li>It does not support JSON data format. So the only data format that you can pass to chart using this method is XML.</li>
<li>It is not fully compatible with FusionCharts JavaScript framework, hence, many of advanced features (like Print Manager, <em>LinkedCharts</em>, Advanced Event management etc.) won't work.</li>
<li>It does not support JavaScript (HTML5) chart fallback mechanism.</li>
</ul>
</td>
</tr>
</table>
<!-- footer links starts-->
<div id="fcfooter"></div>
<script type="text/javascript">
document.getElementById("fcfooter").innerHTML = addFCFooter("Creating chart using data from Form|UsingDataForm.html","Using FusionCharts jQuery Plugin|UsingJQuery.html");
</script>
<!-- footer links ends -->
<script type="text/javascript" language="javascript1.2">//<![CDATA[
<!--
highlightSearch();
//-->
//]]></script>
</body>
</html>