Chart Skinning Not Working in Layout/Dashboard

[Sean]

I'm attempting to use charts on a page with JSF templates. For the template I am using <p:layout>. I have placed the charts into dashboard panels. The charts themselves show up, but I cannot modify their size, or display the piechart legends. I have put the the style and script tags, shown in the documentation and showcase, on the main template page where the other css references are located. I've used this code:

Code: Select all

<style type="text/css">
            .chartClass {
                width: 250px;
                height: 145px;
            }
        </style>
        <script type="text/javascript">
            var piechartStyle = {
                padding:20,
                legend: {
                    display: "right",
                    spacing:10
                }
            };
        </script>

On the template client page, where I display the charts, this is the code I've used:

Code: Select all

<ui:define name="main_base_content">
                <h:form>
                    <p:dashboard id="board" model="#{dashboardBean.model}">

                        <p:panel id="receipts_chart" header="Receipts Chart" toggleable="true" toggleSpeed="200">
                            <p:pieChart model="#{receiptsChartBean.model}" styleClass="piechartStyle" />
                        </p:panel>
                        <p:panel id="shipments_chart" header="Shipments Chart" toggleable="true" toggleSpeed="200">
                            <p:pieChart model="#{shipmentsChartBean.model}" styleClass="piechartStyle" />
                        </p:panel>

                        <p:panel id="receipts_graph" header="Receipts Graph" toggleable="true" toggleSpeed="200">
                            <p:lineChart model="#{receiptsChartBean.lineModel}" var="line" titleX="Date" titleY="Number of Receipts">
                                <p:chartSeries label="Receipts" value="#{line.receipts}" />
                            </p:lineChart>
                        </p:panel>
                        <p:panel id="shipments_graph" header="Shipments Graph" toggleable="true" toggleSpeed="200">
                            <p:lineChart model="#{shipmentsChartBean.lineModel}" var="line" titleX="Date" titleY="Number of Shipments">
                                <p:chartSeries label="Receipts" value="#{line.receipts}" />
                            </p:lineChart>
                        </p:panel>
                       

                        <p:panel id="volume_received_graph" header="Volume Received - Graph" toggleable="true" toggleSpeed="200">
                            <p:stackedColumnChart model="#{shipmentsChartBean.stackModel}" var="stack" titleX="Date" titleY="Receipts by Weight">
                                <p:chartSeries label="Customer1" value="#{stack.stackedShipments}" />
                                <p:chartSeries label="Customer2" value="#{stack.stackedShipments}" />
                                <p:chartSeries label="Customer3" value="#{stack.stackedShipments}" />
                                <p:chartSeries label="Customer4" value="#{stack.stackedShipments}" />
                            </p:stackedColumnChart>
                        </p:panel>
                        <p:panel id="weight_received_graph" header="Weight Received - Graph" toggleable="true" toggleSpeed="200">
                            <p:stackedColumnChart model="#{receiptsChartBean.stackModel}" var="stack" titleX="Date" titleY="Receipts by Weight">
                                <p:chartSeries label="Customer1" value="#{stack.stackedReceipts}" />
                                <p:chartSeries label="Customer2" value="#{stack.stackedReceipts2}" />
                                <p:chartSeries label="Customer3" value="#{stack.stackedReceipts3}" />
                                <p:chartSeries label="Customer4" value="#{stack.stackedReceipts4}" />
                            </p:stackedColumnChart>
                        </p:panel>
                    </p:dashboard>
                </h:form>
            </ui:define>

The charts are filled with dummy data. They display, but the skinning is not working. I looked at the page with Firebug and see that despite setting the width and height of charts to 250px and 145px respectively, they remain at the default values.

http://www.4shared.com/photo/YZlgaG-3/f ... nshot.html

I'm not sure where I've gone wrong. Do charts not work in layouts and/or dashboards? Oh, I've also tried putting the .chartClass into the cssLayout.css document - that did not work either.