Primefaces graphics with transparent background

Asked

Viewed 221 times

1

I am developing a Javaweb application using the Primefaces framework.
On one of my screens I have a p:Chart but I need this graphic to have its transparent background.
I tried to change the formatting of the css of the classes and succeeded in applying a color, however, with the Transparent property does not work.

How can I do that?

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;
    } 

}
No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.