I'm developing a JavaWeb application using the PrimeFaces framework. On one of my screens I have a p: chart but I need this chart to have its background transparent. I have tried to change the css formatting of the classes and I succeeded in applying a color, but with the transparent property it does not work.
How can I do this?
My xhtml so far:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:b="http://bootsfaces.net/ui"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:head>
<title>Form</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</h:head>
<h:body>
<h:form id="teste">
<p:chart type="bar" style=" width: 340px; height: 90px; margin-top:-20px; margin-left: -20px; background: transparent;" styleClass="" model="#{beanGraficos.combinedModel2}"/>
</h:form>
</h:body>
</html>
My Bean:
@Named(value = "beanGraficos")
@ViewScoped
public class BeanGraficos implements Serializable {
private PieChartModel pieModel1;
private CartesianChartModel combinedModel;
private CartesianChartModel combinedModel2;
private LineChartModel lineModel1;
private LineChartModel lineModel2;
@PostConstruct
public void init() {
produtos = produtoEJB.findAll();
createPieModel1();
createCombinedModel();
createLineModels();
}
public String cadastrarVenda() {
vendaEJB.create(venda);
return "graficos";
}
private LineChartModel initLinearModel() {
LineChartModel model = new LineChartModel();
LineChartSeries series1 = new LineChartSeries();
series1.setLabel("Series 1");
series1.set(1, 2);
series1.set(2, 1);
series1.set(3, 3);
series1.set(4, 6);
series1.set(5, 8);
LineChartSeries series2 = new LineChartSeries();
series2.setLabel("Series 2");
series2.set(1, 6);
series2.set(2, 3);
series2.set(3, 2);
series2.set(4, 7);
series2.set(5, 9);
model.addSeries(series1);
model.addSeries(series2);
return model;
}
public LineChartModel initCategoryModel() {
LineChartModel model = new LineChartModel();
ChartSeries boys = new ChartSeries();
boys.setLabel("Boys");
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("Girls");
girls.set("2004", 52);
girls.set("2005", 60);
girls.set("2006", 110);
girls.set("2007", 90);
girls.set("2008", 120);
model.addSeries(boys);
model.addSeries(girls);
return model;
}
/*GRÁFICOS TELA DADOS PESSOAIS */
private void createCombinedModel() {
combinedModel = new BarChartModel();
BarChartSeries boys = new BarChartSeries();
boys.set("2004", 120);
boys.set("2005", 100);
boys.set("2006", 44);
boys.set("2007", 150);
boys.set("2008", 25);
LineChartSeries girls = new LineChartSeries();
girls.set("2004", 52);
girls.set("2005", 60);
girls.set("2006", 110);
girls.set("2007", 135);
girls.set("2008", 120);
combinedModel.setSeriesColors("805215");
combinedModel.addSeries(boys);
combinedModel.addSeries(girls);
combinedModel.setLegendPosition("ne");
combinedModel.setMouseoverHighlight(false);
combinedModel.setShowDatatip(false);
combinedModel.setShowPointLabels(true);
Axis yAxis = combinedModel.getAxis(AxisType.Y);
yAxis.setMin(0);
yAxis.setMax(200);
combinedModel2 = new BarChartModel();
LineChartSeries dados = new LineChartSeries();
dados.set("2004", 120);
dados.set("2005", 100);
dados.set("2006", 44);
dados.set("2007", 150);
dados.set("2008", 25);
BarChartSeries dados2 = new BarChartSeries();
dados2.set("2004", 52);
dados2.set("2005", 60);
dados2.set("2006", 110);
dados2.set("2007", 135);
dados2.set("2008", 120);
combinedModel2.setSeriesColors("045A9C");
combinedModel2.addSeries(dados2);
combinedModel2.addSeries(dados);
combinedModel2.setLegendPosition("ne");
combinedModel2.setMouseoverHighlight(false);
combinedModel2.setShowDatatip(false);
combinedModel2.setShowPointLabels(true);
}
private void createLineModels() {
lineModel1 = initLinearModel();
lineModel1.setTitle("Linear Chart");
lineModel1.setLegendPosition("e");
Axis yAxis = lineModel1.getAxis(AxisType.Y);
yAxis.setMin(0);
yAxis.setMax(10);
lineModel2 = initCategoryModel();
lineModel2.setTitle("Category Chart");
lineModel2.setLegendPosition("e");
lineModel2.setShowPointLabels(true);
lineModel2.getAxes().put(AxisType.X, new CategoryAxis("Years"));
yAxis = lineModel2.getAxis(AxisType.Y);
yAxis.setLabel("Births");
yAxis.setMin(0);
yAxis.setMax(200);
}
//GET SET OBJETOS
public List<Produto> getProdutos() {
produtos = produtoEJB.findAll();
return produtos;
}
//GET GRÁFICOS
public PieChartModel getPieModel1() {
return pieModel1;
}
public CartesianChartModel getCombinedModel() {
return combinedModel;
}
public CartesianChartModel getCombinedModel2() {
return combinedModel2;
}
public void setCombinedModel2(CartesianChartModel combinedModel2) {
this.combinedModel2 = combinedModel2;
}
public LineChartModel getLineModel1() {
return lineModel1;
}
public void setLineModel1(LineChartModel lineModel1) {
this.lineModel1 = lineModel1;
}
public LineChartModel getLineModel2() {
return lineModel2;
}
public void setLineModel2(LineChartModel lineModel2) {
this.lineModel2 = lineModel2;
}
}