Question

I can’t seem to get my code to work the way I want. I’m attempting to format charts on a page with JSF templates. I’m using JSF2.0, NetBeans 6.9.1, GlassFish 3.0.1 with Mojarra 2.0.3, and PrimeFaces 2.2. For the template I am using . 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:

<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:

    <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.

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.

Answer 1

I figured out how to re-size the charts, and it has nothing to do with

<style type="text/css">
    .chartClass {
        width: 250px;
        height: 145px;
    }
</style>

I just used the “height” and “width” attributes of the different chart tags. NOTE: for the pie chart tags, only the width seems to work. If I add in the height attribute the chart won’t show. That’s okay though, because the width attribute seems to re-size the whole chart proportionately (which makes sense if you think about it – its a circle). For the other chart types I used both the height an width tags.

I would still like to use the code shown above to resize all charts at the same time, but I’ll work with what I’ve got.