{literal}
<link rel="stylesheet" type="text/css" href="##LBL_SITE_URL##templates/css_theme/jquery.jqplot.css" />
<!-- BEGIN: load jqplot -->
<script language="javascript" type="text/javascript" src="##LBL_SITE_URL##templates/flexyjs/jquery.jqplot.js"></script>
<script language="javascript" type="text/javascript" src="##LBL_SITE_URL##templates/flexyjs/jqplot.pieRenderer.js"></script>
<script language="javascript" type="text/javascript" src="##LBL_SITE_URL##templates/flexyjs/jqplot.categoryAxisRenderer.js"></script>
<script language="javascript" type="text/javascript" src="##LBL_SITE_URL##templates/flexyjs/jqplot.barRenderer.js"></script>

<script type="text/javascript" src="##JS_PATH##libsext/jquery/json.js"></script>
<!-- END: load jqplot -->
<script type="text/javascript">
	$(document).ready(function(){
		var arr = '{/literal}{$sm.x}{literal}';
		if(arr)
			pieAgeChart();
		else
			return true;
	});
	function pieAgeChart(){
		$("#ageProfile").html('');
		var arr = '{/literal}{$sm.x}{literal}';
		var json_arr = $.parseJSON(arr);
		var ageData = new Array();
		for(i in json_arr){
			var c1 = 0,c2 = 0;
			ageData[i] = new Array();
			ageData[i][c1++] = json_arr[i][c2++];
			ageData[i][c1++] = json_arr[i][c2++];
		}
		var agePlot = $.jqplot('ageProfile', [ageData], {
			title:'Age Pie Chart',
			grid: {
			    drawBorder: true, 
			    drawGridlines: true,
			    background: '#ffffff',
			    shadow:true
			},
			axesDefaults: {
			    
			},
			seriesDefaults:{
			    renderer:$.jqplot.PieRenderer,
			    rendererOptions: {
				showDataLabels: true
			    }
			},
			legend: {
			    show: true,
			    rendererOptions: {
				numberRows: 2
			    },
			    location: 's'
			}
		});
		$("#ageBarPie").html('Click here for <a href="javascript:void(0);" onclick="barAgeChart()">Age Bar Chart</a>');
	}

	function barAgeChart(){
		$("#ageProfile").html('');
		var arr = '{/literal}{$sm.x}{literal}';
		var json_arr = $.parseJSON(arr);
		var ageData = new Array();
		for(i in json_arr){
			var c1 = 0,c2 = 0;
			ageData[i] = new Array();
			ageData[i][c1++] = json_arr[i][c2++];
			ageData[i][c1++] = json_arr[i][c2++];
		}
		 gender = $.jqplot('ageProfile', [ageData], {
		    title:'Age Bar Chart',
		     seriesDefaults:{
		       renderer:$.jqplot.BarRenderer, 
		       rendererOptions:{
		         barWidth:25, 
		         barPadding:-15, 
		         barMargin:15, 
		         barDirection: 'vertical',
		         varyBarColor: true
		       }, 
		       shadow:true
		     },
		     legend: {show:false},
		     axes:{
		         yaxis:{min:0, tickOptions: {formatString: '%.0f',showGridLine: true}},
		         xaxis:{show: true, renderer: $.jqplot.CategoryAxisRenderer,
		                    tickOptions: {show: true, showLabel: false},
		                    showTicks: false}
		         }
		 });
		$("#ageBarPie").html('Click here for <a href="javascript:void(0);" onclick="pieAgeChart()">Age Pie Chart</a>');
	}
</script>
{/literal}
{if $sm.x}
	<table>	
		<tr>
			<td>
				<div id="ageProfile" style="margin-top:20px; margin-left:20px; width:330px; height:370px; position:relative; z-index:0;"></div>
				<div id="ageBarPie" style="margin-top:10px;margin-left:20px;"></div>
			</td>
			<td>
				<table>
					{section name=s1 loop=$sm.arr}
					{assign var=x value=$sm.arr[s1]}
					<tr>
					    <td><font size='4'>{$x.0} :&nbsp;&nbsp;&nbsp;{$x.1}</font></td>
					</tr>
					{/section}
				</table>
			</td>
		</tr>
	</table>
{else}
	<div>Employee not found</div>
{/if}