Charts - Interactive

When a series data is clicked, information can be passed to a backing bean using itemSelect ajax behavior.

Documentation
<style type="text/css">
    .right div {
        float: right;
    }
</style>

<h:form>
    <p:growl id="growl" showDetail="true" />

    <h:panelGrid columns="2" columnClasses="left,right" style="width:100%">
        <p:chart type="pie" model="#{chartView.pieModel1}" style="width:400px;height:300px">
            <p:ajax event="itemSelect" listener="#{chartView.itemSelect}" update="growl" />
        </p:chart>

        <p:chart type="bar" model="#{chartView.barModel}" style="width:400px;height:300px">
            <p:ajax event="itemSelect" listener="#{chartView.itemSelect}" update="growl" />
        </p:chart>  
    </h:panelGrid>

</h:form>

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.