Charts - InteractiveWhen a series data is clicked, information can be passed to a backing bean using itemSelect ajax behavior.
Index.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<f:view contentType="text/html">
<h:head />
<h:body>
<h:form>
<p:growl id="growl" showDetail="true" />
<h:panelGrid columns="2" columnClasses="left,right"
style="width:100%">
<p:chart type="bar" model="#{chartView.barModel}"
style="width:400px;height:300px">
<p:ajax event="itemSelect" listener="#{chartView.itemSelect}"
update="growl" />
</p:chart>
</h:panelGrid>
</h:form>
</h:body>
</f:view>
</html>
ChartView.java
package com.itwine.chart;
import java.io.Serializable;
import javax.annotation.PostConstruct;
import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.context.FacesContext;
import org.primefaces.event.ItemSelectEvent;
import org.primefaces.model.chart.Axis;
import org.primefaces.model.chart.AxisType;
import org.primefaces.model.chart.BarChartModel;
import org.primefaces.model.chart.ChartSeries;
@ManagedBean
public class ChartView implements Serializable {
/**
*
*/
private static final long serialVersionUID = 1L;
private BarChartModel barModel;
@PostConstruct
public void init() {
createBarModels();
}
public BarChartModel getBarModel() {
return barModel;
}
private void createBarModels() {
createBarModel();
}
private void createBarModel() {
barModel = initBarModel();
barModel.setTitle("Bar Chart");
barModel.setLegendPosition("ne");
Axis xAxis = barModel.getAxis(AxisType.X);
xAxis.setLabel("User");
Axis yAxis = barModel.getAxis(AxisType.Y);
yAxis.setLabel("Minutes");
yAxis.setMin(0);
yAxis.setMax(200);
}
private BarChartModel initBarModel() {
BarChartModel model = new BarChartModel();
ChartSeries boys = new ChartSeries();
boys.setLabel("itwine4tech@gmail.com");
boys.set("2004", 120);
boys.set("2005", 100);
boys.set("2006", 44);
boys.set("2007", 150);
boys.set("2008", 25);
ChartSeries girls = new ChartSeries();
girls.setLabel("rsrinivas@gmail.com");
girls.set("2004", 52);
girls.set("2005", 60);
girls.set("2006", 110);
girls.set("2007", 135);
girls.set("2008", 120);
model.addSeries(boys);
model.addSeries(girls);
return model;
}
public void itemSelect(ItemSelectEvent event) {
FacesMessage msg = new FacesMessage(FacesMessage.SEVERITY_INFO,
"Item selected", "Item Index: " + event.getItemIndex()
+ ", Series Index:" + event.getSeriesIndex());
FacesContext.getCurrentInstance().addMessage(null, msg);
}
}
Output:
now any Column
Index.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<f:view contentType="text/html">
<h:head />
<h:body>
<h:form>
<p:growl id="growl" showDetail="true" />
<h:panelGrid columns="2" columnClasses="left,right"
style="width:100%">
<p:chart type="bar" model="#{chartView.barModel}"
style="width:400px;height:300px">
<p:ajax event="itemSelect" listener="#{chartView.itemSelect}"
update="growl" />
</p:chart>
</h:panelGrid>
</h:form>
</h:body>
</f:view>
</html>
ChartView.java
package com.itwine.chart;
import java.io.Serializable;
import javax.annotation.PostConstruct;
import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.context.FacesContext;
import org.primefaces.event.ItemSelectEvent;
import org.primefaces.model.chart.Axis;
import org.primefaces.model.chart.AxisType;
import org.primefaces.model.chart.BarChartModel;
import org.primefaces.model.chart.ChartSeries;
@ManagedBean
public class ChartView implements Serializable {
/**
*
*/
private static final long serialVersionUID = 1L;
private BarChartModel barModel;
@PostConstruct
public void init() {
createBarModels();
}
public BarChartModel getBarModel() {
return barModel;
}
private void createBarModels() {
createBarModel();
}
private void createBarModel() {
barModel = initBarModel();
barModel.setTitle("Bar Chart");
barModel.setLegendPosition("ne");
Axis xAxis = barModel.getAxis(AxisType.X);
xAxis.setLabel("User");
Axis yAxis = barModel.getAxis(AxisType.Y);
yAxis.setLabel("Minutes");
yAxis.setMin(0);
yAxis.setMax(200);
}
private BarChartModel initBarModel() {
BarChartModel model = new BarChartModel();
ChartSeries boys = new ChartSeries();
boys.setLabel("itwine4tech@gmail.com");
boys.set("2004", 120);
boys.set("2005", 100);
boys.set("2006", 44);
boys.set("2007", 150);
boys.set("2008", 25);
ChartSeries girls = new ChartSeries();
girls.setLabel("rsrinivas@gmail.com");
girls.set("2004", 52);
girls.set("2005", 60);
girls.set("2006", 110);
girls.set("2007", 135);
girls.set("2008", 120);
model.addSeries(boys);
model.addSeries(girls);
return model;
}
public void itemSelect(ItemSelectEvent event) {
FacesMessage msg = new FacesMessage(FacesMessage.SEVERITY_INFO,
"Item selected", "Item Index: " + event.getItemIndex()
+ ", Series Index:" + event.getSeriesIndex());
FacesContext.getCurrentInstance().addMessage(null, msg);
}
}
Output:
now any Column
Comments
Post a Comment