I need your help to understand a very strange primefaces horizontal bar behaviour.
What I'd like to do is to draw a horizontal bar with primefaces.
Here are all my datas I get from my postgresql db table:
For the following explanations please refer to this horbarchart image:
If I get only first five banks from my db everything's ok! (1)
If I try to get and show all the banks disaster happens :( Only eight banks are shown and values are shifted. (2)
Finally, if I try to get and show the last four banks only two are shown with wrong values. (3)
Obviously, I checked with my debugger's IDE if every chart serie was populated correctly and everything is build in a very right way.
This is my (hibernate) class that gets datas from db:
public class ChartRequestTypeJPA {
static final transient Logger LOGGER = LogManager.getLogger(ChartRequestTypeJPA.class.getName());
static final transient ResourceBundle BUNDLE = FacesContext.getCurrentInstance().getApplication().getResourceBundle(FacesContext.getCurrentInstance(), "txt");
public List<ChartRequestType> getAll(TimeInterval step) throws Exception {
Session session = null;
try {
session = HibernateUtil.getSessionFactory().openSession();
Criteria criteria = session
.createCriteria(ChartRequestType.class)
.add(Restrictions.eq("pk.step", step.getDescr()));
List<ChartRequestType> result = criteria.list();
return result;
} catch (Exception e) {
e.printStackTrace();
LOGGER.error("Error getting chart request type" + e.getMessage());
throw new DMLException(BUNDLE.getString("message.noDataFound"));
} finally {
if (session != null) {
session.close();
}
}
}
}
This is my class that sets the bar chart model:
@ManagedBean
@RequestScoped
public class Chart11RequestTypeView {
private HorizontalBarChartModel chartRequestTypeModel;
private void createHorizontalBarModel() {
chartRequestTypeModel = new HorizontalBarChartModel();
ChartSeries informazioni = new ChartSeries();
ChartSeries anomalia = new ChartSeries();
ChartSeries rio = new ChartSeries();
// Valori percentuali della singola banca sul totale letto da oracle
informazioni.setLabel(TXT.getString("uilabel.chart11.informazioni"));
anomalia.setLabel(TXT.getString("uilabel.chart11.anomalia"));
rio.setLabel(TXT.getString("uilabel.chart11.rio"));
int size = chartRequestType.size();
for (int i = 0; i < size; i++) {
String tipologia = chartRequestType.get(i).getPk().getTipologia();
String bankName = chartRequestType.get(i).getPk().getName();
int tickNumb = chartRequestType.get(i).getTicketnumber();
switch(tipologia){
case "Anomalia":{
anomalia.set(bankName, (int) tickNumb);
break;
}
case "Informazioni":{
informazioni.set(bankName, (int) tickNumb);
break;
}
case "Richiesta Operativa":{
rio.set(bankName, (int)tickNumb);
break;
}
}
if(chartRequestType.get(i).getPk().getTipologia().equals("Informazioni")){
informazioni.set(chartRequestType.get(i).getPk().getName(), chartRequestType.get(i).getTicketnumber());
}
if(chartRequestType.get(i).getPk().getTipologia().equals("Anomalia")){
anomalia.set(chartRequestType.get(i).getPk().getName(), chartRequestType.get(i).getTicketnumber());
}
if(chartRequestType.get(i).getPk().getTipologia().equals("Richiesta Operativa")){
rio.set(chartRequestType.get(i).getPk().getName(), chartRequestType.get(i).getTicketnumber());
}
}
chartRequestTypeModel.setSeriesColors("999999,666666,333333");
chartRequestTypeModel.setTitle(TXT.getString("uilabel.chart11.title"));
chartRequestTypeModel.addSeries(anomalia);
chartRequestTypeModel.addSeries(informazioni);
chartRequestTypeModel.addSeries(rio);
Axis xAxis = chartRequestTypeModel.getAxis(AxisType.X);
xAxis.setLabel(TXT.getString("uilabel.chart11.number"));
xAxis.setMin(0);
xAxis.setTickAngle(40);
xAxis.setTickFormat("%d");
chartRequestTypeModel.setExtender("chartRequestTypeExtender");
// horizontalBarModel.setShowPointLabels(true); qui non serve, sta nell'extender
}
}
Finally, this is my xhtml:
<p:panel style="text-align: center; width:100%; border: 0px;">
<p:panelGrid id="pchart11" columns="1" style="text-align: center; margin-bottom:10px; width: 100%; height:600px;">
<p:row>
<p:chart type="bar" model="#{chart11RequestTypeView.chartRequestTypeModel}" style="height:600px;" />
</p:row>
</p:panelGrid>
</p:panel>
<script language="javascript" type="text/javascript">
function chartRequestTypeExtender() {
this.cfg.sortData = true; // forse superfluo
this.cfg.legend = {
show: true,
location: 'e',
placement: 'insideGrid'
};
this.cfg.grid = {
background: 'transparent',
gridLineColor: '#D0D0FF',
drawBorder: false
};
this.cfg.seriesDefaults = {
renderer:$.jqplot.BarRenderer,
// Show point labels to the right ('e'ast) of each bar.
// edgeTolerance of -15 allows labels flow outside the grid
// up to 15 pixels. If they flow out more than that, they
// will be hidden.
pointLabels: { show: true, location: 'e', edgeTolerance: -15 },
// Rotate the bar shadow as if bar is lit from top right.
shadowAngle: 135,
// Here's where we tell the chart it is oriented horizontally.
rendererOptions: {
barDirection: 'horizontal'
}
};
this.cfg.highlighter = {
show: true,
tooltipAxes: 'x', // da usare anche in altri chart, evita l'ambiguita dei tootips tipo 3,7 inteso come 3.7 anzichè valore 7 per il punto 3
useAxesFormatters: false,
tooltipFormatString: "%i"};
}
</script>
</html>
Can anyone help me? Thank you so much for listening me
<p:layoutUnit>components in that regard. Also check if your HorizonalBar works with other types of components. The<p:chart>uses HTML5 Canvas for drawing, maybe that's why it is breaking? - Wep0n<div>s to see if it's a problem with how primefaces generates components or not. Maybe you also want to generate a<div>where ALL components are rendered on page load, withoverflow: hiddenset as style. If you don't HAVE to use your custom scrollbar, you could also tryoverflow: scrollfor style. - Wep0n