$zoop->addComponent('chart');//automatically includes graphic

function pageTestChart($p)
{
	$gui = &new SmartPdf(1/* create a new pdf context */, 'wide'/* or tall */);
	$gui->addDivParser(new ChartParser());
	$gui->addParser(new ChartObjectParser());
	$gui->assign('data', array(
				1 => array(
					'color' => '#FF0000',
					'name' => 'Rent',
					'amount' => 1200,
					'spent' => 1200),
				2 => array(
					'color' => '#00FF00',
					'name' => 'Food',
					'amount' => 400,
					'spent' => 353.29),
				3 => array(
					'color' => '#0000FF',
					'name' => 'Utilities',
					'amount' => 200,
					'spent' => 239.22)
				));
	if(!isset($p[1]) || $p[1] == 'pie')
		$gui->display('budget/testChart.tpl');
	else
		$gui->display('budget/testBarChart.tpl');
}

<div style="font-size: 14pt; text-align: center; font-weight: bold">Jan 2008</div>
<table>
	<tr>
		<td>
			<div style="font-size: 12pt; text-align: center; font-weight: bold">Budget</div>
			{* possible chart tags are piechart, horizontalbarchart, verticalbarchart, percenthorizontalbarchart, linechart(which is unstable) *}
			<piechart style="border: 0" depth="20"{* depth is for 3D *}>
				{foreach from=$data key="id" item="cat"}
					<chartdata text="{$cat.name}" value="{$cat.amount}" color="{$cat.color}" url="javascript: viewSummary('{$cat.name}', 'budgeted')"/>
				{/foreach}
				<div style="border: 0; text-align:center">
					<div width="250" style="border: 0;">
						<chartplot height="195"/>
					</div>
				</div>
				<div style="border: 0;text-align:center; height: 30">
					<chartstring text="Total Budget = %n" />
				</div>
				<div style="border: 0;text-align:center">
					<chartlegend/>
				</div>
			</piechart>
		</td>
		<td>
			<div style="font-size: 12pt; text-align: center; font-weight: bold">Budget</div>
			<piechart style="border: 0" depth="20">
				{foreach from=$data key="id" item="cat"}
					<chartdata text="{$cat.name}" value="{$cat.spent}" color="{$cat.color}" url="javascript: viewSummary('{$cat.name}', 'budgeted')"/>
				{/foreach}
				<div style="border: 0; text-align:center">
					<div width="250" style="border: 0;">
						<chartplot height="195"/>
					</div>
				</div>
				<div style="border: 0;text-align:center; height: 30">
					<chartstring text="Total Budget = %n" />
				</div>
				<div style="border: 0;text-align:center">
					<chartlegend/>
				</div>
			</piechart>
		</td>
	</tr>
</table>

<div style="font-size: {cycle values="14pt,12pt,10pt"}; text-align: center; font-weight: bold">Budget and Expenses for Jan 2008</div>
{*grouping determines how each chart group is displayed. "side" means draw the bars side by side. "simple" means stack bars on top of one another*}
<verticalbarchart grouping="side" style="border: 0">
	{* each chart cat will be displayed side by side for each group of data *}
	<chartcat name="budgeted" text="Budgeted Funds" color="#0000FF"/>
	<chartcat name="expenses" text="Expenses" color="#FF0000"/>
	{foreach from=$data key="id" item="cat"}
		{* each group of data should have at least one data point for each category(but it is not required) *}
		<chartgroup name="{$cat.name}" text="{$cat.name}" color="{$cat.color}"/>
		{* each chartdata describes one bar *}
		<chartdata category="expenses" group="{$cat.name}" 
					value="{$cat.spent}" url="javascript: popup('expenses', 'taxes')"/>
		<chartdata category="budgeted" group="{$cat.name}" 
					value="{$cat.amount}" url="javascript: popup('budgeted', 'taxes')"/>
	{/foreach}
	<div style="border: 0;text-align:center">
		<div width="750" style="border: 0">
			<chartplot height="350" depthvector="0,0"/>
		</div>
	</div>
	<div style="height: 10"/>
	<div style="border: 0;text-align:center">
		<chartlegend/>
	</div>
	<div style="height: 10"/>
	<div style="font-size: 12pt; text-align: center; font-weight: bold">Printed {$smarty.now|date_format:"%A, %B %e, %Y"}</div>
</verticalbarchart>