File "FirstChart.html"
Full Path: /home/analogde/www/PC-20260403043447/PHPClassAPI/FirstChart.html
File size: 13.96 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 > First Chart </h2></td>
</tr>
<tr>
<td valign="top" class="text">
For a start, let's create a simple chart that will visually depict the Weekly Sales of a fictitious shop. The sample data that we intend to plot can be tabularized as under: </td>
<tr>
<td valign="top" class="text"> </td>
</tr>
<tr>
<td valign="top" class="text">
<table cellspacing="0" cellpadding="5" class="text"width="250px" style="border:1px solid #cccccc;">
<tr style="border-bottom:1px solid #cccccc;">
<td width="35%" height="24" class="textBold borderBottom">Week</td>
<td width="65%" align="right" class="textBold borderBottom">Previous Month (sales) </td>
</tr>
<tr>
<td height="24" class="borderBottom">Week 1 </td>
<td align="right"class="borderBottom">$40800</td>
</tr>
<tr>
<td height="24" class="borderBottom" >Week 2 </td>
<td align="right" class="borderBottom">$31400</td>
</tr>
<tr>
<td height="24" class="borderBottom">Week 3 </td>
<td align="right" class="borderBottom">$26700</td>
</tr>
<tr>
<td height="24" >Week 4 </td>
<td align="right">$54400</td>
</tr>
</table> </td>
</tr>
<tr>
<td valign="top" class="text"> </td>
</tr>
<tr>
<td valign="top" class="text">Let's see how to use FusionCharts PHP Class to plot this data into a column3D chart: </td>
</tr>
<tr>
<td valign="top" class="text"> </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');</p>
<p> <span class="codeComment"> # 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"> # Set chart attributes</span><br />
<span class="codeComment"> </span>$strParam="caption=Weekly Sales;xAxisName=Week;yAxisName=Revenue;numberPrefix=$;decimalPrecision=0;formatNumberScale=1";<br />
<span class="codeComment"> </span>$FC->setChartParams($strParam);<br />
<br />
<span class="codeComment"> # add chart values and category names</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");</p>
<p>?><br />
<html><br />
<span class="codeComment"> </span><head><br />
<span class="codeComment"> </span><title>First Chart Using FusionCharts PHP Class</title><br />
<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 Chart </span><br />
<span class="codeComment"> </span><span class="codeComment"> </span>$FC->renderChart();<br />
<span class="codeComment"> </span>?></p>
<p><span class="codeComment"> </span></body><br />
</html><br />
</p></td>
</tr>
<tr>
<td valign="top" class="text"> </td>
</tr>
<tr>
<td valign="top" class="text"><p>Let's analyze the steps involved in the above code:</p>
<ul type="disc">
<li>We include <span class="codeInline">FusionCharts_Gen.php</span> in the program. This file contains FusionCharts PHP Class codes. <br />
<br />
<span class="codeInline">include('../Class/FusionCharts_Gen.php');</span><br />
<br />
</li>
<li>We create a Column3D chart object.<br />
<br />
<span class="codeInline">$FC = new FusionCharts("Column3D","300","250"); <br />
</span><br />
The constructor of FusionCharts PHP Class is invoked and it initializes chart type, chart width and chart height properties of the object.<br />
<br />
</li>
<li>Next, we set relative path to the chart SWF files using <span class="codeInline">setSwfPath()</span> function. This is the path from which we load the chart SWF files. <br />
<br />
<span class="codeInline">$FC->setSWFPath("../FusionCharts/");</span><br />
<br />
</li>
<li>We store all desired chart attributes in the <span class="codeInline">$strParam</span> variable and set chart attributes using <span class="codeInline">setChartParams()</span> function.<br />
<br />
<span class="codeInline">$FC->setChartParams($strParam);</span><br />
<br />
</li>
<li>Now, we provide chart data with <span class="codeInline">addChartData()</span> function.We pass the value first and then the category name against each value as a parameter i.e., <span class="codeInline">name=Week 1</span> etc. <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>Finally, we include <span class="codeInline">FusionCharts.js</span> - FusionCharts JavaScript Embedding Class.<br />
<br />
</li>
<li>And display the chart using <span class="codeInline">renderChart()</span> function.<br />
<br />
<span class="codeInline">$FC->renderChart();</span></li>
</ul></td>
</tr>
<tr>
<td valign="top" class="text"> </td>
</tr>
<tr>
<td valign="top" class="text">Here is the Column 3D chart that our FusionCharts PHP Class renders: </td>
</tr>
<tr>
<td valign="top" class="text"><img src="Images/PHPClassFirstChart.jpg" width="298" height="250" class="imageBorder" /></td>
</tr>
<tr>
<td valign="top" class="text"> </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="header">How to change chart width and chart height? </td>
</tr>
<tr>
<td valign="top" class="text"> </td>
</tr>
<tr>
<td valign="top" class="text"><p>When we declare an object of FusionCharts PHP Class the constructor is invoked. This constructor accepts the parameters that sets the chart type, chart width and height.</p>
<p>In the code above the statement <span class="codeInline">$FC = new FusionCharts("Column3D",<strong>"300","250"</strong>);</span> invokes the constructor which sets chart type as Column3D; width to 300 pixels and height to 250 pixels. <br />
<br />
Hence we can use this to set the desired dimension of our charts. Let's set our chart's dimension to 450 x 350 pixels. </p> </td>
</tr>
<tr>
<td valign="top" class="codeInline"> </td>
</tr>
<tr>
<td valign="top" class="codeInline">$FC = new FusionCharts("Column3D",<strong>"450","350"</strong>); </td>
</tr>
<tr>
<td valign="top" class="text"> </td>
</tr>
<tr>
<td valign="top" class="text"><img src="Images/PHPClassFirstChartChangeSize.jpg" width="428" height="345" class="imageBorder" /></td>
</tr>
<tr>
<td valign="top" class="text"> </td>
</tr>
<tr>
<td valign="top" class="header">How to change chart type? </td>
</tr>
<tr>
<td valign="top" class="text"> </td>
</tr>
<tr>
<td valign="top" class="text">As we discussed above chart type is also determined while declaring FusionCharts PHP Class object. <br />
<br />
<span class="codeInline">$FC = new FusionCharts(<strong>"Column3D"</strong>,"300","250");</span><br />
<br />
To make a Pie Chart for our Weekly Revenue data, we have to use the following specification while creating FusionCharts class object: <br />
<br />
<span class="codeInline">$FC = new FusionCharts(<strong>"Pie3D"</strong>,"300","250"); </span></td>
</tr>
<tr>
<td valign="top" class="text"> </td>
</tr>
<tr>
<td valign="top" class="text"><img src="Images/PHPClassChangeChart.jpg" width="291" height="194" class="imageBorder" /></td>
</tr>
<tr>
<td valign="top" class="text"> </td>
</tr>
<tr>
<td valign="top" class="text"><a name="ChartTypesList" href="Javascript:void(0);"> </a>To change chart type you can use any of the Chart Type names listed below : </td>
</tr>
<tr>
<td valign="top" class="text"><table width="432" border="0" cellpadding="5" cellspacing="0" class="text" style="border:1px solid #cccccc;">
<tr>
<td width="152" class="textBold borderBottom">Chart Type</td>
<td width="260" class="textBold borderBottom">Description</td>
</tr>
<tr>
<td class="borderBottom">Column2D</td>
<td class="borderBottom">Single Series Column 2D Chart </td>
</tr>
<tr>
<td class="borderBottom">Column3D</td>
<td class="borderBottom">Single Series Column 3D Chart</td>
</tr>
<tr>
<td class="borderBottom">Line</td>
<td class="borderBottom">Single Series Line Chart</td>
</tr>
<tr>
<td class="borderBottom">Pie3D</td>
<td class="borderBottom">Single Series Pie 3D Chart</td>
</tr>
<tr>
<td class="borderBottom">Pie2D</td>
<td class="borderBottom">Single Series Pie 2D Chart</td>
</tr>
<tr>
<td class="borderBottom">Bar2D</td>
<td class="borderBottom">Single Series Bar 2D Chart</td>
</tr>
<tr>
<td class="borderBottom">Area2D</td>
<td class="borderBottom">Single Series Area 2D Chart</td>
</tr>
<tr>
<td class="borderBottom">Doughnut2D</td>
<td class="borderBottom">Single Series Doughnut 2D Chart</td>
</tr>
<tr>
<td class="borderBottom">MSColumn3D</td>
<td class="borderBottom">Multi-Series Column 3D Chart</td>
</tr>
<tr>
<td class="borderBottom">MSColumn2D</td>
<td class="borderBottom">Multi-Series Column 2D Chart</td>
</tr>
<tr>
<td class="borderBottom">MSArea2D</td>
<td class="borderBottom">Multi-Series Column 2D Chart</td>
</tr>
<tr>
<td class="borderBottom">MSLine</td>
<td class="borderBottom">Multi-Series Line Chart</td>
</tr>
<tr>
<td class="borderBottom">MSBar2D</td>
<td class="borderBottom">Multi-Series Bar Chart</td>
</tr>
<tr>
<td class="borderBottom">StackedColumn2D</td>
<td class="borderBottom">Stacked Column 2D Chart </td>
</tr>
<tr>
<td class="borderBottom">StackedColumn3D</td>
<td class="borderBottom"> Stacked Column 3D Chart</td>
</tr>
<tr>
<td class="borderBottom">StackedBar2D</td>
<td class="borderBottom"> Stacked Bar 2D Chart</td>
</tr>
<tr>
<td class="borderBottom">StackedArea2D</td>
<td class="borderBottom"> Stacked Area 2D Chart</td>
</tr>
<tr>
<td class="borderBottom">MSColumn3DLineDY</td>
<td class="borderBottom">Combination Dual Y Chart<br />
(Column 3D + Line) </td>
</tr>
<tr>
<td>MSColumn2DLineDY</td>
<td>Combination Dual Y Chart<br />
(Column 2D + Line) </td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>