Charts - Export

Charts are canvas based and can be exported as static images with client side api.

Documentation

Chart as an Image
<script type="text/javascript">
			//<![CDATA[
			function exportChart() {
				//export image
				$('#output').empty().append(PF('chart').exportAsImage());

				//show the dialog
				PF('dlg').show();
			}
			//]]>
		</script>

		<p:barChart model="#{chartJsView.barModel}"	style="width: 100%; height: 500px;" widgetVar="chart" />
		 <br />

<p:commandButton type="button" value="Export" icon="pi pi-home" onclick="exportChart()"/>

<p:dialog widgetVar="dlg" showEffect="fade" modal="true" header="Chart as an Image" resizable="false">
    <p:outputPanel id="output" layout="block" style="width:500px;height:300px"/>
</p:dialog>

FREE THEMES

Built-in component themes created by the PrimeFaces Theme Designer.

nova-light Nova-Light
nova-dark Nova-Dark
nova-colored Nova-Colored
luna-blue Luna-Blue
luna-amber Luna-Amber
luna-green Luna-Green
luna-pink Luna-Pink
omega Omega

PREMIUM TEMPLATES

Create awesome applications in no time using the premium templates and impress your users.