CODEWITHSUNDEEP
chartsprimefacesjqplot
BELLIL
BELLIL

Reputation: 765

p:barChart y axis format

I use primefaces 4.0 barchart, but i want to modify some default proprieties. This is my xhtml page

 <p:barChart  id="chart" value="#{marchebean.model}" legendPosition="ne" xaxisLabel="Année" yaxisLabel="Montant en DT" title="Factures payés par années" />

What i want to do

1.I want to separate between hundreds , thousands and millions in y axis by a space i.e changing the format of my numbers , i use NumberFormat.getNumberInstance(Locale.FRANCE).format(mynumber); in java but i don't know how to achieve this with charts in primefaces.

  1. I want to display on the top of every bar the value setted in backing bean and change it's size.

Edit

Separation between thousand done, but i still don't know how display values above every bar or change their size. this is my new code

 <p:barChart  id="chart" value="#{marchebean.model}"  extender="ext"  style="height:600px;" legendPosition="ne" xaxisLabel="Année" yaxisLabel="Montant en DT" title="Factures payés par années" />

<script type="text/javascript">
function ext() {
    this.cfg.axes.yaxis.tickOptions = {
        formatString: "%'i"
    };
    this.cfg.seriesDefaults={
             renderer: $.jqplot.BarRenderer,
            pointLabels:{show:true}

    },

    $.jqplot.sprintf.thousandsSeparator = ' ';
}
</script>

Upvotes: 1

Views: 3022

Answers (1)

Zim
Zim

Reputation: 1483

First question

You can fulfill your need #1 using an extender. Here's the related excerpt from Primefaces' manual regarding extenders:

3.14.15 Extender Chart API 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 the configuration object, here is an example to increase shadow depth of the line series where model's extender property is set to "ext".

<p:chart type="line" model="#{bean.model}" />

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

Refer to jqPlot docs for available options.

Note: in Primefaces 4.0, the extender function name is provided as an attribute of the component tag, eg. <p:barChart extender="ext" .../>

To use whitespaces as thousands separator, use the following extender:

function ext() {
    this.cfg.axes.yaxis.tickOptions = {
        formatString: "%'i"
    };

    $.jqplot.sprintf.thousandsSeparator = ' ';
}

Second question

You will also manage to do it making some tweaking in your extender. For example, the following piece of configuration will display values above every bar:

  seriesDefaults: {
      renderer: $.jqplot.BarRenderer,
      pointLabels:{show:true}
  },

And just use some CSS to change the size!

-- Zim

Upvotes: 1

Related Questions