2

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

Cœur
  • 37,241
  • 25
  • 195
  • 267
user2567005
  • 271
  • 1
  • 13
  • 27

5 Answers5

2

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')"/>
Benjamin W.
  • 46,058
  • 19
  • 106
  • 116
Leandro Rocha
  • 21
  • 3
1

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>
jrobertsz66
  • 953
  • 1
  • 12
  • 29
1

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.

user8138586
  • 11
  • 1
0

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

Tom Jonckheere
  • 1,630
  • 3
  • 20
  • 37
0

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>
hecarim
  • 87
  • 1
  • 5