primefaces barChart costum x-axes

Question

I have p:barchart graph in my application similar to the second barchart on the showCase: http://www.primefaces.org/showcase/ui/barChart.jsf

<p:barChart id="horizontal" value="#{chartBean.categoryModel}" legendPosition="se" style="height:300px"  
            title="Horizontal Bar Chart" orientation="horizontal" min="0" max="200"/>

how can I customize the Numbers on my X-axis. I want to format the x-axis to use only Integers.

thanks in advance.

Answer 1

Try this (not tested) :

<p:barChart extender="ext" id="horizontal" value="#{chartBean.categoryModel}" legendPosition="se" style="height:300px"  
    title="Horizontal Bar Chart" orientation="horizontal"/>

In you js add this

function ext() {
   this.cfg.seriesDefaults = { 
       useSeriesColor: true, 
       min: 0, 
       max: 200, 
       tickInterval: 20, 
       tickOptions: { 
           formatString: '%d' 
       } 
   };
}

or this x axis only :

function ext() {
   this.cfg.axes = {
       xaxis:
       {
           tickInterval: 20,
           tickOptions: { 
               formatString: '%d' 
           } 
       }
   };
}

You can try playing with tickInterval ...

---

Straight from the PrimeFaces Userguide

Extender

Charts provide high level access to commonly used jqplot options however there are many more customization options available in jqplot. Extender feature provide access to low level apis to do advanced customization by enhancing this.cfg object, here is an example to increase shadow depth of the line series;

<p:lineChart value="#{bean.model}" extender="ext" />


function ext() {
    //this = chart widget instance
    //this.cfg = options
    this.cfg.seriesDefaults = {
        shadowDepth: 5
    };
}

Refer to jqPlot docs for the documentation of available options; http://www.jqplot.com/docs/files/jqPlotOptions-txt.html Converter

Answer 2

your extender function could be like this

    function customExtender() {
        this.cfg.axes.xaxis.tickOptions = {
            formatString : '%d'
        };
        this.cfg.axes.xaxis.tickInterval = 1;
    }

I had the same problem and this works great, I based on Daniel's Answer and some other code. This way it just format the desired axis, not both.

Answer 3

In you js add this

function ext() {
    this.cfg.axes.xaxis.tickOptions.formatString = '%d';
}

Answer 4

You can set format to axis from your @ManagedBean class using the following code:

Axis xAxis = categoryModel.getAxis(AxisType.X);
xAxis.setTickFormat("%.0f");