using.xhtml

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui" template="/commons/template.xhtml">

    <ui:define name="head">
		 <h:outputScript name="js/jqplot.enhancedLegendRendererCustom.js" library="default" />
	</ui:define>
	<ui:define name="content">
		<div class="layout-portlets-box">
			<div class="Container100" >
				<h:form enctype="multipart/form-data" id="frmGrafics">
					<div class="Container50">
						 <h:panelGrid columns="1" cellpadding="5">
							<p:chart id="lineChart" responsive="true" widgetVar="lineChart"  type="line" 
								model="#{controller.dateModel}" style="width:600px;height:500px"/>

							<script type="text/javascript">
								function setLegend() {
								
									this.cfg.legend = {
										  renderer: $.jqplot.EnhancedLegendRendererCustom,
										  symbolMarkers:true,
										  showSwatches:true,
										  placement: 'outsideGrid',
										  rendererOptions: {
											numberColumns: 6
										  },
										  show: true,
										  location: "s"
									};

								 }
							</script>
						 </h:panelGrid>
						</div>
				</h:form>
			</div>
		</div>
	</ui:define>
</ui:composition>