Resize Chart with Primefaces

knucki · 29 Oct 2012, 16:26

Because i've searched for a solution round about 1 day, here my solution for:

xhtml:

<?xml version='1.0' encoding='UTF-8' ?>
<!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"
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <f:view contentType="text/html" encoding="UTF-8">
        <h:head>
            <h:outputScript library="primefaces" name="jquery/jquery.js" />
            <h:outputScript library="primefaces" name="charts/charts.js" />
            <h:outputScript library="primefaces" name="charts/charts.css" />

            <script type="text/javascript">
                //<![CDATA[
                function Fensterweite () {
                    if (window.innerWidth) {
                        return window.innerWidth;
                    } else if (document.body && document.body.offsetWidth) {
                        return document.body.offsetWidth;
                    } else {
                        return 0;
                    }
                }

                function Fensterhoehe () {
                    if (window.innerHeight) {
                        return window.innerHeight;
                    } else if (document.body && document.body.offsetHeight) {
                        return document.body.offsetHeight;
                    } else {
                        return 0;
                    }
                }
            
                function neuAufbau () {
                    WeiteAlt = Weite;
                    HoeheAlt = Hoehe;
                    Weite = Fensterweite();
                    Hoehe = Fensterhoehe();
                    WeiteDiv = $('#container').width();
                    HoeheDiv = $('#container').height();
                    
                    // Neueberechnung Pie-Größe
                    WeiteDiv = $('#pieContainer').width();
                    HoeheDiv = $('#pieContainer').height();
                    $('#pieContainer').width (WeiteDiv * (Weite / WeiteAlt));
                    $('#pieContainer').height(HoeheDiv * (Hoehe / HoeheAlt));
                    $('#pieChartIdent').height($('#pieContainer').height()*0.96);
                    $('#pieChartIdent').width($('#pieContainer').width()*0.96);
                    pieChart.plot.replot( { resetAxes: true } )
                    
                    // Neueberechnung Donut-Größe
                    WeiteDiv = $('#donutContainer').width();
                    HoeheDiv = $('#donutContainer').height();
                    $('#donutContainer').width (WeiteDiv * (Weite / WeiteAlt));
                    $('#donutContainer').height(HoeheDiv * (Hoehe / HoeheAlt));
                    $('#donutChartIdent').height($('#donutContainer').height()*0.96);
                    $('#donutChartIdent').width($('#donutContainer').width()*0.96);
                    donutChart.plot.replot( { resetAxes: true } )
                    
                    // Neueberechnung Line-Größe
                    WeiteDiv = $('#lineContainer').width();
                    HoeheDiv = $('#lineContainer').height();
                    $('#lineContainer').width (WeiteDiv * (Weite / WeiteAlt));
                    $('#lineContainer').height(HoeheDiv * (Hoehe / HoeheAlt));
                    $('#lineChartIdent').height($('#lineContainer').height()*0.96);
                    $('#lineChartIdent').width($('#lineContainer').width()*0.96);
                    lineChart.plot.replot( { resetAxes: true } )
                    
                    // Neueberechnung Line-Größe
                    WeiteDiv = $('#barContainer').width();
                    HoeheDiv = $('#barContainer').height();
                    $('#barContainer').width (WeiteDiv * (Weite / WeiteAlt));
                    $('#barContainer').height(HoeheDiv * (Hoehe / HoeheAlt));
                    $('#barChartIdent').height($('#barContainer').height()*0.96);
                    $('#barChartIdent').width($('#barContainer').width()*0.96);
                    barChart.plot.replot( { resetAxes: true } )
                }
                //]]>
            </script>
        </h:head>
        <h:body>
            <script type="text/javascript">
                //<![CDATA[
                /* Überwachung von Internet Explorer initialisieren */
                if (!window.Weite && document.body && document.body.offsetWidth) {
                    window.onresize = neuAufbau;
                    Weite = Fensterweite();
                    Hoehe = Fensterhoehe();
                }
                //]]>
            </script>

            <p:panel id="pieContainer" style="width:400px;height:300px">
                <p:pieChart id="pieChartIdent" widgetVar="pieChart" value="#{chartBean.pieModel}"
                            legendPosition="e" title="Sample Donut Chart"
                            showMarkers="true" shadow="false"
                            yaxisAngle="0" xaxisAngle="0"
                            yaxisLabel="" xaxisLabel="" />
            </p:panel>
            <p:resizable for="pieContainer" onResize="$('#pieChartIdent').height($('#pieContainer').height()*0.96);
                         $('#pieChartIdent').width($('#pieContainer').width()*0.96);
                         pieChart.plot.replot( { resetAxes: true } )" />

            <p:panel id="donutContainer" style="width:400px;height:300px">
                <p:donutChart id="donutChartIdent" widgetVar="donutChart" value="#{chartBean.donutModel}"
                              legendPosition="e" title="Sample Donut Chart"
                              showMarkers="true" shadow="false"
                              yaxisAngle="0" xaxisAngle="0"
                              yaxisLabel="" xaxisLabel="" />
            </p:panel>
            <p:resizable for="donutContainer" onResize="$('#donutChartIdent').height($('#donutContainer').height()*0.96);
                         $('#donutChartIdent').width($('#donutContainer').width()*0.96);
                         donutChart.plot.replot( { resetAxes: true } )" />

            <p:panel id="lineContainer" style="width:400px;height:300px">
                <p:lineChart id="lineChartIdent" widgetVar="lineChart" value="#{chartBean.linearModel}"
                              legendPosition="e" title="Sample Donut Chart"
                              showMarkers="true" shadow="false"
                              yaxisAngle="0" xaxisAngle="0"
                              yaxisLabel="" xaxisLabel="" />
            </p:panel>
            <p:resizable for="lineContainer" onResize="$('#lineChartIdent').height($('#lineContainer').height()*0.96);
                         $('#lineChartIdent').width($('#lineContainer').width()*0.96);
                         lineChart.plot.replot( { resetAxes: true } )" />
            
            <p:panel id="barContainer" style="width:400px;height:300px">
                <p:barChart id="barChartIdent" widgetVar="barChart" value="#{chartBean.categoryModel}"
                              legendPosition="e" title="Sample Donut Chart"
                              showMarkers="true" shadow="false"
                              yaxisAngle="0" xaxisAngle="0"
                              yaxisLabel="" xaxisLabel="" />
            </p:panel>
            <p:resizable for="barContainer" onResize="$('#barChartIdent').height($('#barContainer').height()*0.96);
                         $('#barChartIdent').width($('#barContainer').width()*0.96);
                         barChart.plot.replot( { resetAxes: true } )" />
        </h:body>
    </f:view>
