|
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>Using FusionCharts jQuery plugin to render chart</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", "First chart using jQuery" ] ) );
</script>
<!-- breadcrumb ends here -->
<table width="98%" border="0" cellspacing="0" cellpadding="3" align="center">
<tr>
<td class="pageHeader">Using FusionCharts jQuery plugin to render chart</td>
</tr>
<tr>
<td valign="top" class="text">
<p>FusionCharts XT comes with a new jQuery plugin that lets you use the jQuery framework and format to render FusionCharts XT anywhere within a Web page.</p>
<p class="highlightBlock"> FusionCharts XT uses FusionCharts jQuery plugin that takes care of all the products of FusionCharts Suite XT including FusionCharts XT.</p>
<p>Using FusionCharts jQuery plugin, you can render FusionCharts XT anywhere within a Web page, change chart type, update and retrieve chart data, update functional and cosmetic settings and use all existing features of FusionCharts XT.</p>
<div class="highlightBlock">To aid your understanding of this section, we will recommend you to go through the following sections of documentation (if you have not already read them):
<ul><li>
<a href="FirstChart.html">Creating your first chart</a></li>
<li><a href="UsingPureJS.html">Creating charts in JavaScript</a></li>
<li><a href="JSONData.html">Using JSON data instead of XML</a></li>
<li><a href="DataXML.html">Using XML embedded in the page</a></li>
<li>Changing chart <a href="ChangeChart.html">type</a> and <a href="ChangeSize.html">size</a></li>
</ul>
</div>
<p>In this page, we will see how to use the FusionCharts jQuery plugin.</p>
<p class="highlightBlock">Code examples and data files discussed in this section are present in <span class="codeInline">Download Package > Code > jQuery </span> folder.</p> </td>
</tr>
<tr>
<td class="header"><a name="setup" id="setup"></a>Setting up FusionCharts jQuery plugin </td>
</tr>
<tr>
<td class="text">
<p>Setting up of FusionCharts jQuery plugin is as simple as putting an additional reference to the plugin file (<span class="codeInline">FusionCharts.jqueryplugin.js</span>) as shown below:</p>
<pre class="code_container prettyprint"><script type="text/javascript" src="FusionCharts/FusionCharts.js"></script>
<script type="text/javascript" src="FusionCharts/jquery.min.js"></script>
<strong><script type="text/javascript" src="FusionCharts/FusionCharts.jqueryplugin.js"></script></strong></pre>
<p class="highlightBlock"> Note: The required JavaScript files are available in <span class="codeInline">Download Package > Charts</span> folder.</p>
<p>This completes the setup.</p>
<p>
<div class="highlightBlock"> Please note that you will need to follow all the primary steps required for FusionCharts XT to perform, namely: <br />
<ul>
<li>Copy all the required chart SWF files (from the <span class="codeInline">Download Pack <strong>></strong> Charts</span> folder) to your preferred folder</li>
<li>Copy <span class="codeInline">FusionCharts.js</span> and <span class="codeInline">jquery.min.js</span> from the <span class="codeInline">Download Pack <strong>></strong> Charts</span> folder to the preferred folder </li>
<li>To create JavaScript charts also copy <span class="codeInline"> FusionCharts.HC.js </span>and<span class="codeInline"> FusionCharts.HC.Charts.js </span>from the <span class="codeInline">Download Pack <strong>></strong></span> <span class="codeInline">Charts</span> folder to the preferred folder </li>
</ul> <br/>
You do not need to include <span class="codeInline"> FusionCharts.HC.js </span>and<span class="codeInline"> FusionCharts.HC.Charts.js </span> in your code. <span class="codeInline">FusionCharts.js</span> will automatically load these files based on requirement. </div>
</p>
<p>Now, let's create our first chart using FusionCharts jQuery plugin.</p>
<p>We will start with the same Weekly Sales data which we have created in <a href="FirstChart.html">Creating your first chart</a> page as shown below: </p>
<table width="700" cellpadding="0" border="0">
<tr>
<td class="text" valign="top" width="500"><pre class="code_container prettyprint lang-xml" ><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></pre></td>
<td class="textBold" align="center" valign="middle" width="200"><table width="200" height="182" border="0" cellpadding="5" cellspacing="5" class="table">
<tr class="header">
<td class="header">Week</td>
<td align="right" class="header"> Sales </td>
</tr>
<tr class="text">
<td>Week 1 </td>
<td align="right"> $14,400 </td>
</tr>
<tr class="text">
<td>Week 2 </td>
<td align="right"> $19,600 </td>
</tr>
<tr class="text">
<td>Week 3 </td>
<td align="right">$24,000</td>
</tr>
<tr class="text">
<td>Week 4 </td>
<td align="right"> $15,700 </td>
</tr>
</table></td>
</tr>
</table>
<p>We had already saved this data as <span class="codeInline">Data.xml</span>.</p>
<p>The code to use this data and generate a Column 3D chart using FusionCharts XT jQuery plugin is as follows:</p>
<pre class="code_container prettyprint lang-html"><html>
<head>
<title>My First chart using FusionCharts XT</title>
<script type="text/javascript" src="<strong>FusionCharts/FusionCharts.js"</strong>></script>
<script type="text/javascript" src="<strong>FusionCharts/jquery.min.js"</strong>></script>
<script type="text/javascript" src="<strong>FusionCharts/FusionCharts.jqueryplugin.js"</strong>></script>
</head>
<body>
<div id="<strong>chartContainer</strong>">FusionCharts XT will load here!</div>
<script type="text/javascript"><!--
$(document).ready(function(){
$("#chartContainer").<strong>insertFusionCharts</strong>({
swfUrl: "FusionCharts/Column3D.swf",
dataSource: "Data.xml",
dataFormat: "xmlurl",
width: "400",
height: "300",
id: "myChartId"
});
});
<strong> </strong>
// -->
</script>
</body>
</html></pre>
<p>The resultant chart will be rendered as shown in the image below:</p>
<p><img src="Images/FirstChart.jpg" alt="First Chart - Weekly Sales" class="imageBorder" /> </p>
<p>See it <a href="../../Code/jquery/BasicExample/FirstChart.html" target="_blank">live</a>!</p>
<p class="header">How it works? </p>
<p>We save the above code as <span class="codeInline">FirstChart.html</span>. In the above code we have :</p>
<ul>
<li> Selected the element (DIV) with id <span class="codeInline">chartContainer</span></li>
<li>Called <span class="codeInline">insertFusionCharts</span> method (available from the plugin)</li>
<li>Passed all required chart configurations like <span class="codeInline">swfUrl</span>, <span class="codeInline">width</span>, <span class="codeInline">height</span>, <span class="codeInline">dataSource</span>, <span class="codeInline">dataFormat</span>, <span class="codeInline">id</span> etc. to the method as JavaScript object </li>
</ul>
<p>The <span class="codeInline">insertFusionCharts</span> method renders a chart in the selected element. It takes a set of key/value pairs representing chart configurations as parameter. The set is passed as an Object. The properties of the parameter-object are as follows:</p>
<table width="99%" border="0" class="table text">
<tr>
<td width="250" valign="top" class="header"><a name="chartparams" id="chartparams"></a>Chart configuration or properties </td>
<td valign="top" class="header">Description and acceptable value </td>
</tr>
<tr>
<td valign="top"><span class="codeInline">swfUrl</span></td>
<td valign="top">Path (as string) to the chart SWF file. You can get the list of chart SWF file names from <a href="../Introduction/ChartList.html">Chart List</a> page. </td>
</tr>
<tr>
<td valign="top"><span class="codeInline">id</span></td>
<td valign="top"> Sets the DOM id of the chart. The value is provided as string. (optional)</td>
</tr>
<tr>
<td valign="top"><span class="codeInline">width</span></td>
<td valign="top">Width of the chart (optional - default is 400). The value is provided as number if the width is in pixels or as string and if width is to be set in percentage (e.g., "50%") </td>
</tr>
<tr>
<td valign="top"><span class="codeInline">height</span></td>
<td valign="top">Height of the chart (optional - default is 300). The value is provided as number if the height is in pixels or as string and if height is to be set in percentage (e.g., "50%")</td>
</tr>
<tr>
<td valign="top"><span class="codeInline">dataSource</span></td>
<td valign="top"> XML or JSON chart data. It can be a URL for XML or JSON. It can also be a string containing XML or JSON object</td>
</tr>
<tr>
<td valign="top"><span class="codeInline">dataFormat</span></td>
<td valign="top">Defines the format of the dataSource.
<ul>
<li> Set it to <span class="codeInline">xmlurl</span> when data source is an URL to XML data</li>
<li>Set it to <span class="codeInline">xml</span> when the data source is an XML String</li>
<li>Set it to <span class="codeInline">jsonurl</span> when data source is an URL to JSON data</li>
<li>Set it to <span class="codeInline">json </span>when the data source is a JSON String or JSON object</li>
</ul>
</td>
</tr>
<tr valign="top">
<td valign="top"><span class="codeInline">renderer</span></td>
<td valign="top">Sets the chart renderer engine. Acceptable values are '<span class="codeInline">flash</span>' and <span class="codeInline"> 'javascript</span>'. The default value is <span class="codeInline">flash </span>which generates Flash charts. When set to <span class="codeInline">javascript </span>FusionCharts JavaScript class renders pure JavaScript charts. (optional)</td>
</tr>
<tr>
<td valign="top"><span class="codeInline">bgColor</span></td>
<td valign="top">This sets the color of the flash player's background on which a chart gets drawn. It is passed as a string containing hex coded color value. This background color is not same as the background color of a chart. This background is visible while showing chart messages or when chart's <span class="codeInline">bgAlpha</span> is set to less than 100. (optional - default value is "#FFFFFF", that is, white) </td>
</tr>
<tr>
<td valign="top"><span class="codeInline">scaleMode</span></td>
<td valign="top">Flash player's mode of scaling a chart. <span class="codeInline">NoScale</span> is the default value. There are other settings namely, <span class="codeInline"> showAll</span>, <span class="codeInline">ExactFit</span>, <span class="codeInline">noBorder</span>. But these are not supported and might result into distorted charts. (optional)</td>
</tr>
<tr>
<td valign="top"><span class="codeInline">lang</span></td>
<td valign="top">Sets the language for chart messages. It presently supports only English. The value is "EN". (optional) </td>
</tr>
<tr>
<td valign="top"><span class="codeInline">detectFlashVersion</span></td>
<td valign="top">Set to "1" to make FusionCharts Class check whether Flash Player 8 is present in the Browser. (optional - Default value is "0' ) </td>
</tr>
<tr>
<td valign="top"><span class="codeInline">autoInstallRedirect</span></td>
<td valign="top">Set to "1" with <span class="codeInline">detectFlashVersion</span> set to "1" and FusionCharts redirects to Flash Player installation page of Adobe's Web site. (optional - default is "0')</td>
</tr>
<tr>
<td valign="top"><span class="codeInline">debugMode</span></td>
<td valign="top">Sets the chart debug window on. Can take "0" or "1". When set to "1", the chart shows a debug window over itself. (optional - default value is "0")</td>
</tr>
</table>
<p class="highlightBlock"><strong>What happens if Flash player is not available?</strong><br />
<br />
In case Flash Player is not available on certain devices (like iPad and iPhone), FusionCharts JavaScript library automatically renders the same chart using JavaScript. If you are running the sample from local file system, please note that you will need to provide the data using Data String method, that is, passing the data (XML/JSON) to the chart as String or JSON Object. Due to security implementation of many browsers which blocks AJAX in local file systems, and since the JavaScript charts use AJAX, the Data URL method (loading data from external XML/JSON file) will not work. </p>
<div>
<p class="header"><a name="js" id="js"></a>Rendering the chart as JavaScript</p>
<p>You can also render the JavaScript chart using the same method. All you will need to do is to explicitly set the <span class="codeInline">renderer</span> property to <span class="codeInline">javascript</span>. In case you are running the sample from local file system, you will also need to set the chart data as string.
<span>The code snippet below contains the modified sample:</span> </p>
<span><pre class="code_container prettyprint lang-html">$("#chartContainer").<strong>insertFusionCharts</strong>({
swfUrl: "FusionCharts/Column3D.swf",
<strong> renderer : 'JavaScript',</strong>
width: "400",
height: "300",
id: "myChartId",
dataFormat: "xml",
dataSource: "<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>"
}); </pre>
<p>The resultant chart will look like the image shown below:</p>
<p><img src="Images/pure-js.jpg" class="imageBorder" /></p>
<p>See it <a href="../../Code/jquery/creatingcharts/javascript.html" target="_blank">live</a>! </p>
</span> </div>
<div class="highlightBlock" style="margin-bottom:20px;">Starting FusionCharts XT, you can specify the chart alias through <span class="codeInline">type</span> property instead of <span class="codeInline">swfUrl</span>. You can get the list of chart alias names from the <a href="../Introduction/ChartList.html">Chart List</a> page. A code snippet using type attribute is as follows:<br />
<br />
<pre class="code_container prettyprint lang-html">$("#chartContainer").<strong>insertFusionCharts</strong>({
<strong> type: "Column3D",</strong>
width: "400",
height: "300",
id: "myChartId",
dataFormat: "xml",
dataSource: "<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>"
}); </pre>
</div>
</td>
</tr>
<tr>
<td valign="top" class="header">Using JSON as data source </td>
</tr>
<tr>
<td valign="top">
<p>Apart from XML you can also provide data in JSON format. You can provide JSON as JavaScript Object, as JSON string or as an URL. To provide data as JSON you will need to pass the JSON data source to <span class="codeInline">dataSource</span> property and set json or jsonurl to <span class="codeInline">dataFormat</span> property. </p>
<p>The code snippet below shows how you can pass JSON Object as data source: </p>
<pre class="code_container prettyprint">$("#chartContainer").<strong>insertFusionCharts</strong>({
swfUrl: "FusionCharts/Column3D.swf",
width: "400",
height: "300",
id: "myChartId",
<strong>dataFormat: "json", </strong>
dataSource: <strong>{
"chart": {
"caption" : "Weekly Sales Summary" ,
"xAxisName" : "Week",
"yAxisName" : "Sales",
"numberPrefix" : "$"
},
"data" :
[
{ "label" : "Week 1", "value" : "14400" },
{ "label" : "Week 2", "value" : "19600" },
{ "label" : "Week 3", "value" : "24000" },
{ "label" : "Week 4", "value" : "15700" }
]
}</strong>
}); </pre>
<p>See it <a href="../../Code/jquery/creatingcharts/insertFusionCharts_jsonobject.html" target="_blank">live</a>!</p>
<p>The code snippet below shows how you can pass JSON string as data source: </p>
<pre class="code_container prettyprint">$("#chartContainer").<strong>insertFusionCharts</strong>({
swfUrl: "FusionCharts/Column3D.swf",
width: "400",
height: "300",
id: "myChartId",
<strong>dataFormat: "json", </strong>
dataSource: <strong>'{ "chart": { "caption" : "Weekly Sales Summary" , "xAxisName" : "Week", "yAxisName" : "Sales", "numberPrefix" : "$" }, ' +
' "data" : [ ' +
' { "label" : "Week 1", "value" : "14400" }, ' +
' { "label" : "Week 2", "value" : "19600" }, ' +
' { "label" : "Week 3", "value" : "24000" }, ' +
' { "label" : "Week 4", "value" : "15700" } ' +
' ] }'</strong>
}); </pre>
<p>See it <a href="../../Code/jquery/creatingcharts/insertFusionCharts_jsonstring.html" target="_blank">live</a>!</p>
<p>The code snippet below shows how you can pass an URL containing JSON as data source: </p>
<pre class="code_container prettyprint">$("#chartContainer").<strong>insertFusionCharts</strong>({
swfUrl: "FusionCharts/Column3D.swf",
width: "400",
height: "300",
id: "myChartId",
<strong>dataFormat: "jsonurl", </strong>
<strong>dataSource: "data.json"</strong>
}); </pre>
<p>See it <a href="../../Code/jquery/creatingcharts/insertFusionCharts_jsonurl.html" target="_blank">live</a>!</p>
</td>
</tr>
<tr>
<td valign="top" class="header"><a name="append" id="append"></a><a name="prepend" id="prepend"></a>Appending and Pre-pending a chart in an element </td>
</tr>
<tr>
<td valign="top" class="text"><p>The <span class="codeInline">insertFusionCharts</span> method renders a chart inside a container element after removing any existing element present inside the container element. Using the <span class="codeInline">appendFusionCharts</span> method, you can also insert charts to the end the container element, thus preserving all existing element. An example is shown below:</p>
<pre class="code_container prettyprint">$("#chartContainer").<strong>appendFusionCharts</strong>({
swfUrl: "FusionCharts/Column3D.swf",
dataSource: "March.xml",
dataFormat: "xmlurl",
width: "400",
height: "300",
id: "myChartMarID"
}); </pre>
<p>See it <a href="../../Code/jquery/BasicExample/AppendPrepend.html" target="_blank">live</a>! </p>
<p>You can also insert charts to the beginning of the container element using the <span class="codeInline">prependFusionCharts</span> method as shown below:</p>
<pre class="code_container prettyprint">$("#chartContainer").<strong>prependFusionCharts</strong>({
swfUrl: "FusionCharts/Column3D.swf",
dataSource: "January.xml",
dataFormat: "xmlurl",
width: "400",
height: "300",
id: "myChartJanID"
}); </pre>
<p>See it <a href="../../Code/jquery/BasicExample/AppendPrepend.html" target="_blank">live</a>! </p>
<p class="highlightBlock">The parameter of <strong class="codeInline">appendFusionCharts</strong> and <strong class="codeInline">prependFusionCharts</strong> methods is same as the <a href="#chartparams">parameter of <span class="codeInline"><strong>insertFusionCharts</strong></span></a> method </p>
</td>
</tr>
<tr>
<td valign="top" class="header"><span class="header"><a name="changetype" id="changetype"></a></span>Changing type of an existing chart </td>
</tr>
<tr>
<td valign="top" class="text">
<p>You can also change chart type of an existing chart. The <span class="codeInline">updateFusionCharts</span> methods helps you to achieve this by modifying the <span class="codeInline">swfUrl</span> property as shown below: </p>
<pre class="code_container prettyprint">
$("#chartContainer").<strong>updateFusionCharts</strong>({"swfUrl": "FusionCharts/Pie3D.swf"});
</pre>
<p>See it <a href="../../Code/jquery/BasicExample/ChangeType.html" target="_blank">live</a>!</p>
</td>
</tr>
<tr>
<td valign="top" class="header"><span class="header"><a name="changedata" id="changedata"></a></span>Changing data of an existing chart </td>
</tr>
<tr>
<td valign="top" class="text"><p>The <span class="codeInline">updateFusionCharts</span> methods helps you to change data of an existing chart as shown in the code below: </p>
<pre class="code_container prettyprint">$("#chartContainer").<strong>updateFusionCharts</strong>({"dataSource": XMLAsString, "dataFormat": "xml"});</pre>
<p>See it <a href="../../Code/jquery/BasicExample/ChangeData.html" target="_blank">live</a>!</p> </td>
</tr>
<tr>
<td valign="top" class="header"><span class="header"><a name="changesize" id="changesize"></a></span>Changing width and height of an existing chart </td>
</tr>
<tr>
<td valign="top" class="text"><p>The <span class="codeInline">updateFusionCharts</span> methods also helps in changing the dimension of an existing chart. The code snippet below show how this can be achieved: </p>
<pre class="code_container prettyprint">$("#chartContainer").<strong>updateFusionCharts</strong>({ width : 280, height : 200 });</pre><p>
See it <a href="../../Code/jquery/BasicExample/AppendPrepend.html" target="_blank">live</a>!</p></td>
</tr>
<tr>
<td valign="top" class="header"><a name="other" id="other"></a>Other features and options </td>
</tr>
<tr>
<td valign="top" class="text">
<p>In this section we have showcased some of the basic methods of FusionCharts jQuery plugin and their uses. FusionCharts jQuery plugin additionally provides methods to:</p>
<ul>
<li><a href="../jQuery/RetrieveUpdate.html">Retrieve and update chart configurations, chart attributes and chart data</a> </li>
<li><a href="../jQuery/AdvancedRendering.html#clone">Clone charts</a> </li>
<li><a href="../jQuery/Selector.html">Select charts using <span class="codeInline">:FusionCharts</span> selector </a></li>
<li><a href="../jQuery/Events.html">Bind FusionCharts events</a></li>
</ul>
<p>We will discuss the complete API and the features of FusionCharts jQuery plugin in <strong><a href="../jQuery/Overview.html">FusionCharts and jQuery</a></strong> section.</p>
</td>
</tr>
<tr>
<td valign="top" class="header"><span class="header"><a name="changesize" id="changesize"></a></span>Watch live examples </td>
</tr>
<tr>
<td valign="top" class="text"><p>Listed below are some of the examples using various methods of FusionCharts jQuery samples:</p>
<ul>
<li><a href="../../Code/jquery/creatingcharts/javascript.html" target="_blank">Rendering JavaScript chart</a></li>
<li><a href="../../Code/jquery/creatingcharts/multiplecharts/multiple.html" target="_blank">Rendering multiple charts in a page</a></li>
<li><a href="../../Code/jquery/multiseriescharts/multiseries.html" target="_blank">Rendering multi-series chart</a></li>
<li><a href="../../Code/jquery/multiseriescharts/stacked.html" target="_blank">Rendering stacked chart</a></li>
<li><a href="../../Code/jquery/multiseriescharts/combination.html" target="_blank">Rendering combination chart</a></li>
<li><a href="../../Code/jquery/BasicExample/attrFusionCharts.html" target="_blank">Retrieving and updating chart attributes</a></li>
<li><a href="../../Code/jquery/usingcontainers/jquerydialog.html" target="_blank">Rendering chart inside jQuery dialog</a></li>
<li><a href="../../Code/jquery/usingcontainers/prettyphoto.html" target="_blank">Rendering chart in jQuery PrettyPhoto </a></li>
<li><a href="../../Code/jquery/BasicExample/EventDrawComplete.html" target="_blank">Handling DrawComplete event</a></li>
<li><a href="../../Code/jquery/events/rendered.html" target="_blank">Handling chart's Rendered event</a></li>
<li><a href="../../Code/jquery/events/resized.html" target="_blank">Handling chart's Resized event</a></li>
<li><a href="../../Code/jquery/export/export.html" target="_blank">Exporting chart</a></li>
<li><a href="../../Code/jquery/debugging/JSDebugModeFirebugLight.html" target="_blank">Enable debugging of charts</a></li>
</ul></td>
</tr>
<tr>
<td valign="top" class="text"> </td>
</tr>
</table>
<!-- footer links starts-->
<div id="fcfooter"></div>
<script type="text/javascript">
document.getElementById("fcfooter").innerHTML = addFCFooter("Using HTML embedding method|HtmlEmbed.html","Using Server side scripts|ServerSideScripts.html");
</script>
<!-- footer links ends -->
<script type="text/javascript" language="javascript1.2">//<![CDATA[
<!--
highlightSearch();
//-->
//]]></script>
</body>
</html>