chart extender not executing after ajax update[workaround]

[spikkel]

I use ajax to drill down through a set of charts.
Once the user clicks on the last chart, values are reset and the initial chart is re-rendered.
My problem is that I use an extender function to render the charts legend, which works when it renders initially on page load, but the legend of the top bar chart fails to render subsequently after the user has clicked through all 3 charts and returns to the first chart.

It worked perfectly when I used the p:barChart tag up to primeface 5.0 and specified the extender in the tag. I had to change it to p:chart as part of the upgrade to 5.1 and now I have this regression.

Code examples:

Code: Select all

<p:column rowspan="6" style="text-align:center;" styleClass="headingMedium">
                                            <p:outputPanel id="UseChartPanel">
                                                <p:chart type="bar" id="usageStackChart" model="#{costFlowBean.barModelUsage}" style="height:220px;width:420px" 
                                                         rendered="#{empty costFlowBean.pieTopMercs and empty costFlowBean.pieTopRegs}">
                                                    <p:ajax event="itemSelect" listener="#{costFlowBean.itemSelectUse}" update=":costFlowForm:UseChartPanel :costFlowForm:MercChartPanel :costFlowForm:RegChartPanel" />
                                                </p:chart>
                                            </p:outputPanel>
                                            <p:outputPanel id="MercChartPanel">
                                                <p:chart id="topMercsPieChart" type="pie" model="#{costFlowBean.pieTopMercs}" style="height:260px;width:420px" 
                                                         rendered="#{not empty costFlowBean.pieTopMercs and empty costFlowBean.pieTopRegs}">
                                                    <p:ajax event="itemSelect" listener="#{costFlowBean.itemSelectMerc}" update=":costFlowForm:UseChartPanel :costFlowForm:MercChartPanel :costFlowForm:RegChartPanel" />
                                                </p:chart>
                                            </p:outputPanel>
                                            <p:outputPanel id="RegChartPanel">
                                                <p:chart id="topRegsPieChart" type="pie" model="#{costFlowBean.pieTopRegs}" style="height:260px;width:420px" 
                                                         rendered="#{not empty costFlowBean.pieTopMercs and not empty costFlowBean.pieTopRegs}">
                                                    <p:ajax event="itemSelect" listener="#{costFlowBean.resetToTop}" update=":costFlowForm:UseChartPanel :costFlowForm:MercChartPanel :costFlowForm:RegChartPanel"/>
                                                </p:chart>
                                            </p:outputPanel>
                                        </p:column>

Extender script in page

Code: Select all

<script>
                    function extLegend() 
                    {
                        this.cfg.legend= {
                            show: true,
                            location: 'ne',
                            placement: 'outsideGrid'
                        };
                        
                    }
                </script>

Extender is set in the model

Code: Select all

getBarModelUsage().setTitle("Usage");
        getBarModelUsage().setLegendPosition("ne");
        getBarModelUsage().setStacked(true);
        getBarModelUsage().setShowDatatip(true);
        getBarModelUsage().setExtender("extLegend");

Reset function used to re-render top chart

Code: Select all

public void resetToTop(ItemSelectEvent event) {
        setPieTopMercs(null);
        setPieTopRegs(null);
        setDrilldownCatDesc(null);
        setDrilldownCats(null);
        setDrilldownMerc(0);
        setDrilldownPeriod(null);
        setDrilldownReg(null);
        setDrilldownMercDesc(null);
    }

Page code used up to 5.0 with p:barChart that worked:

Code: Select all

<p:column rowspan="6" style="text-align:center;" styleClass="headingMedium">
                                            <p:outputPanel id="UseChartPanel">
                                                <p:barChart id="usageStackChart" value="#{costFlowBean.barModelUsage}" style="height:220px;width:420px" stacked="true" 
                                                            rendered="#{empty costFlowBean.pieTopMercs and empty costFlowBean.pieTopRegs}" extender="extLegend" showDatatip="true" title="Usage">
                                                    <p:ajax event="itemSelect" listener="#{costFlowBean.itemSelectUse}" update=":costFlowForm:UseChartPanel :costFlowForm:MercChartPanel :costFlowForm:RegChartPanel" />
                                                </p:barChart>
                                            </p:outputPanel>
                                            <p:outputPanel id="MercChartPanel">
                                                <p:chart id="topMercsPieChart" type="pie" model="#{costFlowBean.pieTopMercs}" style="height:260px;width:420px" 
                                                         rendered="#{not empty costFlowBean.pieTopMercs and empty costFlowBean.pieTopRegs}">
                                                    <p:ajax event="itemSelect" listener="#{costFlowBean.itemSelectMerc}" update=":costFlowForm:UseChartPanel :costFlowForm:MercChartPanel :costFlowForm:RegChartPanel" />
                                                </p:chart>
                                            </p:outputPanel>
                                            <p:outputPanel id="RegChartPanel">
                                                <p:chart id="topRegsPieChart" type="pie" model="#{costFlowBean.pieTopRegs}" style="height:260px;width:420px" 
                                                         rendered="#{not empty costFlowBean.pieTopMercs and not empty costFlowBean.pieTopRegs}">
                                                    <p:ajax event="itemSelect" listener="#{costFlowBean.resetToTop}" update=":costFlowForm:UseChartPanel :costFlowForm:MercChartPanel :costFlowForm:RegChartPanel" />
                                                </p:chart>
                                            </p:outputPanel>
                                        </p:column>

