Search code examples
javascripthtmljsfprimefacesjqplot

PrimeFaces 5.1 barchart extender in JavaScript

I have tried with this HTML and JavaScript for a bar chat. I am using PrimeFaces 5.1 lib. But the bar graph is not showing.

    <h:panelGrid styleClass="headerPanelGrid">
        <h:outputText value="No Chart To Display For Selected Options" rendered="#{null == jobStatusChart.categoryModel}" style="font-size:20px;" />
        <p:chart type="bar" id="jobStatusBarChart" model="#{jobStatusChart.categoryModel}" showDatatip="false" title="Total No. Of Jobs By Status"
            min="0" max="#{jobStatusChart.total}" style="width:600px;" animate="true" yaxisLabel="Total No. Of Jobs" 
            extender="formatBarChart" rendered="#{null != jobStatusChart.categoryModel}" barMargin="10" barPadding="5" widgetVar="statusChart"/>
    </h:panelGrid>

JavaScript:

 function formatBarChart() {  this.cfg.seriesDefaults = {
    renderer : $.jqplot.BarRenderer,
    rendererOptions : {
        barWidth : 60
    },
    pointLabels : {
        show : true
    },
},

this.cfg.axes.yaxis.tickOptions = {
    formatString : '%d'
},

this.cfg.legend = {
    renderer : $.jqplot.EnhancedLegendRenderer,
    show : true,
    placement : 'outside',
    rendererOptions : {
        seriesToggle : 'normal'
    }
};
}
Solution

  • please read Migration Guide

    and see

    migration guide

    Then re-code the bar chart by studying showcase and user guide

    EDIT: you already have extender="formatBarChart" in your xhtml. if you set model.setExtender("ext") then you need to create javascript function ext() and remove function formatBarChart + extender="formatBarChart" in xhtml. Please read chapter 3.15 in user guide completely then re-ask a new proper question or edit your question properly. Most answers are in showcase, userguide, migration guide, change logs, github and hard-work.