{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)
			barAgeChart();
		else
			return true;
	});
	function pieAgeChart(){
		$("#ageProfile").html('');
 		var arr1 = '{/literal}{section name=s1 loop=$sm.arr}
					{assign var=x value=$sm.arr[s1]}{$x.1},{/section}{literal}';
     var json_arrb = arr1.split(",")[0];
     var json_arrb1 = arr1.split(",")[1];
     var json_arrb2 = arr1.split(",")[2];
     var json_arrb3 = arr1.split(",")[3];
     var json_arrb4 = arr1.split(",")[4];
     var json_arrb5 = arr1.split(",")[5];
	var ageData = [['18-25',+json_arrb], ['26-35',+json_arrb1],['26-35',+json_arrb1],['36-45',+json_arrb2],['46-55',+json_arrb3],['56-65',+json_arrb4],['66-up',+json_arrb5]];
		var agePlot = $.jqplot('ageProfile', [ageData], {
			title:'Age Pie Chart',
			grid: {
			    drawBorder: true,
			    drawGridlines: true,
			    background: '#ffffff',
			    shadow:true
			},
			axesDefaults: {

			},
			seriesDefaults:{
			    renderer:$.jqplot.PieRenderer,
			    rendererOptions: {
    fill: false,
          showDataLabels: true,
          // Add a margin to seperate the slices.
          sliceMargin: 4,
          // stroke the slices with a little thicker line.
          lineWidth: 5
			    }
			},
			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 arr1 = '{/literal}{section name=s1 loop=$sm.arr}
					{assign var=x value=$sm.arr[s1]}{$x.1},{/section}{literal}';
  var json_arrb = arr1.split(",")[0];
  var json_arrb1 = arr1.split(",")[1];
  var json_arrb2 = arr1.split(",")[2];
  var json_arrb3 = arr1.split(",")[3];
  var json_arrb4 = arr1.split(",")[4];
  var json_arrb5 = arr1.split(",")[5];
        var ageData = [['18-25',+json_arrb], ['26-35',+json_arrb1],['26-35',+json_arrb1],['36-45',+json_arrb2],['46-55',+json_arrb3],['56-65',+json_arrb4],['66-up',+json_arrb5]];
		var agePlot = $.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>
			</tr>

   	<tr><td align=center>
			<font size='2'>

        <div class="smlest_box">
                <div class="top"></div>
                <div class="mdl">
                        <div class="clear"></div>
                        <div class="a_cont wid84smlst">
					{section name=s1 loop=$sm.arr}
					{assign var=x value=$sm.arr[s1]}
				{$x.0} :&nbsp;{$x.1}<br>
					{/section}

                        </div>
                </div>
                <div class="btm"></div>
        </div>

		</tr>
	</table>
{else}
	<div>Employee not found</div>
{/if}