Quick chart_component example

Tue, 03/25/2008 - 15:09 — john

Chart is an extension to the graphic component. By adding a parser as a plugin to the graphic module, you can add pie charts, bar charts, and line charts to your pdfs or images. The bar chart requires some fixes in the latest repository in svn.

includes.php:

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

zone_default.php:

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');
}

testChart.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>

testBarChart.tpl:

<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>