A snippet from a JSF XHTML page used to create a Highchart chart using JSF.

nzPopulationMakeUp.xhtml

        <!-- Note: I tried to include these scripts within the composite component XHTML pages 
        (where they belong), but I got JSF errors (apparently, a Bug in latest Mojarra JSF).-->
        <h:outputScript library="javascript/highcharts/js/" name="highcharts.js" target="head" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
    </h:head>
    <h:body>
        <h1>New Zealand National Ethnic Population Projections</h1>
        <div id="subtitle">
        Projections for the New Zealand Population makeup for the year 2026 using 
        data from 2006. For more information, see
        <a href="http://www.stats.govt.nz/browse_for_stats/population/estimates_and_projections/NationalEthnicPopulationProjections_HOTP2006-26.aspx">the full report</a>
        from Statistics New Zealand. 2006 estimates are shown for comparison.
        </div>
        
        <h:panelGroup layout="block" styleClass="graph">
            <hc:Chart title="New Zealand Nation Ethnic Population Estimates for 2006" xLabel="Age Groups (Years)" yLabel="Percentage of Total Population">
                <hc:ColumnSeries name="NZ European" series="#{nZEthnicPopulation2026.nzEuropeanSeries}" />
                <hc:ColumnSeries name="Maori" series="#{nZEthnicPopulation2006.maoriSeries}"/>
                <hc:ColumnSeries name="Pacific" series="#{nZEthnicPopulation2006.pacificSeries}" />
                <hc:ColumnSeries name="Asian" series="#{nZEthnicPopulation2006.asianSeries}" />
            </hc:Chart>
        </h:panelGroup>  
        
        <h:panelGroup layout="block" styleClass="graph">
            <hc:Chart title="New Zealand Nation Ethnic Population Projections for 2026" xLabel="Age Groups (Years)" yLabel="Percentage of Total Population">
                <hc:ColumnSeries name="NZ European" series="#{nZEthnicPopulation2026.nzEuropeanSeries}" />
                <hc:ColumnSeries name="Maori" series="#{nZEthnicPopulation2026.maoriSeries}"/>
                <hc:ColumnSeries name="Pacific" series="#{nZEthnicPopulation2026.pacificSeries}" />
                <hc:ColumnSeries name="Asian" series="#{nZEthnicPopulation2026.asianSeries}" />
            </hc:Chart>
        </h:panelGroup>
    </h:body>