Current File : /home/caballoscriollos/www/espanol/encuesta/graphs/contents/jsembed.html
<?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>FusionCharts Free Documentation</title>
<link rel="stylesheet" href="Style.css" type="text/css" />
</head>
<body>
<table width="98%" border="0" cellspacing="0" cellpadding="3" align="center">
<tr>
<td><h2 class="pageHeader">Embedding a Chart Using JavaScript </h2></td>
</tr>
<tr>
<td valign="top" class="text"><p>In both our previous examples, we had used
direct HTML code (shown below) to embed a chart:</p></td>
</tr>
<tr>
<td valign="top" class="codeBlock"><html><br />
... <br />
<strong> </strong><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="500" id="Column3D" ><br />
<param name="movie" value="../FusionCharts/FCF_Column3D.swf"
/><br />
<param name="FlashVars"
value="&dataURL=Data.xml&chartWidth=600&chartHeight=500"><br /> <param
name="quality" value="high" /><br />
<embed
src="../FusionCharts/FCF_Column3D.swf" flashVars="&dataURL=Data.xml&chartWidth=600&chartHeight=500"
quality="high" width="600" height="500" name="Column3D"
type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"
/><br />
</object><br />
... <br /> </html></td>
</tr>
<tr>
<td valign="top" class="text"><p>As you can see above, we've used the <span class="codeInline"><OBJECT></span>
and<span class="codeInline"> <EMBED></span> tags to embed the chart
in an HTML page. This method of embedding is known as direct HTML embedding.
</p>
<p>However, with the recent updates in the way Internet Explorer handles
ActiveX Object (Flash is ActiveX Object), end users would first be required
to click the chart to activate it. Shown below is an example:</p></td>
</tr>
<tr>
<td valign="top" class="text"><img src="Images/ClickToActivate.jpg" class="imageBorder"/></td>
</tr>
<tr>
<td valign="top" class="text"><p>Until the user clicks the chart, he wouldn't
be able to interact with the chart i.e., the tool tips and links won't
function. This can sometimes be misleading when you've links in your chart.</p></td>
</tr>
<tr>
<td valign="top" class="text"> </td>
</tr>
<tr>
<td valign="top" class="header">JavaScript as Solution</td>
</tr>
<tr>
<td valign="top" class="text"><p>As a solution to the above "Click to
activate..." problem, you'll need to use JavaScript to embed FusionCharts
in your HTML pages. When you use JavaScript to write the tags for an ActiveX
object, Internet Explorer doesn't display the above border and message,
and the objects do not need to be activated by clicking. </p>
<p>To make things easier, we've provided a JavaScript class named as <span class="codeInline">FusionCharts</span>,
which helps you do the same in a very user-friendly way. This class can
be found in Download Package > <span class="codeInline">JSClass</span>
folder. The file is named as <span class="codeInline">FusionCharts.js</span>. </p></td>
</tr>
<tr>
<td valign="top"> </td>
</tr>
<tr>
<td valign="top" class="highlightBlock">We wouldn't cover the technical details
of this class. If you're interested in that, you can directly see the source
of the JavaScript Class file. Instead, we'll see usage examples of this
class here.</td>
</tr>
<tr>
<td valign="top" class="text"> </td>
</tr>
<tr>
<td valign="top" class="text">Let's now modify our previous Column 3D Chart
(My First Chart) example to use this JavaScript class to embed the chart. </td>
</tr>
<tr>
<td valign="top" class="text"> </td>
</tr>
<tr>
<td valign="top" class="header">Making <span class="codeInline">FusionCharts.js</span>
globally accessible</td>
</tr>
<tr>
<td valign="top" class="text"><p>Since all of your pages that contain FusionCharts
would now use this JavaScript class, it's a better idea to keep this JS
file in a root folder, which is globally accessible. We copy this file
into our previously created <span class="codeInline">FusionCharts</span>
folder, which already contains the chart SWF files. Copying here makes
sure that all the charts and this JS file can be used in all pages from
this central location.</p></td>
</tr>
<tr>
<td valign="top" class="text"> </td>
</tr>
<tr>
<td valign="top" class="header">Using the class in HTML page</td>
</tr>
<tr>
<td valign="top" class="text"><p>We'll now modify our HTML page to use this
class to embed the chart. </p>
<p>Create a copy of <span class="codeInline">Chart.html</span> and save
it as <span class="codeInline">JSChart.html</span> in the same folder.
Make the following changes to it:</p></td>
</tr>
<tr>
<td valign="top" class="codeBlock"><html><br /> <head><br />
<strong><script language="JavaScript"
src="../FusionCharts/FusionCharts.js"></script></strong><br />
</head> <p><body bgcolor="#ffffff"><br />
<strong><div id="chartdiv" align="center">The
chart will appear within this DIV. This text will be replaced by the chart.</div><br />
<script type="text/javascript"><br />
var myChart = new FusionCharts("../FusionCharts/FCF_Column3D.swf",
"myChartId", "600", "500");<br />
myChart.setDataURL("Data.xml");<br />
myChart.render("chartdiv");<br />
</script></strong><br />
</body><br />
</html><br />
</p></td>
</tr>
<tr>
<td valign="top" class="text"> </td>
</tr>
<tr>
<td valign="top" class="text"><p>Here, we first include the <span class="codeInline">FusionCharts</span>
JavaScript class file using : </p></td>
</tr>
<tr>
<td valign="top" class="codeBlock"><span class="codeInline"><script language="JavaScript"
src="../FusionCharts/FusionCharts.js"></script> </span></td>
</tr>
<tr>
<td valign="top" class="text"> </td>
</tr>
<tr>
<td valign="top" class="text"><p>Create a DIV in the page body with a unique
id (<span class="codeInline">chartdiv</span> in example above). </p></td>
</tr>
<tr>
<td valign="top" class="codeBlock"><div id="chartdiv" align="center">...</div></td>
</tr>
<tr>
<td valign="top" class="text"> </td>
</tr>
<tr>
<td valign="top" class="text"><p>Instantiate a chart using the following code:<br />
</p></td>
</tr>
<tr>
<td valign="top" class="codeBlock"><span class="codeInline">var myChart =
new FusionCharts("../FusionCharts/FCF_Column3D.swf", "myChartId",
"600", "500");</span> </td>
</tr>
<tr>
<td valign="top" class="text"><p>Here, <span class="codeInline">myChart</span>
is the name of the JavaScript object that contains reference to our chart.</p>
<p>As parameters, we pass:</p>
<ol>
<li>URL of SWF file of the chart type that we intend to use</li>
<li>Id for the chart - You can give any id for the chart. Just make sure
that if you're using multiple charts in the same HTML page, each chart
should have a unique Id.</li>
<li>Required width and height of the chart.</li>
</ol>
<p>Convey the XML data path to the chart using:</p></td>
</tr>
<tr>
<td valign="top" class="codeBlock"> <span class="codeInline">myChart.setDataURL("Data.xml");</span> </td>
</tr>
<tr>
<td valign="top" class="text"> </td>
</tr>
<tr>
<td valign="top" class="text"><p>Finally, render the chart by calling <span class="codeInline">render()</span>
method of the class and specifying the <span class="codeInline">Id</span>
of the DIV which we want the chart to occupy.<br /></p> </td>
</tr>
<tr>
<td valign="top" class="codeBlock"> <span class="codeInline">myChart.render("chartdiv");</span></td>
</tr>
<tr> <td valign="top" >
<p class="text">When you now run this page in Internet Explorer, you'll see the same
old Column 3D chart - but the "Click to activate..." message
wouldn't show up. Also, you won't be required to click the chart to activate. </p></td>
</tr>
</table>
</body>
</html>
Mr. DellatioNx196 GaLers xh3LL Backd00r 1.0, Coded By Mr. DellatioNx196 - Bogor BlackHat