</html>

Bean:

Code: Select all

/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */

//import java.io.File;
//import java.io.FileInputStream;
//import javax.faces.application.FacesMessage;
//import javax.faces.context.FacesContext;
//import org.jfree.chart.ChartFactory;
//import org.jfree.chart.ChartUtilities;
//import org.jfree.chart.JFreeChart;
//import org.jfree.data.general.DefaultPieDataset;
//import org.jfree.data.general.PieDataset;
//import org.primefaces.event.ResizeEvent;
//import org.primefaces.model.DefaultStreamedContent;
//import org.primefaces.model.StreamedContent;
import java.io.Serializable;
import java.util.LinkedHashMap;
import java.util.Map;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import org.primefaces.model.chart.CartesianChartModel;
import org.primefaces.model.chart.ChartSeries;
import org.primefaces.model.chart.DonutChartModel;
import org.primefaces.model.chart.LineChartSeries;
import org.primefaces.model.chart.PieChartModel;

@ManagedBean(name = "chartBean")
@SessionScoped
public class ChartBean implements Serializable {

    private PieChartModel pieModel;
    private DonutChartModel donutModel;
    private CartesianChartModel categoryModel;
    private CartesianChartModel linearModel;

    public ChartBean() {
        createPieModel();
        createDonutModel();
        createCategoryModel();
        createLinearModel();
    }

    public PieChartModel getPieModel() {
        return pieModel;
    }

    private void createPieModel() {
        pieModel = new PieChartModel();

        pieModel.set("Brand 1", 580);
        pieModel.set("Brand 2", 20);
        pieModel.set("Brand 3", 1100);
        pieModel.set("Brand 4", 300);
    }

