Current File : /home/caballoscriollos/www/espanol/encuesta/graphs/contents/singlepagemultichart.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">Using Multiple Charts in a Single HTML Page </h2></td>
</tr>
<tr>
<td valign="top" class="text"><p>Using FusionCharts, you can create any number of charts in a single page - each chart can have its own data source, size or other properties.
Let us see how to embed 4 charts in a single HTML page. <br />
<br />
Consider the code below:</p></td>
</tr>
<tr>
<td valign="top" class="codeBlock"><p><html><br />
<head><title>Multiple Charts in a single Page</title> <br />
<script language="JavaScript" src="../FusionCharts/FusionCharts.js"></script><br />
</head><br />
<body bgcolor="#ffffff"><br />
<div id="<strong>chartdiv1</strong>" align="center">First Chart Container Pie 3D</div><br />
<script type="text/javascript"><br />
var <strong>myChart1</strong> = new FusionCharts("../FusionCharts/FCF_pie3D.swf", "<strong>myChartId1</strong>", "600", "400"); <br />
myChart1.setDataURL("Data.xml"); <br />
myChart1.render("<strong>chartdiv1</strong>");<br />
</script></p>
<p> <div id="<strong>chartdiv2</strong>" align="center">Second Chart Container Column 3D</div><br />
<script type="text/javascript"><br />
var <strong>myChart2</strong> = new FusionCharts("../FusionCharts/FCF_Column3D.swf","<strong>myChartId2</strong>", "600","300"); <br />
myChart2.setDataURL("Data.xml"); <br />
myChart2.render("<strong>chartdiv2</strong>");<br />
</script></p>
<p> <div id="<strong>chartdiv3</strong>" align="center">Third Chart Container Line 2D</div><br />
<script type="text/javascript"><br />
var <strong>myChart3</strong> = new FusionCharts("../FusionCharts/FCF_line.swf", "<strong>myChartId3</strong>", "600", "300"); <br />
myChart3.setDataURL("Data.xml"); <br />
myChart3.render("<strong>chartdiv3</strong>");<br />
</script></p>
<p> <div id="<strong>chartdiv4</strong>" align="center">Fourth Chart Container Area 2D</div><br />
<script type="text/javascript"><br />
var <strong>myChart4</strong> = new FusionCharts("../FusionCharts/FCF_area2D.swf", "<strong>myChartId4</strong>", "400", "250"); <br />
myChart4.setDataURL("Data.xml"); <br />
myChart4.render("<strong>chartdiv4</strong>");<br />
</script><br />
</body><br />
</html></p></td>
</tr>
<tr>
<td valign="top" class="text"><p>As you can see above, we've created 4 DIV elements, one for each chart. Here you must be aware that one DIV element can hold only one chart. Again each DIV element is given a unique ID i.e. no chart DIV element should be of same name (This is the first crucial point to remember). Hence the IDs of the 4 DIV elements are <span class="codeInline">chartdiv1</span>, <span class="codeInline">chartdiv2</span>, <span class="codeInline">chartdiv3</span> & <span class="codeInline">chartdiv4</span>.
<p class="codeBlock">…<div id="<strong>chartdiv1</strong>" align="center">First Chart Container Pie 3D</div>…<br />
<br />
…<div id="<strong>chartdiv2</strong>" align="center">First Chart Container Column 3D</div>…<br />
<br />
…<div id="<strong>chartdiv3</strong>" align="center">First Chart Container Line 2D</div>…<br />
<br />
…<div id="<strong>chartdiv4</strong>" align="center">First Chart Container Area 2D</div>…<br />
<p>The second crucial thing to take care of is the definition of variable/object name of each chart. Each chart should be defined in a separate variable. Thus we get four variables/objects, 1 for each chart.
<p class="codeBlock">…<br />
var <strong>myChart1</strong> = new FusionCharts("../FusionCharts/FCF_pie3D.swf", "<strong>myChartId1</strong>", "600", "400"); <br />
…<br />
var <strong>myChart2</strong> = new FusionCharts("../FusionCharts/FCF_Column3D.swf","<strong>myChartId2</strong>", "600","300"); <br />
…<br />
var <strong>myChart3</strong> = new FusionCharts("../FusionCharts/FCF_line.swf", "<strong>myChartId3</strong>", "600", "300"); <br />
…<br />
var <strong>myChart4</strong> = new FusionCharts("../FusionCharts/FCF_area2D.swf", "<strong>myChartId4</strong>", "400", "250");
<p>Here we define 4 separate objects <span class="codeInline">myChart1, myChart2, myChart3 & myChart4</span>. Again we must remember that the chart ID that we are assigning must have unique names. Hence we give<span class="codeInline"> myChartId1, myChartId2, myChartId3 & myChartId4</span> respectively for each chart.
<p>Next we provide XML data to the charts using dataURL method. You can always use dataXML method if you want to. Again you can always use different data sources for different charts. <br />
<p>Now the last important and most crucial step is rendering of the chart. We render each chart using <span class="codeInline">render() </span>method.
<p class="codeBlock"><strong>myChart1</strong>.render("<strong>chartdiv1</strong>"); <br />
<br />
<strong>myChart2</strong>.render("<strong>chartdiv2</strong>");<br />
<br />
<strong>myChart3</strong>.render("<strong>chartdiv3</strong>"); <br />
<br />
<strong>myChart4</strong>.render("<strong>chartdiv4</strong>"); <br />
<p>Again note here that we have used separate and correct chart DIV id name while rendering each chart. <span class="codeInline">myChart1 </span>is rendered in <span class="codeInline"> chartdiv1</span>, <span class="codeInline">myChart2</span> in <span class="codeInline">chartdiv2</span> and so on. Hence we get 4 separate charts rendered (One must be very cautious here. This is because if the same name <span class="codeInline">chartdiv1</span> is used in all cases, only one chart, probably the last chart, will be rendered).
<p> The page will create four charts in a single page as shown below:</td>
</tr>
<tr>
<td valign="top"><img src="Images/multichart.jpg" class="imageBorder" /></td>
</tr>
<tr>
<td valign="top" class="text"><p>In this example, we've used the same data source for all charts. However, in your application, you can always use different data sources for these charts. Also, for each chart you can opt to select <span class="codeInline">dataURL</span> or <span class="codeInline">dataXML</span> method of providing data. </p>
</td>
</tr>
</table>
</body>
</html>
Mr. DellatioNx196 GaLers xh3LL Backd00r 1.0, Coded By Mr. DellatioNx196 - Bogor BlackHat