Time for action – creating a Bar chart

Let us look at creating a Bar chart with horizontal orientation displaying the number of posts with PrimeFaces and jQuery tags from years 2009 to 2013.

1. Create a Bar chart using horizontal orientation with custom seriesColors and dataTipFormat.

   <p:barChart value="#{chartController.chartModel}" 
     style="width: 400px; height: 250px;"
     xaxisLabel="No. of Posts" yaxisLabel="Year" 
     xaxisAngle="45" 
     datatipFormat="#{chartController.datatipFormat}"
     legendPosition="se" barMargin="5" barPadding="4" 
     seriesColors="A52A2A, 1E90FF"
     orientation="horizontal" animate="true" 
     />

2. Write a method to return the custom dataTipFormat.

   public String getDatatipFormat() 
   {
     return "<span>No. of Posts: %s</span>";
   }

What just happened?

We have created a horizontal Bar chart by setting orientation="horizontal". We have customized the series colors by setting seriesColors="A52A2A, 1E90FF".

Also we have customized the datatip format using the datatipFormat...