    public DonutChartModel getDonutModel() {
        return donutModel;
    }

    private void createDonutModel() {
        donutModel = new DonutChartModel();

        Map<String, Number> circle1 = new LinkedHashMap<String, Number>();
        circle1.put("Brand 1", 150);
        circle1.put("Brand 2", 400);
        circle1.put("Brand 3", 200);
        circle1.put("Brand 4", 10);
        donutModel.addCircle(circle1);

        Map<String, Number> circle2 = new LinkedHashMap<String, Number>();
        circle2.put("Brand 1", 540);
        circle2.put("Brand 2", 125);
        circle2.put("Brand 3", 702);
        circle2.put("Brand 4", 421);
        donutModel.addCircle(circle2);

        Map<String, Number> circle3 = new LinkedHashMap<String, Number>();
        circle3.put("Brand 1", 40);
        circle3.put("Brand 2", 325);
        circle3.put("Brand 3", 402);
        circle3.put("Brand 4", 421);
        donutModel.addCircle(circle3);
    }

    public CartesianChartModel getCategoryModel() {
        return categoryModel;
    }

    public CartesianChartModel getLinearModel() {
        return linearModel;
    }

    private void createCategoryModel() {
        categoryModel = new CartesianChartModel();

        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", 135);
        girls.set("2008", 120);

        categoryModel.addSeries(boys);
        categoryModel.addSeries(girls);
    }

    private void createLinearModel() {
        linearModel = new CartesianChartModel();

        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.setMarkerStyle("diamond");

        series2.set(1, 6);
        series2.set(2, 3);
        series2.set(3, 2);
        series2.set(4, 7);
        series2.set(5, 9);

        linearModel.addSeries(series1);
        linearModel.addSeries(series2);
    }
}

Hopefully it helps anyone...

phyntom · 15 Apr 2014, 14:14

you can resize primface chart by putting the following JS code

Code: Select all

        <script type="text/javascript">
            $(window).resize(function() {
                resizePlot();
                lineChart_ext();
            });
            function resizePlot() {
                widthDiv = $('#dashPanel').width();
                heightDiv = $('#dashPanel').height();
                $('#chart').height($('#dashPanel').height() * 0.93);
                $('#chart').width($('#dashPanel').width() * 0.93);
                chart.plot.replot({});
            }
            ;
            function lineChart_ext() {
                this.cfg.axes = {
                    xaxis: {
                        min: 0,
                        max: 23,
                        tickInterval: 1,
                        autoscale: true,
                        tickOptions: {
                            formatString: '%d',
                            fontSize: '8pt'
                        }
                    },
                    yaxis: {
                        autoscale: true,
                        min: 0,
                        tickRenderer: $.jqplot.CanvasAxisTickRenderer,
                        tickOptions: {
                            autoscale: true,
                            fontSize: '10pt',
                            angle: 15
                        }
                    }
                },
                this.cfg.legend = {
                    renderer: $.jqplot.EnhancedLegendRenderer,
                    show: true,
                    showLabels: true,
                    location: 'nw',
                    placement: 'inside',
                    fontSize: '11px',
                    fontFamily: ["Lucida Grande", "Lucida Sans Unicode", "Arial", "Verdana", "sans-serif"],
                    rendererOptions: {
                        seriesToggle: 'normal'
                    },
                    grid: {
                        backgroundColor: "white"
                    }
                };
            }
        </script>

Then in you page containing the lineChart or another type of chart you want to resize you put

Code: Select all

        <p:panel id="dashPanel" style="width:85%;height: 420px;margin: auto;font-weight: bold;">
            <h:panelGrid style="margin: auto;" columns="2">
                <h:outputLabel value="Market" />
                <h:selectOneMenu>
                    <f:selectItems value="#{monitorBean.services}"/>
                </h:selectOneMenu>
            </h:panelGrid>
            <br/>
            <hr />
            <p:lineChart widgetVar="chart" id="chart" style="width:95%;" extender="lineChart_ext" value="#{monitorBean.cartesianChartModel}" 
                         legendPosition="ne" title="Transactions Monitoring" />
        </p:panel>

Resize Chart with Primefaces

Who is online