CODEWITHSUNDEEP
jsfprimefaceschartsjqplot
user2567005
user2567005

Reputation: 281

PrimeFaces print doesn't work with p:chart

I'm using primeface print just like below

 <ui:define name="content" id="content">
        <h:form id="common_chart_form" prependId="flase">
            <p:growl id="growl" showDetail="true" autoUpdate="true"
                sticky="false" />
                <p:outputLabel id="labelvalue" value="aaaaaaaaaa"/>

                <p:chart id="chart" type="bar"
                    model="#{commonChartController.barModel}" style="height:300px" />

            <p:commandButton value="Print" type="button" icon="ui-icon-print">
                <p:printer target="chart" />
            </p:commandButton>

            <p:commandButton value="Back" action="admin_sales_reports" />
        </h:form>
    </ui:define>

i need to print the chart but unfortunately it cannot print. then to test the print target i tried to print the "labelvalue" it printed what is the wrong thing that im doing in this code

this is the screen shot of the page

enter image description here

Upvotes: 2

Views: 3522

Answers (5)

user8138586
user8138586

Reputation: 11

Only put this (onclick="print();"). 

<p:commandButton value="Print" type="button" icon="ui-icon-print" style="display:block;margin-bottom: 20px" onclick="print();"/>

Thats it.

Upvotes: 1

Leandro Rocha
Leandro Rocha

Reputation: 21

You can do it in a more elegant way, without the need of the outputPanel declared in the page:

  1. Javascript function:

    function print(component){
    var out = document.createElement('div');
    out.appendChild(PF(component).exportAsImage()); 
    var innerHTML =  out.innerHTML;
    var openWindow = window.open('', 'Report', '');
    openWindow.document.write(innerHTML);
    openWindow.document.close();
    openWindow.focus();
    openWindow.print();
    openWindow.close();
}

  2. Define widgetVar for chart:

    <p:chart widgetVar="chart2" type="bar" model="#{chartsBean.barModel2}" />

  3. Call the print function:

    <p:commandLink  id="lnk" onclick="print('chart2')"/>

Upvotes: 2

hecarim
hecarim

Reputation: 87

You can use script to export chart as image to a panel which has same height with chart and z-index property value less than chart. Exp:

<h:form>    
    <p:commandButton value="Print" style="margin:10px;"
    onclick="$('#output').empty().append(PF('chart').exportAsImage());">        
          <p:printer  target="output"></p:printer>
     </p:commandButton>
</h:form>
<p:outputPanel id="output" layout="block"
     style="position:absolute;height:300px;z-index:1" />
<p:chart widgetVar="chart" type="bar" model="#{bean.barModel}"
     style="height:300px;z-index:1000;background:#fff"></p:chart>

Upvotes: 0

jrobertsz66
jrobertsz66

Reputation: 961

Here is how you do it - found a thread from Brazil that showed it:

1 - Create a dialog like this:

<p:dialog widgetVar="outputDialog" showEffect="fade" modal="true" header="Header Name">    
                <p:outputPanel id="output" layout="block" style="width:860px;height:540px"/>    
            </p:dialog>

2 - Create your charts with a widgetVar like this:

<p:chart widgetVar="chart1" type="bar" model="#{chartsBean.barModel1}" style="height:300px;width:800px;"/>
            <p:spacer height="40px"/>
            <p:chart widgetVar="chart2" type="bar" model="#{chartsBean.barModel2}" style="height:300px;width:800px;"/>
            <p:spacer height="40px"/>
            <p:chart widgetVar="chart3" type="bar" model="#{chartsBean.barModel3}" style="height:300px;width:800px;"/>
            <p:spacer height="40px"/>
            <p:chart widgetVar="chart4" type="line" model="#{chartsBean.lineModel1}" style="height:300px;width:800px;"/>
            <p:spacer height="40px"/>
            <p:chart widgetVar="chart5" type="line" model="#{chartsBean.lineModel2}" style="height:300px;width:800px;"/>
            <p:spacer height="40px"/>
            <p:chart widgetVar="chart6" type="line" model="#{chartsBean.lineModel3}" style="height:300px;width:800px;"/>

3 - Create a javascript function like this:

function print() {
                    $('#output').empty().append(PF('chart1').exportAsImage());   
                    $('#output').append(PF('chart2').exportAsImage());
                    $('#output').append(PF('chart3').exportAsImage());
                    $('#output').append(PF('chart4').exportAsImage());
                    $('#output').append(PF('chart5').exportAsImage());
                    $('#output').append(PF('chart6').exportAsImage());

                    //PF('outputDialog').show();    
                    var innerHTML =  $('#output')[0].innerHTML;
                    if (innerHTML != null){
                        var openWindow = window.open("", 'Report', "");                                
                        openWindow.document.write(innerHTML);
                        openWindow.document.close();
                        openWindow.focus();
                        openWindow.print();
                        openWindow.close();    
                    }
                }

4 - Create a menubar, command button, or any other way of invoking the print() function. Here is my way:

<p:menubar>
            <p:menuitem value="Print" icon="ui-icon-print" action="javascript.void(0);" onclick="print();"/>
            <p:menuitem value="Email" icon="ui-icon-mail-closed" action="javascript.void(0);" onclick="alert('email');"/>
        </p:menubar>

Upvotes: 1

Tom Jonckheere
Tom Jonckheere

Reputation: 1648

According to this post, it's not possible to print a chart. A solution is given in the last post.

Upvotes: 0

Related Questions