PrimeFaces 3.4 Charts datatipFormat

Question

today I wanted to try the new PrimeFaces release 3.4.RC1. For charts there is a new attribute called datatipFormat.

I want to show only the value (y-axis) in a line chart as datatip. Like this:

<p:lineChart value="#{...}" datatipFormat="y-value"/>

What do I have to do to show only this? I could not find an example with a template String.

Best Regards Veote

Answer 1

Tip for BarChartModel():

public String getDatatipFormatX() {
    return "<font size=4 color=blue><span style=\"display:none;\">%s</span><span>%s</span></font>";
}

Tip for HorizontalBarChartModel():

public String getDatatipFormatY() {
    return "<font size=4 color=blue><span>%s</span><span style=\"display:none;\">%s</span></font>";
}

Examples of usage:

private void MyCharts(){

//get data (from database, for example) to be displayed

myBarChartModel = new BarChartModel();
myHorizontalBarChartModel = new HorizontalBarChartModel();

ChartSeries verticalSeries = new ChartSeries("verticalSeries");
ChartSeries horizontalSeries = new ChartSeries("horizontalSeries");

myBarChartModel.addSeries(verticalSeries);
myHorizontalBarChartModel.addSeries(horizontalSeries);

myBarChartModel.setDatatipFormat(getDatatipFormatX());
myHorizontalBarChartModel.setDatatipFormat(getDatatipFormatY());
//other chart settings...

}

Then, in JSF page:

<p:chart type="bar" model="#{chartBean.myBarChartModel}" />
<p:chart type="bar" model="#{chartBean.myHorizontalBarChartModel}" />

Answer 2

Primefaces uses a jqPlot Library for Charts. There I found the following entry:

Highlighter.formatString

I tried (example from Primefaces Showcase):

   <p:lineChart  id="basic" value="#{userBean.categoryModel}" legendPosition="ne" 
   datatipFormat="#{userBean.datatipFormat}"  title="Basic Bar Chart" min="0"
    max="200" style="height:300px"/>

UserBean

public String getDatatipFormat(){
   return "<span style=\"display:none;\">%s</span><span>%s</span>";
}

and with this little trick is only y-axis displays.

Answer 3

You can use the extender property of all PrimeFaces chart tags to override default plot options. Example:

<script type="text/javascript">
  function customExtender() {
    this.cfg.highlighter = {
      useAxesFormatters: false,
      tooltipAxes: 'y'
    }
  }
</script>
...
<p:lineChart extender="customExtender" value="..." />

Other available jqplot options can be found here: http://www.jqplot.com/docs/files/jqPlotOptions-txt.html but please note that the document says it is out of date.

Answer 4

datatipFormat uses sprintf to format the string for the tooltip, so you can print only the second parameter (y-axis):

<p:lineChart value="#{...}" datatipFormat="%2$d"/>