|
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 multiple charts in a page </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", "Creating multiple charts in a page" ] ) );
</script>
<!-- breadcrumb ends here -->
<table width="98%" border="0" cellspacing="0" cellpadding="3" align="center">
<tr>
<td class="pageHeader">Embedding multiple charts in a page </td>
</tr>
<tr>
<td valign="top" class="text">
<p>You can easily embed any number of charts in a single HTML page (or Web page). You can even combine charts from <a href="http://www.fusioncharts.com" target="_blank">FusionCharts XT </a> and <a href="http://www.fusioncharts.com/PowerCharts" target="_blank">PowerCharts XT</a>, maps from <a href="http://www.fusioncharts.com/maps" target="_blank">FusionMaps XT</a>, and gauges from <a href="http://www.fusioncharts.com/widgets" target="_blank">FusionWidgets XT</a> in the same page. </p>
<p>In this example, we will add three charts and a <a href="../grid-component/Grid_Overview.html">grid component</a> to a page. Three charts showing weekly sales for months -January (Column2D), February (Column2D) March (Pie3D), and an additional Grid component showing weekly sales for January. The page will look like the image below: </p>
<p><img src="Images/Multiple-charts.jpg" width="600" height="302" class="imageBorder" /> </p>
<p class="highlightBlock">Code examples and data files discussed in this section are present in <span class="codeInline">Download Package > Code > MyFirstChart</span> folder. We have used multiple XML files for this sample which are also present in the same folder. </p>
<p>The process of embedding multiple charts is similar to that of embedding a single chart. You just need to take care of the following:</p>
<ul>
<li>Each chart on the page should have a unique DOM-Id (which is specified in the JavaScript constructor).</li>
<li>Each chart should be denoted by a unique JavaScript variable name (example, <span class="codeInline">var chart1 = new FusionCharts (...); var chart2 = new FusionCharts(...); ).</span></li>
<li>Each chart should be rendered in separate HTML container (DIV, SPAN etc.), each container having unique id. The chart embedding code must contain a reference to the ID of the container where the chart is to be rendered ( <span class="codeInline">render("chart1div") ; .. render("chart2Div");</span> ). </li>
</ul><br />
The following sample code embeds three charts into a single HTML page (<span class="codeInline">weekly-sales-multiple-charts.html</span>) :
<br />
<br /></td>
</tr>
<tr>
<td valign="top" class="text">
<pre class="code_container prettyprint lang-html"><html>
<head>
<title>My First chart using FusionCharts XT - multiple charts</title>
<script type="text/javascript" src="FusionCharts/FusionCharts.js"></script>
</head>
<body>
<span id="chartContainerJan">January Column 2D Chart will load here</span>
<span id="chartContainerFeb">February Column 2D Chart will load here</span>
<span id="chartContainerMarch">March Pie Chart will load here</span>
<span id="gridContainerJan">January Grid will load here</span>
<script type="text/javascript"><!--
var JanChart = new FusionCharts("FusionCharts/Column2D.swf", "JanChartId",
"400", "300", "0");
JanChart.setXMLUrl("Data-Jan.xml");
JanChart.render("chartContainerJan");
var JanGrid = new FusionCharts("FusionCharts/SSGrid.swf", "JanGridId",
"400", "300", "0");
JanGrid.setXMLUrl("Data-Jan.xml");
JanGrid.render("gridContainerJan");
var FebChart = new FusionCharts("FusionCharts/Column2D.swf", "FebChartId",
"400", "300", "0");
FebChart.setXMLUrl("Data-Feb.xml");
FebChart.render("chartContainerFeb");
var MarChart = new FusionCharts("FusionCharts/Pie3D.swf", "MarChartId",
"400", "300", "0");
MarChart.setXMLUrl("Data-Mar.xml");
MarChart.render("chartContainerMarch");
// -->
</script>
</body>
</html></pre>
<br />
See it <a href="../../Code/MyFirstChart/weekly-sales-multiple-charts.html" target="_blank">live</a>!</td>
</tr>
<tr>
<td valign="top" class="text">
<p>In the above code we have embedded four charts in a single page - two 2D column charts, a 3D pie chart and a Grid component. Each having unique DOMIds - <span class="codeInline">JanChartId, JanGridId, FebChartId and MarChartId</span>. Each FusionCharts JavaScript object has a unique name - <span class="codeInline">JanChart, JanGrid, FebChart</span><span class="text"> and </span><span class="codeInline">MarChart</span>. There are four HTML containers (four SPAN elements) where each of the four charts are rendered. Each element also has unique id - <span class="codeInline">chartContainerJan, chartContainerFeb, chartContainerMarch</span> and <span class="codeInline">gridContainerJan</span>.</p>
<div 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 <a href="../guide-for-web-developers/how-fusioncharts-works/DataXMLExp.html">Data String method</a>, that is, passing the data (XML/JSON) to the chart as String or JSON Object. Many browsers restrict JavaScript from accessing local file system owing to security reasons. In the above example, since you had provided data as a URL, the JavaScript charts will not be able to access the same, when running locally. If you run the files from a server, it will run absolutely fine, though. When running locally, however, if you provide the data as string (using the <a href="DataXML.html">Data String method</a>), it works fine.<br />
<br />
<span class="msg_handler_slider"><a href="#">Click here to view the above code snippet modified to use Data String method</a> » </span>
<div class="msg_body">
<pre class="code_container prettyprint lang-html"><html>
<head>
<title>My First chart using FusionCharts XT - multiple charts</title>
<script type="text/javascript" src="FusionCharts/FusionCharts.js"></script>
</head>
<body>
<span id="chartContainerJan">January Column 2D Chart will load here</span>
<span id="chartContainerFeb">February Column 2D Chart will load her</span>
<span id="chartContainerMarch">March Pie Chart will load here</span>
<div id="gridContainerJan">January Grid will load here</span>
<script type="text/javascript"><!--
var JanChart = new FusionCharts("../../Charts/Column2D.swf", "JanChartId", "400", "300", "0");
JanChart.setXMLData('<chart caption="Sales Summary" subCaption="January" xAxisName="Week" yAxisName="Sales" numberPrefix="$" useRoundEdges="1"><set label="Week 1" value="24400" /><set label="Week 2" value="29600" /><set label="Week 3" value="34000" /><set label="Week 4" value="45700" /></chart>');
JanChart.render("chartContainerJan");
var JanGrid = new FusionCharts("../../Charts/SSGrid.swf", "JanGridId", "400", "300", "0");
JanGrid.setXMLData('<chart caption="Sales Summary" subCaption="January" xAxisName="Week" yAxisName="Sales" numberPrefix="$" useRoundEdges="1"><set label="Week 1" value="24400" /><set label="Week 2" value="29600" /><set label="Week 3" value="34000" /><set label="Week 4" value="45700" /></chart>');
JanGrid.render("gridContainerJan");
var FebChart = new FusionCharts("../../Charts/Column2D.swf", "FebChartId", "400", "300", "0");
FebChart.setXMLData('<chart caption="Sales Summary" subCaption="February" xAxisName="Week" yAxisName="Sales" numberPrefix="$" useRoundEdges="1"><set label="Week 1" value="41400" /><set label="Week 2" value="91600" /><set label="Week 3" value="42000" /><set label="Week 4" value="51700" /></chart>');
FebChart.render("chartContainerFeb");
var MarChart = new FusionCharts("../../Charts/Pie3D.swf", "MarChartId", "400", "300", "0");
MarChart.setXMLData('<chart caption="Sales Summary" subCaption="March" xAxisName="Week" yAxisName="Sales" numberPrefix="$" useRoundEdges="1"><set label="Week 1" value="41400" /><set label="Week 2" value="61900" /><set label="Week 3" value="32400" /><set label="Week 4" value="71500" /></chart>');
MarChart.render("chartContainerMarch");
// -->
</script>
</body>
</html></pre>
<br />
See it <a href="../../Code/MyFirstChart/weekly-sales-multiple-charts-dataxml.html" target="_blank">live</a>!
</div>
</div>
</td>
</tr>
</table>
<!-- footer links starts-->
<div id="fcfooter"></div>
<script type="text/javascript">
document.getElementById("fcfooter").innerHTML = addFCFooter("Creating Scatter and Bubble charts|ScatterandBubbleChart.html","Creating chart using data from Forms|UsingDataForm.html");
</script>
<!-- footer links ends -->
<script type="text/javascript" language="javascript1.2">//<![CDATA[
<!--
highlightSearch();
//-->
//]]></script>
</body>
</html>