how to add a secondary y axis on primefaces - primefaces

Question

How can i create a secondary y axis on primefaces 3.4?
i already read the primefaces manual e googled out there
Google tells that y2axis (from jqplot) is the way
but primefaces manual doesn't mention y2axis at all
my class
package br.com.inmetrics.managedbean;
import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import org.primefaces.model.chart.CartesianChartModel;
import org.primefaces.model.chart.LineChartSeries;
import javax.faces.event.ComponentSystemEvent;
import br.com.inmetrics.entity.Grafico;
import javax.faces.event.AbortProcessingException;
import br.com.inmetrics.dao.SistemaDAO;
#ManagedBean(name = "chartMB")
#SessionScoped
public class ChartManagedBean implements Serializable {
private static final long serialVersionUID = 1L;
private SistemaDAO apoioDao = new SistemaDAO();
private List<Grafico> graficos = new ArrayList<Grafico>();
private CartesianChartModel categoryModel;
private CartesianChartModel linearModel;
private String sistema;
private String hostname;
private String metrica;
private String alinhamento;
private String funcao;
private int maximo;
public ChartManagedBean() {
}
public CartesianChartModel getCategoryModel() {
return categoryModel;
}
public CartesianChartModel getLinearModel() {
return linearModel;
}
private void createLinearModel() {
try {
graficos = apoioDao.getGrafico(hostname, metrica);
} catch (Exception ex) {
ex.printStackTrace();
}
linearModel = new CartesianChartModel();
LineChartSeries series1 = new LineChartSeries();
this.alinhamento = metrica.equalsIgnoreCase("GBL_LOADAVG") ? "ne" : "e";
this.funcao = metrica.equalsIgnoreCase("GBL_LOADAVG") ? "ext2" : "ext1";
this.maximo = metrica.equalsIgnoreCase("GBL_LOADAVG") ? 1 : 100;
series1.setLabel(metrica);
for (Grafico s : graficos) {
series1.set(s.getData(), s.getValor());
}
LineChartSeries series2 = new LineChartSeries();
series2.setLabel("Threshold");
series2.setMarkerStyle("filledSquare");
for (Grafico t : graficos) {
series2.set(t.getData(), metrica.equalsIgnoreCase("GBL_LOADAVG") ? 0.48 : 80);
}
//teste
LineChartSeries series3 = new LineChartSeries();
series3.setLabel("Threshold");
series3.setMarkerStyle("filledSquare");
for (Grafico t : graficos) {
series3.set(t.getData(), metrica.equalsIgnoreCase("GBL_LOADAVG") ? 0.48 : 90);
}
linearModel.addSeries(series1);
linearModel.addSeries(series2);
//teste
linearModel.addSeries(series3);
}
public String getSistema() {
return sistema;
}
public void setSistema(String sistema) {
this.sistema = sistema;
}
public String getHostname() {
return hostname;
}
public void setHostname(String hostname) {
this.hostname = hostname;
}
public String getMetrica() {
return metrica;
}
public void setMetrica(String metrica) {
this.metrica = metrica;
}
public void push(ComponentSystemEvent evt) throws AbortProcessingException {
createLinearModel();
}
public String getAlinhamento() {
return alinhamento;
}
public void setAlinhamento(String alinhamento) {
this.alinhamento = alinhamento;
}
public int getMaximo() {
return maximo;
}
public void setMaximo(int maximo) {
this.maximo = maximo;
}
public String getFuncao() {
return funcao;
}
public void setFuncao(String funcao) {
this.funcao = funcao;
}
}
my xhtml:
<h:head>
<link rel="shortcut icon" href="images/ico.ico" />
<title>Capacity - Dashboard</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</h:head>
<h:body>
<h:form>
<script type="text/javascript">
function ext1() {
this.cfg.axes.yaxis.tickOptions = {
formatString : '%d\%'
};
}
function ext2() {
this.cfg.axes.yaxis.tickOptions = {
formatString : '%.2f'
};
}
</script>
<div id="externa_corpo">
<div id="corpo">
<div id="logo">
<img src="images/pt/logo.png" width="200" height="74" />
</div>
<!--logo-->
<div id="titulo-book">
Dashboard <br />
</div>
<div id="logo-cliente">
<img src="images/logoTIM.jpg" width="122" height="53" />
</div>
<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />
<p:lineChart id="linear" value="#{chartMB.linearModel}"
legendPosition="#{chartMB.alinhamento}"
title="#{chartMB.hostname} - P90" minY="0" maxY="#{chartMB.maximo}"
style="height:450px" animate="true" xaxisAngle="270"
seriesColors="FFFF00, FF0000" extender="#{chartMB.funcao}" showMarkers="true"
zoom="false" />
<f:metadata>
<f:viewParam name="sistema" value="#{chartMB.sistema}" />
<f:viewParam name="hostname" value="#{chartMB.hostname}" />
<f:viewParam name="metrica" value="#{chartMB.metrica}" />
<f:event type="preRenderView" listener="#{chartMB.push}" />
</f:metadata>
</div>
</div>
</h:form>
</h:body>
</html>
Kind Regards and Best Wishes,
Geraldo Netto