JSF composite component to render a Highchart chart.

ColumnChart.xhtml

    <cc:interface>
        <cc:attribute name="title" default=""/>
        <cc:attribute name="subTitle" default =""/>
        <cc:attribute name="yLabel" default =""/>
        <cc:attribute name="xLabel" default=""/>
        <cc:attribute name="xMinTickInterval" default="0" />
    </cc:interface>

    <cc:implementation>
        <div id="#{cc.id}_chartDiv"/>

        <script type="text/javascript">               
            $(function() {
                // Data must be defined WITHIN the function. This prevents
                // different charts using the same data variables. 
                var options = {
                    credits: {
                        enabled: false
                    },
                    chart: {
                         renderTo: '#{cc.id}_chartDiv',
                         type: 'column',
                         zoomType: 'x',
                         //margin: [50, 50, 100, 80]
                     },
                     title: {
                         text: '#{cc.attrs.title}'
                     },
                     subtitle: {
                         text: '#{cc.attrs.subTitle}'
                     },
                     xAxis: {
                         title: {
                             enabled: true,
                             text: '#{cc.attrs.xLabel}'
                         }, 
                         minTickInterval: #{cc.attrs.xMinTickInterval}
                     },
                     yAxis: {
                         title: {
                             text: '#{cc.attrs.yLabel}'
                         }
                     },
                     legend: {
                         enabled: false
                     }
                };
                <cc:insertChildren />
                // Don't create the chart if there are no series defined.
                if(typeof options.series !== "undefined") {
                    if(options.series.length > 1) {
                        options.legend.enabled = true;
                    }
                    var chart = new Highcharts.Chart(options);
                }
            });
        </script>
    </cc:implementation>