File "MultipleCharts.html"
Full Path: /home/analogde/www/PC-20260403043447/PHPClassAPI/MultipleCharts.html
File size: 10.2 KB
MIME-type: text/xml
Charset: utf-8
<?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" type="text/css" href="../Style.css">
</head>
<body>
<table width="98%" border="0" cellspacing="0" cellpadding="3" align="center">
<tr>
<td><h2 class="pageHeader">FusionCharts PHP Class API > Creating multiple charts in one page </h2></td>
</tr>
<tr>
<td valign="top" class="text"><p>While developing web pages or applications, we may need to display multiple charts on the same page. For example, reporting Weekly Sales Qunatity along with Revenue gives us a better insight. Let's see how we can accomplish this using FusionCharts PHP Class. The code below generates two Column 3D charts on the same page. </p> </td>
</tr>
<tr>
<td valign="top" > </td>
</tr>
<tr>
<td valign="top" class="highlightBlock" ><p><strong>Before you go further with this page, we recommend you to please see the previous page "Creating First Chart " as we start off from concepts explained in that page. </strong></p></td>
</tr>
<tr>
<td valign="top" > </td>
</tr>
<tr>
<td valign="top" class="codeBlock"><p><?php</p>
<p> <span class="codeComment"> # Include FusionCharts PHP Class</span><br />
<span class="codeComment"> </span>include('../Class/FusionCharts_Gen.php');<br />
<br />
<br />
<span class="codeComment"> //---------- <strong>Configuring First Chart</strong> ----------//<br />
# Create Column3D chart object </span><br />
<span class="codeComment"> </span>$FC = new FusionCharts("Column3D","300","250"); <br />
<span class="codeComment"> # set the relative path of the swf file</span><br />
<span class="codeComment"> </span>$FC->setSWFPath("../FusionCharts/");<br />
<br />
<span class="codeComment"> # Store chart attributes in a variable </span><br />
<span class="codeComment"> </span>$strParam="caption=Weekly Sales;subcaption=Revenue;xAxisName=Week;yAxisName=Revenue;numberPrefix=$;decimalPrecision=0";<br />
<br />
<span class="codeComment"> # Set chart attributes</span><br />
<span class="codeComment"> </span>$FC->setChartParams($strParam);<br />
<br />
<span class="codeComment"> # Add chart values and category names for the First Chart</span><br />
<span class="codeComment"> </span>$FC->addChartData("40800","name=Week 1");<br />
<span class="codeComment"> </span>$FC->addChartData("31400","name=Week 2");<br />
<span class="codeComment"> </span>$FC->addChartData("26700","name=Week 3");<br />
<span class="codeComment"> </span>$FC->addChartData("54400","name=Week 4");<br />
<span class="codeComment"> //--------------------------------------------------------- </span></p>
<p><span class="codeComment"> //---------- <strong>Configuring Second Chart</strong> ----------//<br />
# Create another Column3D chart object</span><br />
<span class="codeComment"> </span>$FC2 = new FusionCharts("Column3D","300","250"); <br />
<span class="codeComment"> # set the relative path of the swf file</span><br />
<span class="codeComment"> </span>$FC2->setSWFPath("../FusionCharts/");<br />
<br />
<span class="codeComment"> # Store chart attributes in a variable </span><br />
<span class="codeComment"> </span>$strParam="caption=Weekly Sales;subcaption=Quantity;xAxisName=Week;yAxisName=Quantity;decimalPrecision=0";</p>
<p> <span class="codeComment"> # Set chart attributes</span><br />
<span class="codeComment"> </span>$FC2->setChartParams($strParam);<br />
<br />
<span class="codeComment"> # Add chart values and category names for the second chart</span><br />
<span class="codeComment"> </span>$FC2->addChartData("32","name=Week 1");<br />
<span class="codeComment"> </span>$FC2->addChartData("35","name=Week 2");<br />
<span class="codeComment"> </span>$FC2->addChartData("26","name=Week 3");<br />
<span class="codeComment"> </span>$FC2->addChartData("44","name=Week 4");<br />
<span class="codeComment"> //--------------------------------------------------------</span></p>
<p>?><br />
<html><br />
<span class="codeComment"> </span><head><br />
<span class="codeComment"> </span><span class="codeComment"> </span><title>First Chart Using FusionCharts PHP Class</title><br />
<span class="codeComment"> </span><span class="codeComment"> </span><script language='javascript' src='../FusionCharts/FusionCharts.js'></script><br />
<span class="codeComment"> </span></head><br />
<span class="codeComment"> </span><body></p>
<p><span class="codeComment"> </span><?<br />
<span class="codeComment"> # Render First Chart</span><br />
<span class="codeComment"> </span><span class="codeComment"> </span>$FC->renderChart();</p>
<p> <span class="codeComment"> # Render Second Chart</span><br />
<span class="codeComment"> </span><span class="codeComment"> </span>$FC2->renderChart();<br />
<br />
<span class="codeComment"> </span>?></p>
<p>
<span class="codeComment"> </span></body><br />
</html></p></td>
</tr>
<tr>
<td valign="top" class="text">Let's go through the steps involved in this code:
<ul type="disc">
<li>Include <span class="codeInline">FusionCharts_Gen.php</span>.<br />
<br />
</li>
<li>Create object for the <strong>First Chart</strong> that shows weekly revenue report.<br />
<br />
<span class="codeInline">$FC = new FusionCharts("Column3D","300","250"); </span><br />
<br />
</li>
<li>Set relative path for the SWF file.<br />
<br />
<span class="codeInline">$FC->setSWFPath("../FusionCharts/");</span><br />
<br />
</li>
<li> Set attributes for the first chart using <span class="codeInline">setChartParams()</span> function. <br />
<br />
<span class="codeInline">$strParam="caption=Weekly Sales;subcaption=Revenue;xAxisName=Week;yAxisName=Revenue;numberPrefix=$;decimalPrecision=0";<br />
$FC->setChartParams($strParam);</span><br />
<br />
</li>
<li>Add data values for this chart.<br />
<br />
<span class="codeInline">$FC->addChartData("40800","name=Week 1");<br />
$FC->addChartData("31400","name=Week 2");<br />
$FC->addChartData("26700","name=Week 3");<br />
$FC->addChartData("54400","name=Week 4");</span><br />
<br />
</li>
<li>Now, the same steps are repeated for the <strong>Second Chart</strong>, i.e., the 'units sold' chart. Create object for this chart.<br />
<br />
<span class="codeInline">$FC2 = new FusionCharts("Column3D","300","250");</span><br />
<br />
</li>
<li>Set relative path for the SWF file.<br />
<br />
<span class="codeInline">$FC2->setSWFPath("FusionCharts/");</span><br />
<br />
</li>
<li>Set attributes for the first chart using <span class="codeInline">setChartParams()</span> function. <br />
<br />
<span class="codeInline">$strParam="caption=Weekly Sales;subcaption=Quantity;xAxisName=Week;yAxisName=Quantity;decimalPrecision=0";<br />
$FC2->setChartParams($strParam);</span><br />
<br />
</li>
<li>Add data values for the second chart.<br />
<br />
<span class="codeInline">$FC2->addChartData("32","name=Week 1");<br />
$FC2->addChartData("35","name=Week 2");<br />
$FC2->addChartData("26","name=Week 3");<br />
$FC2->addChartData("44","name=Week 4");</span><br />
<br />
</li>
<li>Include <span class="codeInline">FusionCharts.js</span>.<br />
<br />
</li>
<li>Finally, render the 2 charts using <span class="codeInline">renderChart()</span> function.<br />
<br />
<span class="codeInline">$FC->renderChart();<br />
$FC2->renderChart();</span><br />
</li>
</ul> </td>
</tr>
<tr>
<td valign="top" class="highlightBlock">Please go through <a href="Functions.html">FusionCharts PHP Class API Reference</a> section to know more about the functions used in the above code. </td>
</tr>
<tr>
<td valign="top" class="text"> </td>
</tr>
<tr>
<td valign="top" class="text">Here is the output. Both the charts have been rendered on same page.</td>
</tr>
<tr>
<td valign="top" class="text"><img src="Images/PHPClassMultiCharts.jpg" class="imageBorder" /> </td>
</tr>
<tr>
<td valign="top" class="text"> </td>
</tr>
</table>
</body>
</html>