Time for action – creating a Line chart

In this section, we will create a Line chart depicting the number of posts with PrimeFaces and jQuery tags from years 2009 to 2013.

1. Create a Line chart with custom labels, axis angles, series colors, and enable zooming and animation.

   <p:lineChart value="#{chartController.chartModel}" 
     style="width: 450px; height: 300px;"
     title="Linear Chart" 
     legendPosition="nw" 
     xaxisLabel="Year" yaxisLabel="No. of Posts" 
     xaxisAngle="45" yaxisAngle="45"
     minY="0" maxY="1000"
     breakOnNull="true" zoom="true" animate="true"
     seriesColors="800000,006400"
     legendCols="2"/>

What just happened?

Here, we have specified the labels and angles for X-axis and Y-axis. We have also customized the series to display #800000 and #006400 colors instead of the default colors. As we have specified breakOnNull="true" the jQuery series disconnected at year 2011. If you set breakOnNull="false", which is the default, the jQuery data point at year 2010 will be directly connected...