Any idea what I can try / what I'm missing?

[spikkel]

This is not due to the extender function.

I removed the extender and the bar chart legend renders the first time, but not when it is re-rendered after the user clicked through the pie charts and the resetToTop() is called. Strangely enough, the pie chart legends render every time.

[spikkel]

I found the source of the problem, which I can work around for now.

Code: Select all

Initial request
$(function(){PrimeFaces.cw('Chart','widget_usageStackChart',{id:'usageStackChart',type:'bar',data:[[0.0,942513.67,925986.82,1021686.74,0.0],[0.0,1489.0,1767.35,2653.95,0.0],[0.0,110.0,0.0,0.0,0.0],[0.0,28215.11,32149.18,41840.67,0.0]],title:"Usage",legendPosition:"ne",axes:{yaxis: {label:"Amount",min:0,renderer:$.jqplot.LinearAxisRenderer,tickOptions:{angle:"0"},numberTicks:6},xaxis: {label:"Period",renderer:$.jqplot.CategoryAxisRenderer,tickOptions:{angle:"30"}}},series:[{label:'Fuel'},{label:'Oil'},{label:'Maint'},{label:'Toll'}],ticks:["Current","2014-Apr","2014-Mar","2014-Feb","Average"],orientation:"vertical",stackSeries:true,datatip:true,behaviors:{itemSelect:function(ext) {PrimeFaces.ab({s:'usageStackChart',e:'itemSelect',p:'usageStackChart',u:'UseChartPanel MercChartPanel RegChartPanel'},ext);}}},'charts');});
After re-render
$(function(){PrimeFaces.cw('Chart','widget_usageStackChart',{id:'usageStackChart',type:'bar',data:[[0.0,942513.67,925986.82,1021686.74,0.0],[0.0,1489.0,1767.35,2653.95,0.0],[0.0,110.0,0.0,0.0,0.0],[0.0,28215.11,32149.18,41840.67,0.0]],axes:{yaxis: {label:"Amount",min:0,renderer:$.jqplot.LinearAxisRenderer,tickOptions:{angle:"0"},numberTicks:6},xaxis: {label:"Period",renderer:$.jqplot.CategoryAxisRenderer,tickOptions:{angle:"30"}}},series:[{label:'Fuel'},{label:'Oil'},{label:'Maint'},{label:'Toll'}],ticks:["Current","2014-Apr","2014-Mar","2014-Feb","Average"],orientation:"vertical",stackSeries:true,datatip:true,behaviors:{itemSelect:function(ext) {PrimeFaces.ab({s:'usageStackChart',e:'itemSelect',p:'usageStackChart',u:'UseChartPanel MercChartPanel RegChartPanel'},ext);}}},'charts');});

Looking at the code served before and after, the re-render was missing this bit: title:"Usage",legendPosition:"ne",

Debugging in Java showed that the Title, LegendPosition and Extender values were all null in the barchart model after each ajax request.
I can get it to work by setting the values at the end of each ajax method call using the code below, but clearly that is not ideal.

Code: Select all

getBarModelUsage().setTitle("Usage");
getBarModelUsage().setLegendPosition("ne");
getBarModelUsage().setExtender("extLegend");

The boolean values that are set for the model (shown below) are not lost.
getBarModelUsage().setStacked(true);
getBarModelUsage().setShowDatatip(true);

Anyone have an idea why some values are lost in the model after each ajax request?

[kukeltje]

Anyone have an idea why some values are lost in the model after each ajax request?

Most likely a regression/omission when the new model thing was introduced... Please file an issue

[lethal.industry]

Same problem with LinesChart.

I tryed put some System.out in encodeOptions method contained in LineRenderer.java
but model.getExtender() and model.getTitle() arrive null